jqGrid & knockout combination part2

[Yauhen]

Have found previous topic about this (http://groups.google.com/group/
knockoutjs/browse_thread/thread/75b2a5fa4fa1db27)

But haven't found final solution. Have tried to implement but without
any success.
update method is called just after showing grid (but nothing was
changed) it also show edits for every record: so if it were 5 records
it will show edits for 10. May be this is due of the copying of data
array by jqGrid. I have tried adding commented line but it doesn't
help.
Here is my code

ko.bindingHandlers.grid = {
init: function (element, valueAccessor) {
var value = valueAccessor();
var dataArr = ko.utils.unwrapObservable(value.data).slice(0);

var grid = $(element).jqGrid({
data: dataArr,
datatype: "local",
localReader:
{ repeatitems: false,
id: value.rowId
},
gridview: true,
height: 'auto',
hoverrows: false,
colModel: value.colModel,
pager: value.pager,
rowNum: 3,

});
//$(element).jqGrid("setGridParam", "data",
ko.utils.unwrapObservable(value.data).slice(0));
},
update: function (element, valueAccessor) {
var value = valueAccessor();
var gridData = $(element).jqGrid('getGridParam', 'data');

var editScript = ko.utils.compareArrays(gridData,
value.data());
for (var i = 0; i < editScript.length; i++) {
switch (editScript[i].status) {
case "added":
$(element).jqGrid("addRowData",
editScript[i].value[value.rowId], editScript[i].value);
break;
case "deleted":
$(element).jqGrid("delRowData",
editScript[i].value[value.rowId]);
break;
}
}
}
};

html is simple enough of jqGrid
<table id="dataGrid" data-bind="grid: { data: developers,
colModel: [

{ name: 'Name', index: 'Name', width: 200, sortable: true },

{ name: 'Desc', index: 'Desc', width: 300, sortable: true }
],
rowId: 'ID',
pager: '#pager'
}">
</table>
<div id="pager"></div>

[Yauhen]

here i sample
http://jsfiddle.net/yauhen/zjbLF/5/
please note 10 number in the bottom.
so to divide big problem in small:
1) why update is called when nothing is changed?
2) why compare arrays don't accept any comparer but just use identity
to compare

[Yauhen]

I have asked by email have I found any solution so here my results:
1) here is very simplified demo that use jqgrid with knockout.
http://jsfiddle.net/yauhen/zjbLF/12/. Due of cloning data in jqGrid we
sometimes need to use search in array to find original item.
2) I have tried solution writing my own comparearrays (based on
knockout code) which instead of comparing by reference will compare by
some field to give differences. Then I have tried to use jqgrid
methods like setRowData, delRowData to update only necessary rows but
not all. Unfortuanelly with such strategy paging will not work (it
just doesn't catch such calls as low level see my comments here
http://stackoverflow.com/questions/7307796). So if you defenetly don't
need paging you could use this strategy (just change compare logic
from equality). But as I need I don't use it.

On 6 дек, 11:13, Yauhen <yauhe...@gmail.com> wrote:
> here i samplehttp://jsfiddle.net/yauhen/zjbLF/5/

[neot...@gmail.com]

Hi
It was nice to haer about your work on KO and Jqgrid.
I tried with your approach but i have 2 problems.
Grid appears with out any data.when i try to short column data appears.
Second problem is that pager does not appear.
Can u pls advice on this.
My html side is very simple:

      <table id="GridArea" data-bind="CGrid: { pager: '#pager' }"></table>    
        <div id="pager"></div>


and the binding is as bellow:
    ko.bindingHandlers.CGrid = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel)
        {          
            var value = valueAccessor();         
            var mydata = [{ id: "1", invdate: "2010-05-24", name: "test", note: "note", tax: "10.00", total: "2111.00" }, { id: "2", invdate: "2010-05-25", name: "test2", note: "note2", tax: "20.00", total: "320.00" }, { id: "3", invdate: "2007-09-01", name: "test3", note: "note3", tax: "30.00", total: "430.00" }, { id: "4", invdate: "2007-10-04", name: "test", note: "note", tax: "10.00", total: "210.00" }, { id: "5", invdate: "2007-10-05", name: "test2", note: "note2", tax: "20.00", total: "320.00" }, { id: "6", invdate: "2007-09-06", name: "test3", note: "note3", tax: "30.00", total: "430.00" }, { id: "7", invdate: "2007-10-04", name: "test", note: "note", tax: "10.00", total: "210.00" }, { id: "8", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "21.00", total: "320.00" }, { id: "9", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, { id: "11", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, { id: "12", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, { id: "13", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, { id: "14", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, { id: "15", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, { id: "16", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, { id: "17", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, { id: "18", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, { id: "19", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, { id: "21", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, { id: "22", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, { id: "23", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, { id: "24", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, { id: "25", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, { id: "26", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, { id: "27", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, { id: "28", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, { id: "29", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }];
          
            $(element).jqGrid({
                data: mydata,
                datatype: "local",
                height: 250,
                width:1000,
                rowNum: 10,
                rowList: [10,20,30],
                colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
                colModel:[
                    {name:'id',index:'id', width:60, sorttype:"int"},
                    {name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"},
                    {name:'name',index:'name', width:100},
                    {name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number"},
                    {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
                    {name:'total',index:'total', width:80,align:"right",sorttype:"float"},
                    {name:'note',index:'note', width:150, sortable:false} ],
                pager: value.pager,
                gridview: true,
                viewrecords: true,
                caption: "Client Data"
            });
        }

Can u pls advice on this.

Br
Neo