Click here to Skip to main content
15,867,906 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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:

XML
<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:

C#
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.
Posted
Updated 8-Jan-17 16:57pm

1 solution

You need to push the item to viewmodel on button click

Please refer the following link. it will be helpful. Utility functions in KnockoutJS - JSFiddle[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900