Hi,
Now i have a table with five columns. Three columns are dropdowns and other two buttons(for add row and remove row)
cshtml code is:
<table class="viewtable">
<tbody>
<tr>
<td></td>
<td><select name="property" style="width:150px;" data-bind="value:ViewProperty, options:propertyValues, optionsText:'propertyName', optionsValue:'propertyId'">
</select></td>
<td><select name="condition" style="width:100px;" data-bind="value:Condition, options:conditionValues, optionsText:'conditionName', optionsValue:'conditionId'">
</select></td>
<td><select name="value" style="width:150px;" data-bind="value:PropertyValue, options: ViewProperty() == '1' ? categoryValues : ViewProperty()=='2' ? clientValues : ViewProperty()=='3' ? priorityValues : ViewProperty()=='4' ? statusValues : empty, optionsText: ViewProperty() == '1' ? 'Category' : ViewProperty()=='2' ? 'Client' : ViewProperty()=='3' ? 'priorityName' : ViewProperty()=='4' ? 'statusName' : 'empty', optionsValue: ViewProperty() == '1' ? 'CategoryId' : ViewProperty()=='2' ? 'ClientId' : ViewProperty()=='3' ? 'priorityId' : ViewProperty()=='4' ? 'statusId' : 'empty' "></select></td>
<td><button class="removeViewDetail" >-</button></td>
<td><button class="addViewDetail">+</button></td>
<td style="width:900px;" ></td>
</tr>
</tbody>
</table>
Knockout.js code is:
var self = this;
self.ViewProperty = ko.observable();
self.Condition = ko.observable();
self.PropertyValue = ko.observable();
self.empty = "";
var property = function (name, id) { this.propertyName = name; this.propertyId = id; };
self.propertyValues = ko.observable([
new property("Category", 1),
new property("Client", 2),
new property("Priority", 3),
new property("Status", 4)
]);
var condition = function (name, id) { this.conditionName = name; this.conditionId = id; };
self.conditionValues = ko.observable([
new condition("is", 1),
new condition("is not", 2)
]);
self.categoryValues = ko.observable([]);
$.getJSON("/api/helpdeskapi/getCategory", function (data) {
self.categoryValues(data);
});
self.clientValues = ko.observable([]);
$.getJSON("/api/helpdeskapi/getClients", function (data) {
self.clientValues(data);
});
var priority = function (name, id) { this.priorityName = name; this.priorityId = id; };
self.priorityValues = ko.observable([
new priority("High", 2),
new priority("Medium", 1),
new priority("Low", 3)
]);
var status = function (name, id) { this.statusName = name; this.statusId = id; };
self.statusValues = ko.observable([
new status("Open", 1),
new status("Assigned", 2),
new status("Closed", 3)
]);
Now i need to add rows to the table when the '+' button is clicked.
Please anyone help me. I have tried many codes but not successful. please help me.