Issue with SELECT ALL check box and INFINITY SCROLL

[John Killcommons]

Hello.

We using syncfusion data grid with an infinite scroll module.

I have an issue with the "select all" checkbox, it stays always with the "checked" icon, and only works if the checkbox of a single row has been clicked first.

Another issue is, since we use infinite scroll, that the "select all" checkbox only selects the first set of data loaded, ignoring the resto of the data laoded by infinite scroll.

Thanks,

[Ajith Govarthan]

Hi John, 

 

Thanks for contacting Syncfusion support. 

 

Query: I have an issue with the "select all" checkbox, it stays always with the "checked" icon, and only works if the checkbox of a single row has been clicked first. 

 

Based on your query you are facing issues with checkbox selection along with InfiniteScroll feature. So, we have prepared sample and in that sample we have enabled the checkbox selection and the infinite scroll but we did not face any mentioned issues in the prepared sample.   

 

For your convenience we have attached the sample, please refer the sample for your reference. 

 

Code Example: 

App.component.html 

 

<div class="control-section"> 

  <div class="div-button"> 

    <button ejs-button (click)="onClick($event)" cssClass="e-info"> 

      Load 100K Data 

    </button> 

    <span id="popup"> 

      <span id="gif" class="image"></span> 

    </span> 

  </div> 

  <ejs-grid 

    #grid 

    [dataSource]="vData" 

    [enableInfiniteScrolling]="true" 

    height="400" 

    [pageSettings]="pageSettings" 

  > 

    <e-columns> 

      <e-column type="checkbox" width="120"></e-column> 

      <e-column field="FIELD1" headerText="Player Name" width="120"></e-column> 

      <e-column field="FIELD2" headerText="Year" width="100"></e-column> 

      <e-column field="FIELD3" headerText="Stint" width="120"></e-column> 

      <e-column field="FIELD4" headerText="TMID" width="120"></e-column> 

      <e-column field="FIELD5" headerText="LGID" width="120"></e-column> 

      <e-column field="FIELD6" headerText="GP" width="120"></e-column> 

      <e-column field="FIELD7" headerText="GS" width="120"></e-column> 

    </e-columns> 

  </ejs-grid> 

</div> 

 

Sample Link: https://stackblitz.com/edit/angular-ug54mj-a2zksc?file=app.component.ts 

 

If you still face the issue, then please share the below details to find the root cause of the issue. 

 

1. If possible, please try to reproduce the issue in the attached sample.

 

2. Share the complete grid code sample.

 

3. Share the video demonstration of the issue.

 

4. Share the Syncfusion package version.

 

Regards, 

Ajith G. 

 

[John Killcommons]

Hi Ajith,

The syncfusion version used is 18.4.43.

We are using Vue.js, not angular as show in the sample link provided.

Video example: https://www.loom.com/share/19ea0a0d364f4b47b2b8fd180d7d2a69

Thanks,

[Ajith Govarthan]

Hi John, 

Sorry for the inconveniences. 

We checked the attached video demo and found that you have used only 3 data in your Grid application with the infiniteScroll. By default, the infiniteScroll feature is used to handle a large amount of data in the Grid component, so please bind large amount of data to use the infiniteScroll feature properly in your Grid application. 

We have also prepared sample in in Vue framework for checkbox issue and found everything works fine at our end without any mentioned issues. For your convenience we have attached the sample please refer them for your reference. 

Code Example: 

App.vue 

 

<template> 

  <div id="app"> 

    <button v-on:click="loadData">LoadData</button> 

    <ejs-grid 

      ref="gridObj" 

      height="150px" 

      :enableInfiniteScrolling="true" 

      :pageSettings="pageSettings" 

      :load="load" 

    > 

      <e-columns> 

        <e-column type="checkbox" width="80"></e-column> 

        <e-column 

          field="OrderID" 

          headerText="ID" 

          width="80" 

          isPrimaryKey="true" 

        ></e-column> 

        <e-column 

          field="CustomerID" 

          headerText="CustomerID" 

          width="90" 

        ></e-column> 

        <e-column field="ShipCity" headerText="ShipCity" width="120"></e-column> 

      </e-columns> 

    </ejs-grid> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

import axios from "axios"; 

import { data } from "./datasource.js"; 

import { 

  GridPlugin, 

  Freeze, 

  Edit, 

  Toolbar, 

  Page, 

  Filter, 

  ColumnChooser, 

  InfiniteScroll, 

} from "@syncfusion/ej2-vue-grids"; 

import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons"; 

Vue.use(ButtonPlugin); 

Vue.use(GridPlugin); 

 

export default { 

  data() { 

    return { 

      data: data, 

      pageSettings: { 

        pageSize: 8, 

      }, 

    }; 

  }, 

  methods: { 

    load: function () {}, 

    loadData() { 

      debugger; 

      this.$refs.gridObj.dataSource = this.data; 

    }, 

  }, 

  provide: { 

    grid: [Freeze, InfiniteScroll, Edit, Toolbar, Page, Filter, ColumnChooser], 

  }, 

}; 

</script> 

 

<style> 

@import https://cdn.syncfusion.com/ej2/material.css; 

</style> 

 

 

 

Sample Link: https://codesandbox.io/s/vue-template-forked-gnbop?file=/package.json 

UG-Link: https://ej2.syncfusion.com/vue/documentation/grid/infinite-scroll/  

If you still face the issue, then please try to reproduce the issue in the attached sample to find the root cause of the issue. 

Regards, 

Ajith G. 

[John Killcommons]

It looks like the problem appear when infinite scroll getting data from remote source by pages like in our implementation.

The grid in out implementation defined with  :dataStateChange="dataStateChange" 

where dataStateChange method fetch next chunk of data into items collection. So all data never stored in items collection, only the last page from api. 

May  be exactly this is the main diference with provided example and our case. We have too much data, to fetch it in one request.

[Sujith Kumar Rajkumar]

Hi John, 

 

Based on the query we would like to inform you that when custom binding is used and the Grid’s dataStateChange event is bound, the data based on the navigated page will be passed to this event arguments using which you can retrieve the next set of data to be bound in the Grid and set it to its data source property. More details on this can be checked in the below documentation link, 

 

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/data-binding/#handling-grid-actions 

 

And since we are not able to clearly identify your issue from the provided information, can you please share us a reproducible sample which will be helpful to identify your exact problem case or your entire Grid code file(of your application) to validate further on this from our end. 

 

Regards, 

Sujith R   

[John Killcommons]

We forked the example you have been provided and modified it in the way our grid uses infinite scroll. Instead of real API used static json file with response in format similar to how we return data into the grid.

Here is the link to the demo https://codesandbox.io/s/github/skie/vue-grid-checkbox/tree/main/?file=/src/App.vue

[Ajith Govarthan]

Hi John,    

  

Sorry for the delayed update. 

  

We have validated the provided information and we have confirmed it as a bug and logged the defect report “Checkbox selection not working properly with infiniteScroll and custom binding”. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and including the defect fix in our upcoming weekly release which is expected to be rolled out on 16^th  June 2021. 

    

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.    

    

Feedback Link: https://www.syncfusion.com/feedback/25897/checkbox-selection-not-working-properly-with-infinitescroll-and-custom-binding 

  

Regards, 

Ajith G.