Grid sorting and filtering with remote data

[Sue W]

Hi,

  I have been evaluating your grid using data from a remote data service fetched using http calls.

  To do this I have used the UrlAdaptor.

  However I have found that the paging, sorting and filtering has to be done server side when you use that adaptor.

  We would really like that functionality to be done client side, as is possible with local data, to avoid having to keep going back to the server.

  Is there another way of obtaining remote data that would allow client side paging, sorting and filtering? Am I using the right adaptor?

Thanks

Sue

[Pavithra Subramaniyam]

Hi Sue, 

 

Greetings from Syncfusion. 

 

You can achieve your requirement by enabling the “offline” true property of Essential JavaScript 2 DataManager which will fetch the data from the server at initial render and do all the Grid actions in client side only. Please refer to the below code example and documentation link for more information. 

 

[component.ts] 

@Component({ 

    selector: 'app-container', 

    template: `<ejs-grid [dataSource]='data' [allowPaging]='true' [allowGrouping]='true' [allowSorting]='true' [pageSettings]='pageOptions'> 

                <e-columns> 

                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column> 

                    <e-column field='CustomerID' headerText='Customer ID' width=150></e-column> 

                    <e-column field='ShipCity' headerText='Ship City' width=150></e-column> 

                    <e-column field='ShipName' headerText='Ship Name' width=150></e-column> 

                </e-columns> 

                </ejs-grid>` 

}) 

export class AppComponent implements OnInit { 

 

    public data: DataManager; 

    public pageOptions = { pageSize: 7 }; 

 

    ngOnInit(): void { 

        this.data = new DataManager({ 

            url: 'Home/UrlDataSource', 

            adaptor: new UrlAdaptor, 

            offline: true 

        }); 

    } 

} 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/data-binding/#offline-mode  

 

Please contact us if you need any further assistance on this. 

 

Regards, 

Pavithra S. 

 

 

[Sue W]

Hi,

  Thanks for your reply.

  I have tried your suggestion but am getting the following error:

TypeError: Object doesn't support property or method 'slice'

  Is this an IE 11 issue? We have got the polyfills in our project.

  We need this to work in IE 11.

  Thanks

    Sue

[Pavithra Subramaniyam]

Hi Sue, 

 

We have checked your query and tried to reproduce the issue at our need but it is unsuccessful. Please refer to the below sample link for your reference.  

 

Sample: https://stackblitz.com/edit/angular-9fk7ad?file=remote-data.component.ts 

 

If you are still facing the issue could you please provide the below details that will be helpful for us to provide a better solution as early as possible. 

 

1. Share your Full Grid code.
2. Share the Syncfusion package version.
3. Share the issue reproducible sample or try to reproduce the issue in the above sample if possible.

 

Regards, 

Pavithra S. 

[Sue W]

Hi,

  Thanks for your reply.

  I have found the issue was due to the fact that I had changed the data coming back to the format {"count":40,"result":[{....}]} in order to get my data to show in the grid.

  I looked at the format of your data and found that you don't need the count and result format when the offline flag is set on the adaptor.

  I now have data in the grid. Thankyou!

  However I have found that that the grid is not responsive with data of more than ~ 1,000 rows.

  We have a data set with about 45 columns and are looking to load in the order of 10,000 rows. When I use this data set, the grid still hasn't loaded the data after 5 minutes.

  Are there any other settings that would help with large data sets?

Thanks

Sue

[Pavithra Subramaniyam]

Hi Sue, 

 

You can achieve your requirement by using the “Virtualization” feature of Grid component which allows you to handle large amount of data without performance degradation. Please refer to the below documentation link and Demo link for more information. 

 

Documentation : https://ej2.syncfusion.com/angular/documentation/grid/virtual/  

 

Demo                  : https://ej2.syncfusion.com/angular/demos/#/material/grid/virtualization  

 

Regards, 

Pavithra S. 

[Sue W]

Hi,

  Thanks for your help with this.

  I have modified my code to use virtualization. This works with 1,000 rows of data, and I can see the data loading as I scroll.

  However, if I increase the number of rows to 10,000, the IE 11 screen goes blank after a while and says it's not responding.

  I have removed all sorting, filtering etc from the grid to check if that was the issue, but still the same.

  Your example uses local data, I wonder if it is because I am using remote data via the WebApiAdaptor. I have also tried the UrlAdaptor.

Thanks

Sue

[Pavithra Subramaniyam]

Hi Sue, 

Thanks for the update. 

Query: However, if I increase the number of rows to 10,000, the IE 11 screen goes blank after a while and says it's not responding. 

We are unable to reproduce the reported issue at our end, please provide the below information for us analyze the issue further. It will be helpful for us to provide a better solution as soon as possible. Refer to the below video demo for your reference, 

1. Share the grid package version details?
2. Share the Internet Explorer version details?
3. Have you set ‘enableVirtualization’ to ‘true’ and ‘enableColumnVirtualization’ to ‘true’ in the grid?
4. Please share full grid code sample?

Video Demo: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Mar_18_gridVirtualization-33732609  

Please get back to us for further assistance. 

 

Regards, 

Pavithra S. 

[Sue W]

Hi,

  Thanks for the reply.

  I hadn't set enableColumnVirtualiztion to true as I didn't think I needed to. I have done that now and re-tested.

  It still works with 1,000 rows but if I increase to 10,000 rows, the browser window just sits there with no rows in the table. The spinner stops just after the service call completes.

  The browser version is IE 11.1631.15063.0

  I have added a zip file with text files containing the versions of your software I'm using, an outline html file and a snippet of the ts file.

  I haven't included the service name or all the columns as we are using a service that you will not be able to access to get the data.

**UPDATE** Just after I sent this message, I was called away from my desk for a while. When I came back the grid had actually rendered the data and the virtual scrolling worked. So, I think it's just taking a really long time to do the initial render. I just tried it again and it's been 10 minutes since the data returned from the server and it still hasn't rendered the grid. Maybe if I wait long enough it will work again, but obviously this is too long to wait.

Thanks

Sue

Attachment: Syncfusion1_9b75e5ec.7z

[Pavithra Subramaniyam]

Hi Sue, 

 

Thanks for the update. 

 

Query: it's just taking a really long time to do the initial render 

 

From the query we suspect that the time taken is due to the data returned from the server. So please provide the below information for us to look into this issue further, 

 

1. Please check if the data is bind to grid from the server when the service call completes?
2. Share your grid package version details?
3. Can you please share video demo of the issue?

 

Please get back to us for further assistance. 

 

Regards, 

Pavithra S. 

[Sue W]

Hi,

  I know the data is binding to the grid when the service call completes as it works if I limit the results to 1,000 rows. I use the same service call and just limit the number of rows returned.

  I also can see the service call returning the data just before the grid control spinner stops spinning.

  I sent you the grid package version details in the zip I attached to my last response. Let me know if you can't see it.

  Not sure a video demo would help as it is just a blank grid. The column header is shown, but no rows.

Sue

[Pavithra Subramaniyam]

Hi Sue, 

 

Thanks for the update. 

 

Query: it's just taking a really long time to do the initial render 

 

We have prepared a sample with 10,000 rows and 40+ columns in Angular WebApiAdaptor to reproduce the reported issue. But it was unsuccessful, so we suspect that your service might be the cause of this issue. Please refer to the below sample for your reference, 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/angular-webapiSample-2134233706  

 

If your service has global access, then we suggest considering to provide it to us, so that we can check it for further validation. 

 

Please get back to us for further assistance. 

 

Regards, 

Pavithra S. 

[Sue W]

Hi,

  Thanks for your sample code, that was very useful for comparison.

  The only difference I can see now is that our controller uses the following code:

        [Route("ListDataForGrid")]

        public async Task<string> ListDataForGrid()

        {

            WebServiceConnector connector = new WebServiceConnector(this.AppSettingConfiguration);

            object data= await connector.Get(this.Request, "ListDataForGrid");

            return data.ToString();

        }

This then makes the call to our service. Our service does not have public access and the data is confidential so I cannot provide it to you.

The data is returned in the format:

[{"Field1":true,"Field2":1234,.....}, {"Field1":false,"Field2":5678,.....}]

The data loads into the grid with 1,000 rows, so the format must be correct, it takes an excessive time to load with 10,000 rows.

Sue

[Pavithra Subramaniyam]

Hi Sue, 

Thanks for your Update. 

 

We suspect there are only a couple of the things that might be a factor for the delay, 

1. Time taken to retrieve data from the server(server request).
2. Time taken to render the component(Grid).

You can find both of the above time takings using the below way, 

 

 

And time taken for grid component to render, 

[.ts] 

ngOnInit(): void { 

        this.stTime = performance.now(); 

        this.data = new DataManager({ 

        ... 

    } 

    ngAfterViewInit(): void { 

        this.grid.element.addEventListener('DOMSubtreeModified', () => { 

            if (this.stTime && this.isDataChanged) { 

                this.isDataChanged = false; 

                let val: any = (performance.now() - this.stTime).toFixed(0); 

                console.log(val); 

            } 

        }); 

    } 

Please get back to us with the above mentioned details to look into the issue further. 

 

Regards, 

Pavithra S. 

[Sue W]

Hi,

  I have checked the data response time and it returns the data in about 40 seconds.

  I haven't used your code to get the render time as I'm not sure where to set the isDataChanged flag.

  However, after the data was returned, I went for lunch and when I came back 45 minutes later the grid still hadn't rendered.

Sue

[Pavithra Subramaniyam]

Hi Sue, 

Thanks for your Update. 

 

Query: I haven't used your code to get the render time as I'm not sure where to set the isDataChanged flag. 

 

We have provided the required details and sample to find the issue with the time delay, so please provide the below mentioned details after implementing it in your sample. 

1. We suggest to bind the actionFailure event to check in case of any failure in the data binding process?
2. We have also used the process of getting the time taken to render grid component, please apply the same code from the below sample to your sample as well and provide us the details?
3. Also share us the time taken of the below provided sample for browser clarifications.

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Angular-WS1792504739  

Please get back to us for further. 

 

Regards, 

Pavithra S. 

 

[Sue W]

Hi,

  thanks for the sample. It was very helpful.

 

  Running your sample code I got the following:

     Time taken     1148ms

     Data Bound time taken     72380ms

  Running my code I got the following:

     Time taken     725ms

     Data Bound time taken     1508699ms

  I have added a screenshot of the results from my code as an attachment.

  Once the grid had rendered, all the data in the grid looked ok and I could see the data loading as I scrolled and the performance was good, but as you can see it took 25 minutes to do the initial render.

Sue

Attachment: Sync4_353d057e.7z

[Pavithra Subramaniyam]

Hi Sue, 

Thanks for your update. 

We would like to inform you that, the server load time is based on the server speed and the code you are containing in your application server. In the below screenshot, the server load time in our application is low because of the server speed in our machine. If the loading time of server is too slow, then this needs to be handled at server and you need to modify the server codes to increase the performance. So please share the screenshot of the server loading time from your “Network” tab as like the below screenshot.  

 

Please get back to us if you need further assistance. 

Regards, 

Pavithra S.