No Records to Display when Foreign Key data source is updated

[Aaron Hoang]

Hello,

I'm trying to fetch data for a foreign key column after the data loads for a grid page because I need data from the page to know what keys to translate. However, when I have the data to update with and make a change to the column's data source and refresh the grid, the table immediately stops showing data and tells me "No Records to Display", but I see the number of items that were fetched by the DataManager. Is this a bug and is there a workaround?

[Rajapandiyan Settu]

Hi Aaron, 

 

Greetings from Syncfusion support. 

 

Based on your requirement, you need to bind the foreignKey dataSource after the data loaded in the Grid. We have prepared a sample based on this in which we loaded the foreignKey dataSource in the button click, refer to the below sample. 

 

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

 

Please ensure the following cases at your end. 

 

• The foreignKey column should have empty dataSource in the Grid if you want to dynamically change/load the foreignKey dataSource.

                               

 <ColumnDirective 

                field="CustomerID" 

                dataSource={[]} 

                headerText="Customer Name" 

                width="150" 

                validationRules={this.validationRules} 

                foreignKeyValue="ContactName" 

                foreignKeyField="CustomerID" 

              /> 

 

• The grid columns must be refreshed after changing the foreignKey dataSource in the Grid.

 

  btnclick(args) { 

    this.gridInstance.getColumnByField("CustomerID").dataSource = customerData; 

    this.gridInstance.columns = this.gridInstance.columns; 

    this.gridInstance.refreshColumns(); 

  } 

 

Still, if you facing the same issue, please share the below details at our end.  

 

1. Share the full Grid rendering code.
2. Share the package.json file.
3. If possible, share the issue reproduced sample or make the issue in the given sample.

 

Regards, 

Rajapandiyan S 

[Aaron Hoang]

grid.refreshColumns() was what I was missing, thanks, my code works as expected now!

[Rajapandiyan Settu]

Hi Aaron, 

 

We are glad that the provided solution resolved your requirement. 

 

Regards, 

Rajapandiyan S 

[Julien Hoffmann]

Hello,

In the sample you provide ( Sample: https://stackblitz.com/edit/react-tu9knk-vxtyqe?file=index.js  ) , the list of Customer Names is not provided in the DropDownList, as you can see in this screen shot:

I have a similar issue (using Vue js), could you advise on what to do to have the DropDownList populated ?

Thanks

Julien

[Rajapandiyan Settu]

Hi Julien, 

 

Thanks for contacting Syncfusion support. 

 

Query: the list of Customer Names is not provided in the DropDownList 

We have validated the reported behavior at our end. You can resolve this by including following code. 

[index.js] 

 

  btnclick(args) { 

    var ForeignKeyColumn = this.gridInstance.getColumnByField('CustomerID'); 

    ForeignKeyColumn.dataSource = customerData; // bind the dynamic foreignKey dataSource to column 

    ForeignKeyColumn.edit.params.dataSource = customerData; // bind the dynamic foreignKey dataSource to the edit params 

    this.gridInstance.refreshColumns(); 

  } 

 

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

 

Please get back to us if you need further assistance with this. 

 

Regards, 

Rajapandiyan S 

[Julien Hoffmann]

This is solved thx a lot.

Btw, my initial issue was on Vue js, so I copy/paste here part of code which works:

this.$refs.theGrid.getColumnByField('constituentId').dataSource = ds
this.$refs.theGrid.getColumnByField('constituentId').edit.params.dataSource = ds
this.$refs.theGrid.refreshColumns()

[Rajapandiyan Settu]

Hi Julien, 

 

We are glad that you have achieved your requirement with the provided solution. 

 

Please get back to us if you need further assistance with this. 

 

Regards, 

Rajapandiyan S