JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Data Grid Row filter not showing after server side data load

This topic contains 7 replies, has 5 voices, and was last updated by Avatar Yavor Dashev 1 week, 3 days ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #101582
    Avatar
    Gourav
    Participant

    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.

    #101588
    Avatar
    admin
    Keymaster

    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/

    #101590
    Avatar
    Gourav
    Participant

    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.

     

     

     

     

     

     

     

     

     

    #101595
    Avatar
    Yavor Dashev
    Participant

    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/

    #101956

    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

    #102091
    Avatar
    Najmedine Mannaii
    Participant

    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.

    #102092
    Avatar
    Najmedine Mannaii
    Participant

    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.

    #102093
    Avatar
    Yavor Dashev
    Participant

    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/

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.