1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Headers don't refresh when clearing grouping when changing data source

Headers don't refresh when clearing grouping when changing data source

Hello.

I am using the grid as part of an ASP MVC solution where its data source is selected by a drop down (a normal HTML SELECT) in the web interface. Fields can be different for every entry in the drop down.
(actually, I use a single data source with custom UrlAdaptor which submits the data set ID from the drop down to the server when its Javascript change event is triggered.)

As fields can be different, I want all sorting, filtering, grouping, field info to be cleared and culumns re-generated from the new data.
Clearing columns, sorting, filtering seems to work, but for grouping, the grouping is cleared in the grid, but the header is not refreshed (even when .refreshHeader() does not do this).

Adding the parameter for the UrlAdaptor is done using a function which returns the current data set ID from the select control (so I don't need to copy it every time it changes)

This is what I have so far in the 'change' event handler of the SELECT control: (this implicitly seems to trigger "refresh" action once, according to my logging grid.beforeAction events)

                        grid.dataSource.offline = true;
                        grid.clearSelection();
                        grid.clearFiltering();
                        grid.clearGrouping(); // triggers "ungrouping" action
                        grid.clearSorting();
                        grid.setProperties({
                            pageSettings: { currentPage: 1 }, // reset to first page, to prevent row virtualization / paging to break
                            columns: [],
                            columnModel: []
                        });
                        grid.refreshHeader(); // <= I expect this to also clear the grouping header to ungrouped state, but it doesn't.
                        grid.dataSource.offline = false;

Kind regards,
Remco Beurskens


9 Replies
GR Gokul Ramalingam Syncfusion Team March 10, 2020 02:27 PM UTC

Hi Lon, 

Greetings from Syncfusion Support. 

From your code sample, we could see that you have set offline property of dataSource to true initially. We suggest you to use the code below as provided in the code snippet. 

grid.clearSelection(); 
        grid.clearFiltering(); 
        grid.clearGrouping(); // triggers "ungrouping" action 
        grid.clearSorting(); 
        
        grid.setProperties({ 
            pageSettings: { currentPage: 1 }, // reset to first page, to prevent row virtualization / paging to break 
            columns: [], 
            columnModel: [] 
        }); 
        grid.dataSource.dataSource.offline = true; 

Please get back to us if you need further assistance. 

Regards, 
Gokul R 


LH Lon Hofman March 10, 2020 03:12 PM UTC

Setting offline to true temporarily has the intention to prevent additional round trips to the server from refreshes that may be triggered from one or more of the clearxxx() calls while I am resetting the grid's state. (I noticed that setting columns to [] also triggers refresh() behind the scenes)
If I set offline here to true, but not back to false, will it ever be set back to false implicitly?

I tried the code suggested, but the grouping is still not removed from the header. (if call grid.clearGrouping() manually from the browser debug console without changing the SELECT, it is correctly removed)

TS Thiyagu Subramani Syncfusion Team March 12, 2020 02:55 PM UTC

  
Hi Lon, 

Thanks for your response. 

By default, if set offline as true it prevents the additional round trips from server side like It retrieves all data’s from server in one request so other server requests are works based on retrieved data only. 

We have validated your requirement but unfortunately we couldn’t reproduced it in our side. So please share below details, 

  1. Share Syncfusion package version.
  2. Share video demonstration of your issue.
  3. If Possible to share your issue reproducing sample.

Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S. 


LH Lon Hofman March 16, 2020 02:30 PM UTC

Javascipt: 
* filename: ej2_grid.js
 * version : 17.4.46
Binary:
  Syncfusion.EJ2.dll   16.4500.0.45 (ej2-asp-core)

I will try to isolate the code in a small test project and share it when I've finished it.

Another issue but, some things might be related: 
The sample code provided there - https://stackblitz.com/edit/vzjnaz?file=index.js seems to work UNLESS there is a grouping active when 'load data' is clicked - then columns are all messed up, but in a different way as in my own project.

Kind regards,
 Remco Beurskens


Attachment: DemoVid_ba31beb2.zip

GR Gokul Ramalingam Syncfusion Team March 17, 2020 01:49 PM UTC

Hi Lon, 
 
Since the column and data source is getting updated while un-grouping operation is being performed this was causing the column to not update properly. So we suggest you to remove the column object and update the data source in a time out function(so that the grouping operation gets completed) to resolve the problem as demonstrated in below code snippet,  
  
setTimeout(function () {  
            grid.columns = [];  
            grid.columnModel = [];  
            grid.dataSource = data(500000);  
}, 300);  
  
Please get back to us if you need further assistance. 

Regards, 
Gokul R 


LH Lon Hofman March 17, 2020 04:39 PM UTC

Nice ! This seems to work.
Is there maybe some way to have the script wait for the un-grouping using some kind of Promise mechanism instead of introducing a fixed time async delay which does not guarantee completion? (maybe there is some property we can check in an async spin-wait loop construct to make sure un-grouping is complete?)

EDIT: I see an additional AJAX request is now sent to the data server (one after/on un-grouping and one on dataSource change). Can the first be prevented?

Kind regards,
Remco Beurskens

GR Gokul Ramalingam Syncfusion Team March 18, 2020 01:47 PM UTC

Hi Lon, 

Thanks for your update. 

Query: Is there maybe some way to have the script wait for the un-grouping? 
 
Based on your query, we suggest you to use the actionComplete event which will we triggered after ungrouping with the requestType as ungrouping. You can perform your operation there without setting timeout. Please refer to the below code snippet. In this actionComplete function, we have checked whether the button is clicked to change the datasource by using a flag variable and requestType as ungrouping.  

function actionComplete(args){ 
   
  if (args.requestType === 'ungrouping' && isDatasourceChanged){ 
    isDatasourceChanged = false; 
    grid.setProperties({ 
      pageSettings: { currentPage: 1 }, 
      columns: [], 
      columnModel: [], 
      dataSource: data1(500000) 
    }); 
  } 
} 

button.element.onclick = function() { 
  if (flag) { 
    isDatasourceChanged = true; 
    grid.clearSelection(); 
    grid.clearFiltering(); 
    grid.clearGrouping(); 
    grid.clearSorting(); 
    flag = false; 
  } 
}; 





Query : additional AJAX request is now sent to the data server (one after/on un-grouping and one on dataSource change). Can the first be prevented? 
 
Since you have performed the grouping action in server side, the AJAX post will be sent for the un-grouping and another AJAX post for dataSource change. 

Please get back to us if you need further assistance. 

Regards, 
Gokul R 


LH Lon Hofman March 18, 2020 07:00 PM UTC

Thanks for the idea. I think I found a way around to prevent an expensive round trip to the server for getting un-grouped data I don't need anyway since I'm switching to another set anyway:

    function actionComplete(args) {
        console.log("action complete: " + args.requestType);
        if (args.requestType === "ungrouping" && Array.isArray(grid.dataSource)) {
            grid.setProperties({
                pageSettings: { currentPage: 1 },
                columns: [],
                columnModel: [],
                dataSource: dataSource // set back to earlier saved reference to dataManager instance
            });
        }
    }

button.element.onclick = function() { 
  if (currentSetId != newSetId) { // set Id is passed to the server as a parameter in UrlAdaptor
    const grouped = grid.groupSettings.columns.length;
    if (grouped)
        grid.dataSource = []; // now ungroup/unsort will use a local empty dataSouce
    grid.clearSelection(); 
    grid.clearFiltering(); 
    grid.clearGrouping(); 
    grid.clearSorting(); 
    if (!grouped)
        grid.setProperties({
            pageSettings: { currentPage: 1 },
            columns: [],
            columnModel: [] });
  } 
};

Kind regards,
Remco Beurskens

GR Gokul Ramalingam Syncfusion Team March 19, 2020 12:26 PM UTC

Hi Lon, 

Thanks for your update. 

Please get back to us if you need further assistance. 

Regards, 
Gokul R 


Loader.
Up arrow icon