Inline Editing and datepicker issue

Question

I am creating a Razor Page using the SyncFusion Datagrid control and DatePicker Datepicker is added as part of a form @section Scripts{ }Issue 1: When the user selects a date from the dropdown, the value is not assigned to the @Model.availableDate_Selected . Please help identify when the value is accessible from the code (.cs page)@{ List

Sujith Kumar Rajkumar · Answer

Hi Segal, 
 
Greetings from Syncfusion support. 
 
Please find the response for your queries below, 
 
Query – 1: “When the user selects a date from the dropdown, the value is not assigned to the  @Model.availableDate_Selected . Please help identify when the value is accessible from the code (.cs page)” 
 
We are currently validating this query from our end and we will provide the further details on or before 27th January 2022. 
 
Until then your patience is appreciated. 
 
Query – 2: “Please advise how using c# can I write the method in the .cs page on razor page when the "save" button is clicked?” 
 
When the Grid save button is clicked the following events – actionBegin, actionComplete will be triggered in the client side which need to be defined in the cshtml page. So if you need to access the .cs page method there you can use ajax call to achieve the same. 
 
This is demonstrated in the below code snippet where the EJ2 base’s ajax method is used to call the required controller action method(from grid’s actionBegin event on save) in razor page, 
 





// Grid’s actionBegin event handler 
function actionBegin(args) { 
    if (args.requestType === 'save') { 
        console.log("Save action is getting executed"); 
        var newData = args.data; 
        var ajax = new ej.base.Ajax({ 
            url: "Index?handler=CustomActionCall", 
            type: "POST", 
            beforeSend: function (xhr) { 
                xhr.httpRequest.setRequestHeader("XSRF-TOKEN", $('input:hidden[name="__RequestVerificationToken"]').val()); 
            }, 
            contentType: "application/json; charset=utf-8", 
            // Current row data is sent in ajax request 
            data: JSON.stringify({ value: newData }), 
        }); 
        ajax.onSuccess = result => { 
            // Success handler 
        } 
        ajax.send(); 
    } 
}  
 
Controller 





public JsonResult OnPostCustomActionCall([FromBody]CustomAction dataValue) 
{ 
    var rowData = dataValue; 
    return new JsonResult(dataValue); 
} 
 
public class CustomAction 
{ 
    public OrdersDetails value { get; set; } 
}  
 
Please find the below sample prepared based on this for your reference, 
 
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/GridRazorMethodCallOnSave-1607596282  
 
Regards, 
Sujith R

Sujith Kumar Rajkumar · Answer

Hi Segal, 
 
Thanks for your patience. 
 
We suspect that the BindProperty filter might not be added to the availableDate_Selected property in the PageModel causing the reported problem. 
 
This is demonstrated in the below code snippet and sample for your reference, 
 




[BindProperty]  
public DateTime? availableDate_Selected { get; set; }  
 
Sample: https://www.syncfusion.com/downloads/support/forum/172207/ze/RazorPages1277135411 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R

Sejal Sheth · Answer

Thank you for your feedback.I was able to get the availableDate_Selected property working. I am still struggling with the CRUD operation. The page where I am implementing this grid is under Identity/Account/Manage/CapacityManagement .cshtml

@**@

The issue is that when the "Update" button is clicked on the grid, the method is not executed. Checking the developers tools shows response code of 400 on the post method. Methods for the Post:public JsonResult OnPostDataSource([FromBody] Model dm) { //availableDate_Selected = null; var capacityList = GetValue(); int count = capacityList.Cast< Model >().Count(); return new JsonResult(new { capacityList, count }); } public JsonResult OnPostInsert([FromBody] CRUDModel< Model > value) { return new JsonResult(value.value); }Please advise how I can resolve the 400 error on the post method call. Thank you

Sujith Kumar Rajkumar · Answer

Hi Sejal,

From the shared code snippet we could see that you have set the update url property value as – “CapacityManagement?handler=Update” but the update method name is defined as – “OnPostInsert”. So please modify the update url property with the proper value as – “CapacityManagement?handler=Insert” to resolve the problem.

Let us know if you have any concerns.

Regards,

Sujith R

Sejal Sheth · Answer

Thank you for your reply Sujith.That was my error in what I posted on the forrum. Below is my datagrid

@**@

And here is the code behindpublic JsonResult OnPostUpdate([FromBody] CRUDModel value) // triggers when editing action is done{ CapacityViewModel updateRecord = value.value; bool isSucess = CapacityMethods.PostCapacityUsed(updateRecord.CapacityID, LoginViewModel.UserName, updateRecord.EquipmentUsed, updateRecord.UsedComments); return new JsonResult(value.value); }The update method is not called at all when the update button is clicked. Thank you

Rajapandiyan Settu · Answer

Hi Sejal, 

Greetings from Syncfusion support. 

We are tried to reproduce the reported behavior with the provided code example, but it was unsuccessful at our end. Find the below sample for your reference. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/razor_pages_grid_remotesave-1263575309.zip 

Kindly share the below details to validate further. 


Bind the actionFailure event in Grid and let us know if you face any exceptions or errors in that event. 
 





    function actionFailure(args) { 
        console.log(args); 
    } 



Share the Grid script version and program.cs file.
Share the video demo and screenshot of the reported problem .
If possible share a simple issue reproducible sample which will be very helpful to provide a solution at earlier.

Regards, 
Rajapandiyan S