CODEWITHSUNDEEP
javascriptknockout.js
Samuel Joy
Samuel Joy

Reputation: 608

How to change the column name in knowckout js grid

We have this requirement:

can any one guide me how to change the column name for the grid, using knockout (or any client side technology).

Upvotes: 0

Views: 830

Answers (1)

Sorskoot
Sorskoot

Reputation: 10310

I recreated the answer... Missed the point about selection the column names on the client.

I created a array of column names, self.columnNames for in the select boxes. The selected column names, self.selectedColumnNames are just an array with observable objects. These object are filled with the defaults for each column. The data itself is an array of arrays, containing the rows of data.

In each head of the table there's a select bound the columnnames and the selected column.

Below that is an unordered list to show the bindings are working.

JavaScript:

function model(){
    var self=this;
    self.columnNames = ["firstname","lastname","age","size","city"];

    self.selectedColumnNames = [
        {columnName:ko.observable("firstname")},
        {columnName:ko.observable("lastname")},
        {columnName:ko.observable("age")}];
    
    self.items =[
        ["Beer", "Bottle", 19],
        ["Wiskey", "Jar", 70],
        ["Wine", "Bottle", 45],
        ["Soda", "Can", 2]];
}

ko.applyBindings(new model());

HTML:

<table id="tabel">
    <thead>
        <tr>

            <!-- ko foreach: selectedColumnNames -->
                <th><select data-bind="options: $root.columnNames, value: $data.columnName"></select>
                </th>
            <!-- /ko -->
        </tr>
    </thead>

    <tbody>
        <!-- ko foreach: items -->
            <tr>
                <!-- ko foreach: $data -->
                    <td><span data-bind="text:$data"></span></td>
                <!-- /ko -->
            </tr>
        <!-- /ko -->
    </tbody>
</table>
<br/>
<ul data-bind = "foreach:selectedColumnNames">
    <li><span data-bind="text:columnName"></span> </li>
</ul>

Fiddle:

http://jsfiddle.net/8Skb4/3/

Upvotes: 1

Related Questions