Using OData and an edit template I must do Add before edit works.

[Jan Luc ter Heide]

The situation:

• Nextjs 14.0.2
  
• Syncfusion react grid 24.2.7
• Net8.0 OData api

On the page I register the (nl) locale and the licence for Syncfusion, define the DataManager, the editTemplate​ and some settings and return a page with a Grid​.

I set a breakpoint on line 45 in the page to inspect the properties that go into the editTemplate.

• When I Dbl click a row I get an empty editor, props​ has one property, isAdd: false​
  
• When I click Create​ I also get an empty editor but props​ also has the properties of Shipping​, all undefined
• I cancel this editor and dbl click a row, now props has the correct Shipping values and a working editor  opens.

Both adding a record and editing an existing record are handled correctly by the api​

What am I missing here?

Thanks,

Jan Luc.

Attachment: shipping_code_37896e1e.zip

[Johnson Soundararajan S]

Hi Jan Luc ter Heide,

Greetings from the Syncfusion support,

We have reviewed your query and provided a code. We understand that initially, when you double-click to edit the row, the edit template props have no properties except "isAdd: false". We have made an attempt to create a sample for you. On our end, when we double-click to edit the row, the edit template props have all properties correctly populated.

Please refer to the below sample and video demo for more information.

Sample : https://drive.google.com/file/d/1_gMbfDlzTLW44daglwi--HK5kctFKGxv/view?usp=sharing

Video Demo : https://drive.google.com/file/d/16uKsv-_94HWZn-42UY1AEFHwkJgdmTpJ/view?usp=sharing

If you are still encountering the problem, please share a simple replicating sample, or kindly provide us with your attempts to reproduce the reported issue using the attached sample.

Regards,

Johnson Soundararajan S

[Jan Luc ter Heide]

Hi Johnson Soundararajan S ,

I tried to find the differences between your and my solution, but apart from authorization I can not find it.

I will try to create a smaller application to replicate the issue.

I changed your code to app routing (which works fine) and activate globalization but when I call setCurrencyCode or setCulture I get

 ...setCurrencyCode(...)
 ⨯ node_modules\@syncfusion\ej2-base\src\observer.js (95:8) @ Observer.notify
 ⨯ ReferenceError: window is not defined
    at SetSyncfusionLocale (./app/api/syncFusionSettings.ts:38:78)
    at Home (./app/page.tsx:28:81)

The grid still edits correctly, looks nl but the DatePickerComponent does not. It seems that L10n.load works but you can not set the locale for all components. That works fine in my code however.

I will add my project soon.

Regards,

Jan Luc ter Heide.

[Jan Luc ter Heide]

... as promised

Open in Visual Studio, rebuild (which does npm install) and start the api and the app.

The project uses a mock database so should be good to go, see MockDatabase in Repositories.

Attachment: Dashbord_80d500c0.zip

[Santhosh Iruthayaraj]

Hi Jan Luc ter Heide,

We have validated the provided sample and noticed that you have enabled both Paging and Infinite Scrolling. Please note that the Paging and Infinite Scrolling features cannot be used together. Infinite Scrolling is an alternate feature for Paging, where the next set of data is rendered when scrolling. In Paging, the next set of data is rendered based on the Page chosen in the Pager. So we recommend using either one of the features based on your requirement. Please refer to the code snippet below for your reference:

[page.tsx]

 

     <GridComponent

        ref={(g) => { grid = g; }}

        dataSource={data}

        allowGrouping={true}

        allowSorting={true}

        allowFiltering={true}

        // use any one feature Paging and Infinite Scroll

        allowPaging={true} // either this

        // enableInfiniteScrolling={true} // or this

        filterSettings={filterSettings}

        editSettings={editOptions}

        toolbar={toolbarOptions}

        actionComplete={actionComplete}

        actionBegin={actionBegin}

      >

 

Also, make sure you have injected the respective modules for the features you have used in the Grid service to make the feature work properly. In your Grid code, we noticed that you have only added the service for Paging (Page) and the service for Infinite Scrolling (InfiniteScroll) is not injected. Please find the modified code below:

[page.tsx]

 

<Inject services={[Page, Sort, Filter, Group, Edit, Toolbar, InfiniteScroll]} />

 

With these changes, the issue you are facing with the Edit Template data will be resolved.

Regards,

Santhosh I