Row filter not showing after server side data load

[Gourav]

Hi Team,
I m using server side data when data load row filter not visible.
virtualDataSource: (resultCallbackFunction, details) => {
const pageSize = details.last – details.first
const pageNumber = details.last/pageSize;
if (details.action === ‘pageIndexChange’) {
this.getPage(pageNumber,details);
}else if(details.action === ‘filter’){
this.getPage(1,details);
}else if(details.action == ‘sort’){
if(details.sorting.length > 0){
this.getPage(pageNumber,details);
}else{
const result = data;
const total = data_size;
resultCallbackFunction({
dataSource: result,
virtualDataSourceLength: total
});
}
}
else {
const result = data;
const total = data_size;
resultCallbackFunction({
dataSource: result,
virtualDataSourceLength: total
});
}
} ,
dataFields:this.dataFields
 
dataFields = [{name:’test’,dataType:’string’}]
https://www.htmlelements.com/angular/demos/grid/filtering-row/
I m following this link.

[admin]

Hi Gourav,
The provided information is unfortunately insufficient to reproduce the reported behavior. Please, provide a full example either in the forum or by email, which demonstrates such behavior with the current version of Smart UI components.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[Gourav]

Hi Peter,
We are trying to mix Row Filter(https://www.htmlelements.com/demos/grid/filtering-row/) with Server Side Filter (https://www.htmlelements.com/angular/demos/grid/server-side-filtering/) due to which probably we are facing issue. I am not able to attach screen shot in this visual box.
But as a workaround.
Can you suggest, if we customize the filter box for Service Side Filter.
This filter box is very big in size already and when we do this with date, it take so much vertical length that overflow happens and we need to scroll down to select date.
 
 
 
 
 
 
 
 
 

[yavordashew]

Hi Gourav,
Thank you for contacting us again.
Unfortunately still we can reproduce this situation without a code example because its a bit more complex.
However I would advise you to double check if you have set properly the filtering properties if the filter row is not visible.
For your workaround suggestion if the filter box doesn’t suit your needs I can recommend you to check the following demo regarding custom editor in the filtering row.
https://www.htmlelements.com/demos/grid/filtering-row-custom-editor/
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[shelkovnikovdv]

Hi Gourav.
After downloading data from the server filters are rendered normally.
But then something is called and makes all cells filter row empty.
This code saves the day

let smartgrid = ...
virtualDataSource: function (resultCallbackFunction, details) {
   ...
   function refreshFilterPanel() {
      for (var i = 0; i < smartgrid.columns.length; i++) {
          smartgrid.columns[i]._filterEditorInitialized = false;
      };
      smartgrid._renderFrozenRows();
   }
   loadFromServer().then( (data) => {
      resultCallbackFunction({
         dataSource: data.items,
         virtualDataSourceLength: data.totalRecords
      });
      refreshFilterPanel();
      ....
    })
}

Best regards, Dmitry

[mannaii.najmedine1995]

Hello,
I’m facing the same problem, i tried your code but i can’t understand the source of smartgrid variable. Can you help me please?
Best regards.

[mannaii.najmedine1995]

Hello,
I’m facing the same problem, i tried your code but i can’t understand the source of smartgrid variable. Can you help me please?
Best regards.

[yavordashew]

Hi Najmedine Mannaii,
The variable smartgrid is a selector for the SmartGrid component.
For example you can select the SmartGrid like so:

let smartgrid =  document.querySelector('smart-grid');

Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts