When Scroll down, select the rows will become unselected

[BigMark]

Hi Sir:
     I find a problem!
     The part of  source code is as below:

            obj.colModel = [
                {
                    title: "<input type='checkbox' class='header_chk' onclick='SelectAll(this);'   />",
                    dataIndx: "state", width: 30, align: "center", sortable: false,
                    type: 'checkBoxSelection', cls: 'checkboxColumn', resizable: false,
                    render: function (ui) {
                        var rowData = ui.rowData, dataIndx = ui.dataIndx;
                        var val = rowData[dataIndx];
                        str = "";
                        if (val) {
                            str = "checked='checked'";
                        }
                        return "<input type='checkbox' " + str + " />";
                    }, className: "checkboxColumn"
                }]
     

when Scroll down, before the selected of the rows will become unselected?
     I'm really confused....

     Thanks!

[paramvir]

You need to save state of the checkboxes ( true/ false) in dataModel.data as shown in this demo.

http://paramquery.com/demos/selection_custom

Code: [Select]


newObj.rowSelect = function (evt, ui) {           
        var rowIndx = ui.rowIndx;
        newObj.dataModel.data[rowIndx][7] = true;
        $grid1.pqGrid("refreshCell", { rowIndx: rowIndx, dataIndx: 7 });
    }
    newObj.rowUnSelect = function (evt, ui) {
        var rowIndx = ui.rowIndx,
            data = ui.dataModel.data,
            evt = ui.evt;
        data[rowIndx][7] = false;           
        $grid1.pqGrid("refreshCell", { rowIndx: rowIndx, dataIndx: 7 });
    }



[anurag]

sir i am using this code to select checkbox
obj.colModel[4]={
        title:"Mark",width:100,dataIndx:5,align:"center",resizable:false,editable:false,type:'checkBoxSelection',render:function(ui){
            var row_Data=ui.rowData,dataIndx=ui.dataIndx;
            var val= row_Data[dataIndx];

             var str="";

            if(val){
                 str="checked='checked'";
            }
            return "<input type='checkbox' "+ str +" />";
        },className:"checkboxColumn"
        };

but the problem is that i can selected the checkBox but when i again click the checkbox than the row gets unselected and the tick mark in the checkbox does not get undone due to which i cannot select the row again

[paramvir]

That is why unselect the checkbox in rowUnSelect event.

Please see my previous post for rowUnSelect code.