Data grid not selecting all rows over pages

Question

hello i am trying to use data grid and i enabled select all checkbox but it is selecting the rows on current active page onlymy datasource is javascript array i get it from tempdata, i tried to make button on toolbar and selectrowranges still not selecting all row just the current page can you provide any tips to solve this

Manivel Sellamuthu · Accepted Answer

Hi Said, 

Thanks for your update. 

Query: First of all thanks for your response, i want to show all rows over all pages for one group on same page and to render a checkbox for each group header to select all rows belongs to this group i did render a checkbox but selecting group rows is so slow that makes the browser to freeze for a while until it finish selecting 
 
We checked this query and we would like to let you know that the delay is occurring because when the custom solution for grouping is used, the pagination will be calculated for the group caption row and not the rows rendered under the group. And because of this the group needs to render all the rows under it. 

This will work fine when there are small number of rows and columns in the Grid but it will cause delay to render the cells for large data. So the Grid has to initialize and render the rows for all these records in the DOM. Since there are 19 columns here and based on the total number of records more cells need to be initialized and rendered because of which the delay will occur. This is a common delay issue that will occur when the same scenario is executed with html table. 

Query: Another thing i want to do is lets assume that my page size is 25 and the page at first showing me 25 rows correctly but when i use group by column it groups only the current page rows but what i want to show is 25 group (if there is this number of groups) 

We can perform pagination in the Grid based on the total groups instead of the group rows. Using this solution, the Grid will display the main groups present in a page based on the provided page size. This can be achieved by overriding the Grid’s generateQuery method and modifying the page query as demonstrated in the below code example(like you have already used), 





    const old = ejs.grids.Data.prototype.generateQuery; 

    ejs.grids.Data.prototype.generateQuery = function () { 
        const query = old.call(this, true); 
        this.pageQuery(query); 
        return query; 
    }; 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/166207-checkbox-grouping_-_Sample-1785001380.zip 

Please let us know if you need further assistance. 

Regards, 
Manivel

Sadi · Answer

var old = ej.grids.Data.prototype.generateQuery;

ej.grids.Data.prototype.generateQuery = function () {

var query = old.call(this, true);

this.pageQuery(query);

return query;

};

this is what causing the problem which group all rows over all pages and change the default layout so when i group by column it shows 25 group on one page instead of 25 rows and that what i need two so how i can achieve this without breaking the select all button

my second question is i added a checkbox for each group to select all elements in this group as i saw in one of your forms it is working but too slow ! this is the code:

function dataBound(args) {

var gridObj = document.getElementById('Grid')['ej2_instances'][0];

var chaecksavil = document.getElementsByClassName("groupcheck");

if (chaecksavil !== undefined) {

if (chaecksavil.length) {

for (var i = 0; i < chaecksavil.length; i++) {

var checkBoxObj = new ej.buttons.CheckBox({ change: onChange });

checkBoxObj.appendTo(chaecksavil[i]); //Render Syncfusion checkbox component in group caption

}

function onChange(args) {

var obj = document.getElementsByClassName("e-grid")[0].ej2_instances[0]

var tr = ej.grids.parentsUntil(args.event.target, 'e-groupcaption').parentElement;

let i = tr.rowIndex;

let nextRow;

let indexes = [];

i++;

nextRow = tr.parentElement.rows[i];

while (nextRow !== undefined && nextRow.classList.contains('e-row')) { //Perform select/de-select here

if (args.checked && (obj.getSelectedRowIndexes().indexOf(parseInt(nextRow.getAttribute('aria-rowindex'))) > -1)) {

console.log(nextRow.getElementsByTagName('input')[0]);

nextRow.getElementsByTagName('input')[0].click()

}

nextRow.getElementsByTagName('input')[0].click()

i++;

nextRow = tr.parentElement.rows[i];

}

Manivel Sellamuthu · Answer

Hi Sadi, 

Greetings from Syncfusion support. 

From the shared code example we could see that you have used checkbox selection in the grid with persist selection. By default while clicking the header checkbox it will select all the rows in all pages. 
We suspect that while grouping you want to render a checkbox for each group and select the particular group while clicking that checkbox. Could you please confirm this is your exact requirement or not. 

Before proceeding further on your query, please share the below details, which will be helpful for us to validate further about issue. 


Share the grid datasource code (how you  have bind the data to the grid component)
Share the code for grid events
Please explain more about your exact requirement if the above requirement is not your exact requirement

Regards, 
Manivel

Sadi · Answer

Hello,First of all thanks for your response, i want to show all rows over all pages for one group on same page and to render a checkbox for each group header to select all rows belongs to this group i did render a checkbox but selecting group rows is so slow that makes the browser to freeze for a while until it finish selectingAnother thing i want to do is lets assume that my page size is 25 and the page at first showing me 25 rows correctly but when i use group by column it groups only the current page rows but what i want to show is 25 group (if there is this number of groups)i will attach my scriptsAttachment: sync_c75a63c3.rar