1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Editing Grid using batch save get an issue on date values

Editing Grid using batch save get an issue on date values

Hi,

I'm experiencing an issue when receive date values on razor page. The date values is set to null.

The Razor Page Grid control receive this:
 "dataSource": ejs.data.DataUtil.parse.isJson([
  {
    "Id": 8,
    "SalesOrderId": 5,
    "ProductId": 48,
    "AccountId": 10,
    "ProductType": "Product",
    "ProductName": "MOBILE",
    "ProductNumber": "IPLPF-003",
    "Price": 10.00,
    "Quantity": 50.00,
    "Tax": 0.00,
    "Total": 500.0000,
    "IsKit": false,
    "WarehousePending": 50.00,
    "WarehouseEntry": 0.0,
    "Lot": "S/L",
    "Expiration": "2023-06-18T10:18:51.9515064+02:00"
  }
The date values on Grid shows correctly.

From Browser, beforeBatchSave event send by AJAX Post this values:
  1. id:
    5
  2. selected[0][Id]:
    8
  3. selected[0][SalesOrderId]:
    5
  4. selected[0][ProductId]:
    48
  5. selected[0][AccountId]:
    10
  6. selected[0][ProductType]:
    Product
  7. selected[0][ProductName]:
    MOBILE
  8. selected[0][ProductNumber]:
    IPLPF-003
  9. selected[0][Price]:
    10
  10. selected[0][Quantity]:
    50
  11. selected[0][Tax]:
    0
  12. selected[0][Total]:
    500
  13. selected[0][IsKit]:
    false
  14. selected[0][WarehousePending]:
    50
  15. selected[0][WarehouseEntry]:
    55
  16. selected[0][Lot]:
    S/L
  17. selected[0][Expiration]:
    Sun Jun 18 2023 10:18:51 GMT+0200 (hora de verano de Europa central)
But on post razor method, It receive all data correct, but Expiration field which is null.
I think that date format in JSON is incorrect, but I don't know how to change it.

Any idea?


5 Replies 1 reply marked as answer
JC Joseph Christ Nithin Issack Syncfusion Team June 22, 2021 11:35 AM UTC

Hi Jesús Mostajo, 
  
Greetings from Syncfusion support. 
  
Based on your query you are receiving the date values as null on post razor method. By default, in EJ2 Grid the data type of the date columns should be in date object and when you define it as a date object then only we can able to perform grid operations like sorting, filtering etc., if it is defined as a string, and you will not be able to perform grid actions.  
 
So, we suggest you use ` DateTime ` data type for date columns. To find out the root cause, we would like you to ensure the following in your sample. 
  
1. Have you bound the date value properly in the Model class like the below screenshot 

 
2. Share the data type that you have defined in Data Model. 
 
3. Share the complete Grid rendering code. 
 
4. Share the screenshot or video demonstration of an issue. 
  
  
Please refer the sample and revert for more queries. 
  
  
Regards, 
Joseph I 


JM Jesús Mostajo June 22, 2021 03:39 PM UTC

Hi Joseph,

Sorry but Still not working. Note I'm using Spanish locale. My model class:

public class OrderLineViewModel

{

public int Id { get; set; }

public int SalesOrderId { get; set; }

public string ProductName { get; set; }

public string ProductNumber { get; set; }

public decimal Price { get; set; }

public DateTime? Expiration { get; set; }

}

This is grid rendering code:

<script>new ejs.grids.Grid({ "allowExcelExport": true, "allowFiltering": true, "allowPaging": true, "allowSorting": true, "allowTextWrap": true, "columns": [ { "allowEditing": false, "field": "ProductName", "headerText": "Nombre", "maxWidth": "400", "minWidth": "300", "width": "350" }, { "allowEditing": false, "field": "IsKit", "headerText": "Kit", "maxWidth": "75", "minWidth": "50", "template": "#isKitTemplate", "width": "75" }, { "allowEditing": false, "field": "ProductType", "headerText": "Tipo", "maxWidth": "175", "minWidth": "125", "width": "150" }, { "allowEditing": false, "field": "ProductNumber", "headerText": "#", "maxWidth": "125", "minWidth": "75", "width": "100" }, { "allowEditing": false, "field": "Price", "format": "C2", "headerText": "Precio €", "hideAtMedia": "(min-width: 1200px)", "maxWidth": "150", "minWidth": "100", "width": "125" }, { "allowEditing": false, "field": "Quantity", "headerText": "Cantidad", "hideAtMedia": "(min-width: 1200px)", "maxWidth": "125", "minWidth": "75", "width": "100" }, { "allowEditing": false, "field": "WarehousePending", "headerText": "Pendiente de entrada", "hideAtMedia": "(min-width: 1200px)", "maxWidth": "125", "minWidth": "75", "width": "100" }, { "field": "Lot", "headerText": "Lote", "maxWidth": "125", "minWidth": "75", "width": "100" }, { "customFormat": { "type": "date", "format": "dd/MM/yyyy" }, "editType": "datepickeredit", "field": "Expiration", "headerText": "Caducidad", "hideAtMedia": "(min-width: 1200px)", "maxWidth": "150", "minWidth": "100", "type": "date", "width": "100" }, { "editType": "numericedit", "field": "WarehouseEntry", "format": "N", "headerText": "Entrada", "hideAtMedia": "(min-width: 1200px)", "maxWidth": "125", "minWidth": "75", "width": "100" } ], "dataSource": ejs.data.DataUtil.parse.isJson([ { "Id": 10, "SalesOrderId": 6, "ProductId": 51, "AccountId": 10, "ProductType": "Producto", "ProductName": "VITAMINAS CAPIVANCE", "ProductNumber": "IPLPF-006", "Price": 25.00, "Quantity": 50.00, "Tax": 0.00, "Total": 1250.0000, "IsKit": false, "WarehousePending": 50.00, "WarehouseEntry": 0.0, "Lot": "S/L", "Expiration": "2023-06-22T17:38:38.4157855+02:00" } ]), "editSettings": { "allowEditing": true, "mode": "Batch" }, "filterSettings": { "immediateModeDelay": 1500.0, "type": "Excel" }, "frozenColumns": 0.0, "frozenRows": 0.0, "locale": "es", "pageSettings": { "currentPage": 1.0, "pageCount": 8.0, "pageSize": 20.0 }, "searchSettings": { "fields": [ "Vendor", "ProductNumber", "Name", "Type" ] }, "selectedRowIndex": -1.0, "showColumnChooser": true, "toolbar": [ "ExcelExport", "Search", "ColumnChooser", "Update" ], "beforeBatchSave": saveBatch, "excelExportComplete": excelExportComplete, "queryCellInfo": customiseCell, "toolbarClick": toolbarClick }).appendTo("#Grid");

Javascript saveBatch function:

function saveBatch(args) {

            var data = args.batchChanges.changedRecords;

            var id = @Model.Order.Id;

            var token = $('input:hidden[name="__RequestVerificationToken"]').val();

            $.ajax({

                type: "POST",

                url: "/WarehouseOrderLine/Create?handler=Selected",

                beforeSend: function (xhr) {

                    xhr.setRequestHeader("XSRF-TOKEN",

                        $('input:hidden[name="__RequestVerificationToken"]').val());

                },

                data: { id: id, selected: data, __RequestVerificationToken: token },  //Pass the selected row index value to server side

                success: function (response) {

                    window.location.rel='nofollow' href = '/WarehouseOrderLine/Create/?id=' + id;

                },

                failure: function (response) {

                    alert(response);

                }

            });

        }


This is the JSON Post Data after grid saving where Expiration field is not converted to DateTime type on post page handler:

public async Task OnPostSelected(OrderLineSelectedData dm, int id)

  1. id:
    6
  2. selected[0][Id]:
    10
  3. selected[0][SalesOrderId]:
    6
  4. selected[0][ProductId]:
    51
  5. selected[0][AccountId]:
    10
  6. selected[0][ProductType]:
    Producto
  7. selected[0][ProductName]:
    VITAMINAS CAPIVANCE
  8. selected[0][ProductNumber]:
    IPLPF-006
  9. selected[0][Price]:
    25
  10. selected[0][Quantity]:
    50
  11. selected[0][Tax]:
    0
  12. selected[0][Total]:
    1250
  13. selected[0][IsKit]:
    false
  14. selected[0][WarehousePending]:
    50
  15. selected[0][WarehouseEntry]:
    4
  16. selected[0][Lot]:
    S/L
  17. selected[0][Expiration]:
    Thu Jun 22 2023 16:10:51 GMT+0200 (hora de verano de Europa central)
  18. __RequestVerificationToken:
    CfDJ8IHl_r2sgwdLjPmSbTQYuA-AN9Vn__-gYG-GlEll6Msf8b20ukMZ1vTPSjh3PynU4_7nGuz9XZbEk_1CfY9XwXmOSmnpLMnYhQ59heqG8ls0ezUgs36r8Ib625dw3-Vs_7-WKpNtzJecO6KvdlqEjZOxS6IKSvhhM6mEI66y5_4vBANNiIXfzfw__LuC2fEwGQ




JC Joseph Christ Nithin Issack Syncfusion Team June 25, 2021 12:08 PM UTC

Hi Jesús Mostajo, 
  
Thanks for the update. 
  
Based on your query you are receiving the date values as null on post razor method. We checked the code example and we have created an sample but we were not able to reproduce the reported issue. I have also attached the screenshots captured while debugging and the output below. 
  
Ajax Request: 
 
  
Post Razor Method: 
 
  
  
Output on Ajax Success: 
 
  
  
Please refer the attached sample. If we have misunderstood your requirement, please provide the following details. 
  
  • Try to reproduce the mentioned issue in the attached sample.
  • Replication procedure for the mentioned issue.
  
Regards, 
Joseph I. 


Marked as answer
JM Jesús Mostajo June 28, 2021 09:57 AM UTC

Thanks for your update.

It's has been useful, now it's working fine.


The key has been the use in AJAX call with this parameters that I was not using:


datatype: "text",

contentType: "application/json; charset=utf-8",

data: JSON.stringify(rowsDetails)


Thanks


BS Balaji Sekar Syncfusion Team June 29, 2021 06:22 AM UTC

Hi Jesús Mostajo, 

We happy  to hear that reported query has been resolved. 

Please get back to us, if you need further assistance. 

Regards, 
Balaji Sekar. 


Loader.
Up arrow icon