how to avoid recreating the grid everytime that datasource changes,

[Afshin]

Hi,

We have few questions about using the Grid component, I would appreciate your advice on them.

Here are the details:

1- How to select a specific row automatically after changing the data source in the grid? According to the documentation, this can only be done using the selectedRowIndex the first time the component is rendered, so we have to re-create the component every time the data source changes. Is there a better solution to this?

2-How to focus on the next column of the current row in edit mode by pressing the Enter key and focus on the first column of the next row if it is the last column?

3-According to the below link in the documentation, to provide DropDown in a table cell with a specific data source, we must follow the link. However, due to the sample code that is attached, we encounter the problem that the photo was taken and placed in the link, and DropDown does not display any data and Spinner is displayed on it.Please find attached the details in 3.zip

https://ej2.syncfusion.com/react/documentation/grid/how-to/provide-custom-data-source-and-enabling-filtering-to-drop-down-list/

4- According to the sample code in the documentation ( https://ej2.syncfusion.com/react/documentation/grid/edit/ ) , we intend to use the template in editing mode, but we encounter the problem that the image is attached and the Grid component is not rendered.Please find attached the details in 4.zip

Thanks in advance

Attachment: Bug_446cbbc4.zip

[Sujith Kumar Rajkumar]

Hi Afshin, 

 

Greetings from Syncfusion support. 

 

Please find the response for your queries below, 

 

Query – 1: “How to select a specific row automatically after changing the data source in the grid?” 

 

You can use the Grid’s selectRow and selectRows method to select single/multiple rows(using its index) respectively in the Grid as demonstrated in the below code snippet, 

 

// Selects the first row index in the Grid 

this.gridObj.selectRow(1); 

// Selects the first and third row indexes in the Grid 

this.gridObj.selectRows([1, 3); 

 

API links: https://ej2.syncfusion.com/react/documentation/api/grid/#selectrow 

                  https://ej2.syncfusion.com/react/documentation/api/grid/#selectrows 

 

Query – 2: “How to focus on the next column of the current row in edit mode by pressing the Enter key and focus on the first column of the next row if it is the last column?” 

 

By default, the enter key performs the save/update action when pressed from a edit cell and the tab, shift + tab keys are used for moving to the next and previous edit cells. If you need to achieve you requirement, the default enter key save action needs to be overridden with your mentioned action. So can you please confirm if this is what you are trying to achieve based on which we will provide the further details. 

 

And regarding this – “focus on the first column of the next row if it is the last column?”, please confirm us the following information to understand this requirement better, 

 

• On moving the edit state to the next row do you wish to save the previous row edited data or discard it?
• Have you used pagination in the Grid. If so, when the edit reaches the last cell of the last row in the current page, do you need to just save the edit state of the last row or save it and move the edit state to the first row in the next page?

 

Also if you need to inform us any other details regarding this requirement, then please let us know. 

 

Query – 3: “According to the below link in the documentation, to provide DropDown in a table cell with a specific data source, we must follow the link. However, due to the sample code that is attached, we encounter the problem that the photo was taken and placed in the link, and DropDown does not display any data and Spinner is displayed on it” 

 

We checked this problem but unfortunately were unable to reproduce it from our end as the edit dropdown was rendered properly with the custom data. You can check the below sample for your reference, 

 

Sample: https://stackblitz.com/edit/react-nswcwb?file=index.js 

 

We suspect that you might be facing the problem due to duplicate packages installed in ‘@syncfusion’ folder of ‘node_modules’ in your application. So please follow the steps provided below to remove it(if any),  

 

• Delete package.lock.json file from your application.  
• Remove the @syncfusion package folder from the node_modules.
• Use same version or “*”(Installs the latest packages) for all Syncfusion components in package.json file.  
• Then install the NPM packages.  

           

If problem still persists after performing the above actions, then please share us the following information to validate further on this, 

 

• Is this case reproduced in the sample we had shared above? If so can you please let us know the replication steps for the same.
• Video demonstration of the problem to understand it better.
• If possible share us a simple sample to replicate the problem or try reproducing it in the above provided sample. It would be helpful to identify your problem case better and provide the proper solution based on that.

 

Query – 4: “According to the sample code in the documentation, we intend to use the template in editing mode, but we encounter the problem that the image is attached and the Grid component is not rendered” 

 

The mentioned problem “str.match is not a function” that you are facing occurs if duplicate packages are installed in your application. So please follow the steps mentioned in the previous query response to resolve this problem. 

 

Regards, 

Sujith R