Inline gridview editing not working

[Mandeep]

Hello!

I'm following these docs for inline gridview editing. My situation is a bit different than the doc samples. I've 3 grids on the page and working on adding an inline editing in one of them.  Here's the code for that -

 <form novalidate asp-controller="BusinessLines" asp-action="Update" method="post">
                            @(Html.Kendo().Grid<AJG.Cdi.Core.Models.BusinessLinesModel>()
                                .Name("grid2")                            
                                .Columns(columns =>
                                {
                                    columns.Bound(b => b.CdPolicyLineTypeCode).Title("Line Type").Editable("false");
                                    columns.Bound(b => b.EffectiveDate);
                                    columns.Bound(b => b.ExpirationDate);
                                })
                                .ToolBar(toolBar =>
                                {                              
                                    toolBar.Save();
                                })
                                .Editable(editable => editable.Mode(GridEditMode.InCell))
                                .Pageable()
                                .Sortable()
                                .Scrollable()                            
                                .HtmlAttributes(new { style = "height:200px;" })
                                .DataSource(dataSource => dataSource
                                .Ajax()
                                .Model(model =>
                                {                              
                                    model.Field(p => p.CdPolicyLineTypeCode).Editable(false);
                                })
                                .Update(update => update.Action("Update", "BusinessLines").Type(HttpVerbs.Post))
                                /*.PageSize(5)
                                .Read(read => read.Action("Get", "BusinessLines").Type(HttpVerbs.Get))*/                          
                                ))
                         </form>

 I want the above grid to hit BusinessLines\Update endpoint when pressed on "Save Changes", but it's going to the parent page's Action, which is Submissions\Edit. It's defeating the whole setup that I've put in-place.

If I do not refresh the page, it's throwing the errors listed in the 'error-1.png' attached file, while hitting 'Save Changes'

Also, please let me know - how can I get rid of time in the date field (ref: inline-editing-ui.png)?

[Aleksandar]

Hello Mandeep,

I see you have submitted  the same question as support ticket. I am pasting here the response, for the benefit of the community. I will ask you, in case of further questions, to keep the discussion in a single thread of your choice, so we can keep the information in one place and ensure we do not miss something important.

From the provided details I see the Grid is placed in a form element. Is the desire to submit the entire Grid to set form action method? If so, note that the Grid is not a form element and it cannot be simply posted to the server. If the desire is to submit the grid to a server I can suggest reviewing any of the below ASP.NET MVC examples that demonstrate a possible approach for achieving this. The approach would be the same with ASP.NET Core:

• https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/submit-grid-with-form
• https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/post-grid-with-form

Basically, you can take advantage of the templates functionality the Grid provide and create hidden elements based on the different row models which you desire to be submitted to the server.

I've tried to reproduce the reported errors, but unfortunately to no avail, so I guess I am missing something in the scenario. If the issue is that the the actual update endpoint define in the Grid is not receiving the expected data, than note that only updated records will be submitted, but not the entire data set. In addition, the demo links to the Batch editing example - in this scenario the DataSource should have the Batch() configuration set to true and the endpoint should expect a collection of models.

.DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .PageSize(20)
        .ServerOperation(false)
        .Events(events => events.Error("error_handler"))
        .Model(model => model.Id(p => p.ProductID))
        .Create("Editing_Create", "Grid")
        .Read("Editing_Read", "Grid")
        .Update("Editing_Update", "Grid")
        .Destroy("Editing_Destroy", "Grid")
    )

 

 

 [AcceptVerbs("Post")]
        public ActionResult Editing_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")] IEnumerable<ProductViewModel> products)
        {
            if (products != null && ModelState.IsValid)
            {
                foreach (var product in products)
                {
                    productService.Update(product);
                }
            }

            return Json(products.ToDataSourceResult(request, ModelState));
        }

 

In the linked demo make sure to click on the View Source tab to review the code behind the sample:

Finally, to customize how the date is formatted you can use the .Format() configuration option. Refer to this section of the documentation for additional details on supported formats.

 

columns.Bound(b => b.EffectiveDate).Format("{0: dd MMM yyyy}");

 

If you wish to use a DatePicker but not a DateTimePicker as an editor, follow the guideline on creating a custom editor. Basically, as documented, you will need to decorate the model property with a [UIHint] attribute and define a template containing a DatePicker and make sure it is located in the ~/Viwes/Shared/EditorTemplates folder.

I hope this helps.

Regards,
Aleksandar
Progress Telerik

[Mandeep]

Sorry for the confusion, Aleksandar. I wanted to actually file a ticket but accidentally got it posted here. I left it here as another source of help. I hope that clarifies. Thanks for your response.