Re: Adding checkbox to grid like number column for multiple selection

[paramquery]

Here is the URL for ParamQuery demo for multiple selection using checkbox.

http://paramquery.com/demos/selection_custom

On Tuesday, February 12, 2013 2:00:13 PM UTC+5:30, paramquery wrote:

1) You need to save state of the checkbox (true or false) in the data array.

2) Use render function to construct the view (checkbox html). http://paramquery.com/api#option-colModel-render

e.g. http://paramquery.com/demos/render_cells

On Tuesday, February 12, 2013 12:35:46 PM UTC+5:30, mohit verma wrote:

Hi,

I have made a hidden field in which i am getting all data i need to show in grid.

I am sending first header column as "", as i want to but checkbox in that. I have parsed the data, header and displayed everything as needed. But when i add the checkboxes programatically (they are added), the checked state is not retained, it is unchecked as soon as i scroll or sort.
Kindly help,

below is the script i am using

 

<script>

function colMfn(title) {

this.title=title;

this.align="center";

this.dataType="string";

this.width="";

}

function onChangeofCheckbox(){

alert("onChangeofCheckbox");

$( "#grid_table" ).pqGrid( "saveEditCell" );

}

$("document").ready(

function(){

var i;

var data112= new Array();

var data111= $("#closureInboxArray").val();

var data113= new Array();

data112=(data111).split('~');

var datacol=data112.pop().split('!');

for(i=0;i<data112.length;i++)

{

data113[i]=data112[i].split('!');

}

 var colM = new Array();

 var viewportWidth = $(window).width();

for(i=0;i<datacol.length;i++)

{

colM[i]=  new colMfn(datacol[i]);

colM[i].width=viewportWidth/datacol.length;

}

colM[0].width=50;

colM[1].width=50;

colM[1].dataType="integer";

for(i=0;i<data113.length;i++)

{

var id=data113[i][1];

data113[i][1]="<a href=\"editBVADetails.action?bvaId="+id+"\">"+id+"</a>";

                               // THis is where the checkboxes are generated and added to the grid

data113[i][0]='<input type="checkbox" value="true" id="cb'+id +'" onchange="onChangeofCheckbox()" />';

}

            var newObj = {

             width: '98%',

             height: 300,

             title:'<h2 style="color:black";, align="center">Demo grid</h2>',

             warp : true,

columnBorders: true,

            freezeCols: 2,

           editable: false,

            numberCell:false

            

            };

           newObj.dataModel =  {

            paging:'local',

            data:data113,

 curPage: 1,

            rPP: 10,

            sortIndx: 1,

            sortDir: "up",

            rPPOptions: [10, 20, 30, 40, 50, 100, 500, 1000]    

           };

            newObj.colModel = colM;

            $("#grid_table").pqGrid(newObj);

           

           

            

            var $grid = $("#grid_table");

          

            

            $grid.on("mouseenter", "tr.pq-grid-row", function (evt) {

                $(this).addClass("pq-grid-row-hover");

            });

            $grid.on("mouseleave", "tr.pq-grid-row", function (evt) {

                $(this).removeClass("pq-grid-row-hover");

            });   

});  

</script>