We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Grid filters foreign key columns and does not update on add/edit

As stated in the title, I am working with a grid with custom edit dialog template,
I have several foreign key fields, when first rendering the grid gets only the values for the fk used in the current page,
when modifying a record and setting one of those fk columns to a value not currently in use the grid does not fetch the new values and I see a blank space.

A workaround I found is refreshing the whole grid after save.

Greetings
Matteo

Attachment: Assembly_6ac2289a.7z

9 Replies

PS Pavithra Subramaniyam Syncfusion Team July 5, 2019 03:27 AM UTC

Hi Matteo, 

Thanks for contacting Syncfusion support. 

we have validated your requirement with the shared scenario. But we are unsuccessful at our end. 
Please find the attachment for your reference. 


To validate further, could you please share the below details, that will help us to provide a better solution as soon as possible. 
  1. Share a exact scenario or proper replication procedure to reproduce the issue,
  2. Share a video demo showing the problem you are facing
  3. Share a basic issue reproducible sample, If possible.

Regards, 
Pavithra S. 



MA Matteo July 5, 2019 12:12 PM UTC

I loaded a test example of the issue, with screenshots.

I created a sample:
https://stackblitz.com/edit/react-qhmawe-odqd16

Assemblies and FrontEndCategories need to be imported via WebApi.

Attachment: SyncfusionFKTicket_80b1cc21.7z


PS Pavithra Subramaniyam Syncfusion Team July 9, 2019 04:01 AM UTC

Hi Matteo, 

Thanks for sharing the sample. 

We have validated your shared sample and found that you have not given foreignKey field and foreignKeyValue for the foreignKey column. Can you please share a proper example  and network tab requests to reproduce the issue. 

So that it will be help us to find the root cause and provide the better solution. 
 
Regards, 
Pavithra S. 



MA Matteo July 9, 2019 06:13 AM UTC

When I load the grid, for the foreign columns, a query like this is made:

http://localhost:8290/api/lines/?$filter=(LineId%20eq%2013)%20or%20(LineId%20eq%202)%20or%20(LineId%20eq%2027)%20or%20(LineId%20eq%201)

The grid loads only the values it needs and doesn't reload the values after I edit a row.

This is the definition of the column:

<ColumnDirective field='LineId' headerText="Line" dataSource={this.LineData} foreignKeyValue='ResourcesItalianText' foreignKeyField='LineId'/>

And this is the definition of the Dropdown inside the custom edit template dialog:

<DropDownListComponent value={this.state.LineId} id="LineId" name="LineId" dataSource={this.LineData} query={this.LineQuery} fields={{ text: 'ResourcesItalianText', value: 'LineId' }} change={this.handleComboChange} />




SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team July 9, 2019 11:48 AM UTC

Hi Matteo, 

We have analyzed your code and screenshots. We suspect that “LineId” (in both Grid and dropDownList datasource) property has the integer value. So when you render your own dropdown for the foreignkey column, then Grid will consider the column type as string(based on the row first column value) so it will send the edited foreignkey column key value as string while we saving the edited data.  
 
We suspect that is case in your application. So we suggest to parse the value before saving them. You can use Grid actionBegin event to parse them

actionBegin(args) { 
        if (args.requestType == "save") { 
            args.data.LineId = parseFloat(args.data.LineId); 
        } 
    } 

If you are still facing any problem please share the following details to analyze the problem at our end. 

  1. Stringified Grid column model as shown below
 
 
Taken an instance of the Grid in the browser console and stringify the columns. Copy the string and give that to us in text file. 
  1. Like columns, collect Grid datasource and attach as a text file.
  2. You can also collect the cause for the issue in the actionFailure event (in case of exception). Copy the message returned in the arguments of the actionFailure event and share it in text file.
  1. Stacktrace of browser console (if any).

Regards, 
Seeni Sakthi Kumar S. 



MA Matteo replied to Seeni Sakthi Kumar Seeni Raj July 9, 2019 01:01 PM UTC

Hi Matteo, 

We have analyzed your code and screenshots. We suspect that “LineId” (in both Grid and dropDownList datasource) property has the integer value. So when you render your own dropdown for the foreignkey column, then Grid will consider the column type as string(based on the row first column value) so it will send the edited foreignkey column key value as string while we saving the edited data.  
 
We suspect that is case in your application. So we suggest to parse the value before saving them. You can use Grid actionBegin event to parse them

actionBegin(args) { 
        if (args.requestType == "save") { 
            args.data.LineId = parseFloat(args.data.LineId); 
        } 
    } 

If you are still facing any problem please share the following details to analyze the problem at our end. 

  1. Stringified Grid column model as shown below
 
 
Taken an instance of the Grid in the browser console and stringify the columns. Copy the string and give that to us in text file. 
  1. Like columns, collect Grid datasource and attach as a text file.
  2. You can also collect the cause for the issue in the actionFailure event (in case of exception). Copy the message returned in the arguments of the actionFailure event and share it in text file.
  1. Stacktrace of browser console (if any).

Regards, 
Seeni Sakthi Kumar S. 


I tried your first solution with no success.
The parsing doesn't help, my webservice doesn't care if it gets a string or an integer and the response of the patch request is always an integer as you can see below:

With Parsing:
AssemblyId: "006164-1"
LineId: 14

Without Parsing:
AssemblyId: "006164-1"
LineId: "14"

Response from my web services in both cases:
AssemblyId: "006164-1"
LineId: 14

As per solutions 2. and 3. Document.getElementById("Grid") returns null.

the only Exceptions I often get are:
  • input.js:88 Uncaught TypeError: Cannot read property 'classList' of undefined
  • focus-strategy.js:44 Uncaught TypeError: Cannot read property 'matrix' of undefined


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team July 10, 2019 11:21 AM UTC

Hi Matteo,  

Thanks for the update.  

To follow the steps 2 & 3, you have to replace the id `Grid` to your Grid’s id in the getElementById method (browser console). So you can collect the column details. Also try to capture the exception message in the actionFailure event. Later, in the network tab, capture the response from the server-end. Please provide the requested details to proceed further on this. 

Regards,  
Seeni Sakthi Kumar S. 



MA Matteo July 10, 2019 01:00 PM UTC

I managed to get the definition.


You can find them attached.

Attachment: SyncfusionFKTicket_d03270e.7z


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team July 11, 2019 11:03 AM UTC

Hi Matteo,  

We have created the support incident under you account. Please visit the following link to check for further updates on the reported issue.  


Regards,  
Seeni Sakthi Kumar S. 


Loader.
Live Chat Icon For mobile
Up arrow icon