Grid refresh not working and how to expand a row in ejs grid

[Neha Singh]

Hello Team,

I have two queries in related with 'ejs-grid'.

1. I am having global serach box in my html which is querying for grid data dynamically. Once I get response grid is not getting refresh. I have tried using

@ViewChild("grid") 

  public gridObj: GridComponent;  

But this method didn't workout as it is expecting a initialiser for gridcomponent. Is there any other way to refresh grid?

2. I have a scenario where 'ejs-grid' table column(few items in a column) will have + symbol as prefix and clicking on it will expand the particular row to show few inner detailed data. How to achieve this?

Regards

Neha

[Sujith Kumar Rajkumar]

Hi Neha, 

 

Greetings from Syncfusion support. 

 

Query – 1: “I am having global serach box in my html which is querying for grid data dynamically. Once I get response grid is not getting refresh” 

 

We checked your query and before proceeding further can you please share us the following information to identify your exact problem scenario, 

 

• From this – “I am having global serach box in my html which is querying for grid data dynamically”, can you let us know if you have just queried the search input value or applied the query to the Grid?
• From this – “Once I get response grid is not getting refresh”, can you let us know if you have directly queried the Grid data or updated the response data to the Grid? If you have updated the response data to the Grid can you please share us the code snippet for it.
• Have you bound local or remote data to the Grid? If remote data which adaptor have you used?
• Grid code file so that we can check the reported problem with the Grid settings enabled in your application.

 

Query – 2: “I have a scenario where 'ejs-grid' table column(few items in a column) will have + symbol as prefix and clicking on it will expand the particular row to show few inner detailed data. How to achieve this?” 

 

We checked this query and would like to let you know that if your requirement is to render a child table that has relationship with the parent Grid, we suggest you to use the Hierarchical binding functionality for this. More details on this with preview sample can be checked in the below help documentation link, 

 

Hierarchical binding: https://ej2.syncfusion.com/angular/documentation/grid/hierarchy-grid/#hierarchical-binding  

 

However if your requirement is just to display a detail row content that contains additional details about the parent row without the need for a table structure, then we suggest you to Detail template feature of the Grid for this. More details on this can be checked in the below online preview sample link, 

 

Detail template: https://ej2.syncfusion.com/angular/demos/#/material/grid/detail-template  

 

Note: The Detail template functionality has not been documented in the help site. We have logged a documentation task for this, and we will update and refresh it online as soon as possible. So if you need more information on the Detail template then please check the below JavaScript(ES6) documentation link, 

 

Detail template documentation: https://ej2.syncfusion.com/documentation/grid/row/#detail-template  

 

In both these functionalities, the child table/detail row will have arrow icons to expand/collapse them. You can replace them with your own icons if required by overriding the following class of the Grid element and setting the icon styles to them, 

 

/* Expand icon style */ 

.e-grid .e-icon-grightarrow::before { 

    /* You can set your required icon style here */ 

    content: ' ' 

} 

 

/* Collapse icon style */ 

.e-grid .e-icon-gdownarrow::before { 

    /* You can set your required icon style here */ 

    content: ' ' 

}    

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R 

[Neha Singh]

Thank you Sujith R for your response.

Query – 1: “I am having global serach box in my html which is querying for grid data dynamically. Once I get response grid is not getting refresh” 

Ans : Every time I type something in the searchbox I am having an api call which returns the data (datasource). It should automatically refresh the grid as datasource value data has been changed but it's not happening.

[Sujith Kumar Rajkumar]

Hi Neha, 

Thanks for the update. 

We could understand that you are updating the Grid data source on search API call success but since we are not sure how you have updated the Grid data and if or not you have refreshed the Grid after update, we are unable to validate on this case properly in your scenario. So please share us the Grid code file as requested in our previous update to check how you have performed these operations from our end so that we can validate based on that and provide the solution for it. 

Let us know if you have any concerns. 

Regards, 

Sujith R 

[Neha Singh]

Hello Sujith,

@ViewChild("grid") 

  public gridObj: GridComponent;  

After declaring grid component like this, TSLINT requires initialisation.

HTML : 

     <ejs-grid

      #grid

      [dataSource]="data"

      [allowPaging]="true"

      [allowSorting]="true"

      [allowFiltering]="true"

      [filterSettings]="filterSettings"

      [pageSettings]="initialPage"

    >

TS: 

this.updateGrid(sampleData); is being called once I receive data from api.

updateGrid(data: any): void {

    this.data = data;

    this.data.forEach(

      (element: {

        alertStatusMappings: { timestamp: moment.MomentInput }[];

        deviceTimestamp: moment.MomentInput;

        alertType: string;

      }) => {

        element.alertStatusMappings.forEach(

          (ele: { timestamp: moment.MomentInput }) => {

            if (ele.timestamp) {

              ele.timestamp = moment(ele?.timestamp).format(

                'YYYY-MM-DD HH:MM:SS'

              );

            }

          }

        );

        element.deviceTimestamp = moment(element.deviceTimestamp).format(

          'YYYY-MM-DD HH:MM:SS'

        );

      }

    );

  }

Regards

Neha

[Sujith Kumar Rajkumar]

Hi Neha, 

 

We could understand from the provided information that you performing Grid actions by using API call to fetch data from your server and then trying to update the returned data to the Grid. The Grid has support for custom data-binding which you can use to handle the data for all the Grid actions with your service. 

 

For every Grid action(Filter, Page, Search etc.,), the dataStateChange event will be triggered, and in that event arguments the corresponding details(skip, take, filter field, value,  

sort direction, etc.,) based on the Grid action will be returned. You can use these queries to perform the action in your service and return the data as a result(JSON data source) and count(Total data count) object. Similarly while performing the CRUD action in the Grid the ‘dataSourceChanged’ event will be triggered with the action details. 

 

More details on this can be checked in the below help and online demo sample links, 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/observables/#observables  

 

Demo sample: https://ej2.syncfusion.com/angular/demos/#/material/grid/async-pipe  

 

API links: https://ej2.syncfusion.com/angular/documentation/api/grid/#datastatechange  

                  https://ej2.syncfusion.com/angular/documentation/api/grid/#datasourcechanged  

                  https://ej2.syncfusion.com/angular/documentation/api/grid/#datasource  

 

Note:  The ‘dataStateChange’ event will not be triggered on Grid initial render. So for this case you need to return the data in the above mentioned format on initialization and assign it to the Grid’s dataSource property. 

 

If we misunderstood your query or if you require any further assistance, then please get back to us. 

 

Regards, 

Sujith R