On select all event the scroll bar goes back and forth in IE 9 and 10

[neetish]

Hello all , I'm using the PQ grid PRO version and I'm having the following issue,  The grid has about 300 entries , 300 data , I have a select all and unselect all button , So when I use Select all Button , the Scroll bar goes down to the 300th entry and scrolls up to the first entry , it looks absurd . It happens only in INTERNET explorer . NOT IN CHROME AND FIREFOX , Please help me

[paramvir]

What is the height of grid. Is it fixed or flex.

Do you mean scrollbar of the grid or of the browser?

[neetish]

the height of the grid is 550 , i'm talking about the Scroll bar of the GRID , I expand the grid using the expand option and then do select all , also I used this option flexHeight: true , it didn't work !  also this problem occurs without expanding the grid

[paramvir]

I don't see the mentioned issue in the online demo with IE9/10.

http://paramquery.com/pro/demos/checkbox

Could you please share a jsfiddle.

[neetish]

The link you gave ( demo ) bascially selects only one column , but in our case , we select all columns and all rows , so bascially the whole table gets scrolled .

This is the Select all event Listener ( on click )

   }).click(function (evt) {                                   
                        $("#user-details").find("td.pq-grid-cell").find("input[type='checkbox']").prop("checked", true);
                        var data = $("#user-details").pqGrid('option', 'dataModel.data'),
                            i = 0,                                   
                            len = data.length,                                         
                            userName;                                                       
                        while (len--) {                                             
                            userName = data[len].userName;             
                            if (userName == "admin" || userName == "guest")
                                continue;                                                                               
                            $("#user-details").pqGrid("setSelection", {rowIndx: len});   
                            data[len].state = true;                     
                        } 
 toggleButtons(evt, ui);                                         
                    }));                     

function toggleButtons() {                                                     
    var checkedUsers = getSelectedUsers();                                                                             
    if ($.inArray('admin', checkedUsers) != -1)                                         
        checkedUsers.splice(checkedUsers.indexOf('admin'), 1);       
    if ($.inArray('guest', checkedUsers) != -1)                                         
        checkedUsers.splice(checkedUsers.indexOf('guest'), 1);                             
                                                                                   
    if (checkedUsers.length > 0) {                                     
        $("#btn_deluser").button("enable");                               
    } else {                                                                                                           
        $("#btn_deluser").button("disable");                                             
    }                                                                                 
}
function getSelectedUsers(fetchAll) {                                                                                   
    fetchAll = fetchAll || false;                                                       
    var $grid = $("#user-details"),                                                                     
        data = $grid.pqGrid('option', 'dataModel.data'),         
        checkedUser = [],                                                                     
        len = data.length,                                                                           
        state, name, rowData;                                                               
                                                                                                     
    while (len--) {                                                                     
        rowData = data[len];                                                           
        state = rowData.state;                                                 
        name = rowData.userName;                       
        if (state) {                                                           
            if (name == "admin" || name == "guest")                                                                     
                continue;                                                               
            else if (fetchAll)                                                             
                checkedUser.push(rowData);                                             
            else                                                                           
                checkedUser.push(name);                                             
        }                                                             
    }                                                                     
                                                                                                                       
    return checkedUser;                                                                 
}                 

This is the column model
                                                                     
   function getUserDetailsColumn() {                                                                               
    return [                                                                                                           
        {                                                                               
            title: "",                                                                                   
            dataIndx: "state",                                   
            maxWidth: 30,                                                                     
            minWidth: 30,                                                                             
            align: "center",                                                               
            cb: {                                                                                     
                header: false,                                                         
                all: false                                                             
            },                                                                 
            render: function (ui) {                     
                if (ui.rowData.userName == "guest" || ui.rowData.userName == "admin") {
                    return "";                                                                                         
                }                                                                       
            },                                                                             
            dataType: 'bool',                                                           
            type: 'checkBoxSelection',                                                     
            cls: 'ui-state-default',                                                   
            resizable: false,                                                         
            sortable: false,                                                           
            editable: false,                                                                                           
            editor: false                                                               
                                                                                             
        },         

[neetish]

Any thoughts/idea on this ?

[paramvir]

Please follow this demo on checkbox selections. http://paramquery.com/pro/demos/selection_checkbox

It doesn't have the mentioned issue in IE browser.

In your code, you could pass focus: false to setSelection method.

Code: [Select]

  $("#user-details").pqGrid("setSelection", {rowIndx: len, focus: false});

If you still face any issue, please share a jsfiddle reproducing the mentioned issue.

http://jsfiddle.net/fgote2nv/

[neetish]

Yes I'm aware of that method , but the problem  is  i have 2 or 3 row  data entries which should not be selected at all , bascially unselectable data ,  so if i use the method like you said , all data entries will be selected , on select all it selects all data entries , even the ones which shouldn't be selected ( it appears as if it's selected in the screen ) which is not acceptable in my case .

[paramvir]

As per the docs, setSelection() brings the cell or row into viewport ( reason for your issue ) and sets focus on it in addition to selecting it.

Also calling setSelection() within a loop is not good for performance. ( it would get slow with increase in number of records ).

generic selection method could be used instead:

Code: [Select]

var rows = [];
while (len--) {                                             
          userName = data[len].userName;             
          if (userName == "admin" || userName == "guest")
                continue;                                                                               
          //$("#user-details").pqGrid("setSelection", {rowIndx: len});   
          rows.push({ rowIndx: len });
          data[len].state = true;                     
} 
$("#user-details").pqGrid("selection",
    { type: 'row', method: 'add', rows: rows }
);   


[neetish]

Hello , I'm trying to implement the way you suggested , this is the JS FIDDLE http://jsfiddle.net/t5e2hLyq/ , it has some errors but the way it's implemented is as what you suggested , can you please look into this ?

[paramvir]

your code is incompatible with the latest version of PQ Pro and is meant for older version of the grid.

As Evaluation board is limited to assist the evaluation users of PQ Pro, I'm moving your question to the free version of grid.

If you need further assistance, please mention the version of grid used in your project and share an appropriate working jsfiddle with the same version of files.

[neetish]

Hello my version of PQ grid is 3.1.0 , and i'm not able to see the console logs of pqgrid in JSFIDDLE , If you want the license key or mail confirmation , i'm ready to share . Please help , this is an important issue to us . we are kinda stuck .

[paramvir]

Please check this fiddle. http://jsfiddle.net/t5e2hLyq/5/ as fix for your issue.

You need to upgrade the grid version >= v3.2.0 and update your code. Please read the upgrade guide http://paramquery.com/pro/upgrade/index32

[neetish]

Hi ,
I just saw the fiddle , as per the code
  company = data[len].company;
              if (company == "BP" || company == "General Motors")
                continue;
              rows.push({
                rowIndx: len
              });

We want the rowIndx containing  BP and General Motors not to be selected on SelectALL button , but as per your fiddle , it's still getting selected , could you kindly help us ?

[paramvir]

Select All button doesn't select those 2 rows, but if you mean by header checkbox and by directly selecting the checkboxes, then please see this jsfiddle.

wherein column.editable callback is used to set the rule.

http://jsfiddle.net/t5e2hLyq/8/