ParamQuery grid support forum

General Category => Help for ParamQuery Grid (free version) => Topic started by: sachin_jain139 on March 02, 2014, 05:11:59 pm

Title: Adding Select All Checkbox in Header of Grid
Post by: sachin_jain139 on March 02, 2014, 05:11:59 pm

Hi All,

I am creating an application where the requirement is to add a Checkbox column in grid and in header there will be check box which will select/unselect all checkboxes in that column. I have added that column successfully but the problem is with Select All checkbox. It is selecting only first 17-18 checkboxes. When I saw it in debugger I found that only top 17-18 checkboxes are loaded by grid and others will be loaded when I scroll down. But this behavior of grid is not acceptable in this case. Please suggest.

Thanks,
Sachin

Title: Re: Adding Select All Checkbox in Header of Grid
Post by: paramvir on March 02, 2014, 05:39:53 pm

You shouldn't make direct change in pqGrid view; it won't persist as pqGrid refreshes its view frequently.

Keep a bool column to save the state (true/false) of a checkbox. Tell pqGrid how to refresh its column view by using column.render callback.

When you click on the header checkbox, save true/false in the column field.

Title: Re: Adding Select All Checkbox in Header of Grid
Post by: sachin_jain139 on March 02, 2014, 07:58:37 pm

Hi,

Thanks for your quick reply. I tried your suggestion. Below is my code:-

function selectAll(evt)  //function called on onchange of Select All Checkbox
        {
            var isChecked = $("#cbxAll").is(":checked");
            var rowIndex;
            var data = gridData.dataModel.data;
            for (var i = 0; i < data.length; i++)
            {
                data[0] = isChecked;
                $("#grid-json").pqGrid("refreshCell", { rowIndx: i, dataIndx: 0 });
            }
        }

I have also added render function as below:-

                success: function (data)
                {
                    gridData = data;
                    $.extend(data.colModel[0],
                    {
                        render: function (ui)
                        {
                            var rowData = ui.rowData, dataIndx = ui.dataIndx;
                            var val = rowData[dataIndx];
                            str = "";
                            if (val)
                            {
                                str = "checked='checked'";
                            }
                            return "<input type='checkbox' class='cbx' style='margin:0' " + str + "onChange='cbxChange(this)'/>";
                        }
                    });
                    $grid1 = $("#grid_json").pqGrid(data);

This render function runs properly first time when grid is loaded. But it should also run when I am calling refreshCell in SelectAll function which is not  happening. Please suggest.

Title: Re: Adding Select All Checkbox in Header of Grid
Post by: paramvir on March 02, 2014, 08:14:54 pm

You are probably right. refreshCell doesn't call render method in base version.

You don't need to call refreshCell repeatedly in a loop for performance reasons.

Instead of that just call refresh method once.

http://paramquery.com/api#method-refresh

Title: Re: Adding Select All Checkbox in Header of Grid
Post by: sachin_jain139 on March 02, 2014, 08:45:18 pm

Hi,

Is there any other alternate if this does not work in base version?

Title: Re: Adding Select All Checkbox in Header of Grid
Post by: paramvir on March 02, 2014, 09:05:50 pm

I've updated my previous message. It works in base version too. Please read it entirely.

Title: Re: Adding Select All Checkbox in Header of Grid
Post by: sachin_jain139 on March 02, 2014, 10:48:52 pm

Thanks a lot for your kind support. Its done.. :)