How to change the column name in knowckout js grid

Question

We have this requirement:

• we have predefined set of column names like (FirstName,LastName,age ... these column names are just for example).
• user will upload one excel file.
• on server we save that excel file and process the data of the excel and return it as a grid.
• user will then set the column name for each column from the predefined set of available column names.
• once all the changes are done , user will save the data.

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

Answer 1

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/