Javascript ej2 Grid in batch mode

[Edmund Herbert]

Hi Guys I have been struggling with a JavaScript grid using batch mode update for last 4 days an cannot get it to work:

I need example asp net core 8 JavaScript example that works, my requirement is as follows:

• Grid has fields with normal inputs say order number and total price, I need 2 drop down list boxes one named Vat with   values 15 - 20.
• Second drop down list box named RemittanceValue  with values 1-10

I tried to use these two list boxes and found that if both included then first one worked, could select values from list, second did not show drop down list, if I removed second drop down list box then first one worked, so I removed one list box the remaining one I could select value but could not add any  data to the other fields.

I removed drop down list box and then I could add edit other fields, this has been driving me nuts,

The Last think I tried to do was batch Save to my EF controller,  back end that also did not work error 400 and error 414.

Your help will be most appreciated



 

[Edmund Herbert]

Another observation is in batch mode if there are no records in data source then all fields show [object,object] a empty dummy record must first be added

[Aishwarya Rameshbabu]

Hi Edmund Herbert,

Greetings from Syncfusion support.

After reviewing your shared information, we have noticed that you are encountering issues with using ‘Batch’ mode of editing with Syncfusion Grid.

Query 1: I need example asp net core 8 JavaScript example that works with my requirement.

In accordance with the provided requirements, we have developed a sample JavaScript application using ASP .Net Core 8. This example includes a grid featuring two fields: ‘Order Number’ and ‘Total Price’, both with standard input types. Additionally, it incorporates two DropDownLists: 'VAT' with values ranging from 15 to 20, and 'RemittanceValue' with values ranging from 1 to 10. This setup ensures that both DropDownLists can be utilized simultaneously in the Grid. For further details, please refer to the code example, attached sample and video demonstration.

Index.js

 

var data = new ej.data.DataManager({

    url: 'http://localhost:5000/api/Grid',

    batchUrl: 'http://localhost:5000/api/Grid/BatchUpdate',

    adaptor: new ej.data.UrlAdaptor()

});

var grid = new ej.grids.Grid({

    dataSource: data,

    allowSorting: true,

    toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search'],

    editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' },

    columns: [

        { field: 'OrderID', headerText: 'Order number ', textAlign: 'Right', width: 120, isPrimaryKey: true, type: 'number' },

        { field: 'Freight', headerText: 'Total price',width: 140, type: 'number'  },

        {

            field: 'CustomerID', headerText: 'Vat', editType: 'dropdownedit', width: 120, type: 'number'

        },

        {

            field: 'EmployeeID', headerText: 'RemittanceValue', editType: 'dropdownedit', width: 120, type: 'number'

        }

    ],

});

grid.appendTo('#Grid');  

 

Sample and Vide Demonstration: Please find in the attachment.

              

Query 2: Another observation is in batch mode if there are no records in data source then all fields show [object,object] a empty dummy record must first be added.

In response to the above query, you wanted to display a dummy record when the dataSource bound to the Grid contains no data. It is advisable to define the type of the columns, which will allow the Grid to show a default value based on the column type, rather than displaying [object, object]. Kindly refer to the GIF image attached and the above code example for further clarification.

If you continue to experience any issues, kindly provide a simple replication sample or attempt to replicate the issue using the provided sample for further validation. Additionally, please specify the type of data binding employed in the Grid (Remote or Local). If Remote data is utilized, include the adaptor details. Providing a video demonstration of the issue replication along with screenshots highlighting the 400 and 414 errors would also be helpful.

Regards

Aishwarya R

Attachment: 194464SampleAndVideo_e44f5048.zip