[Solved] Make the Telerik Grid Client DetailTemplate Editable

[Charlston]

I currently have a Grid that I want the ClientDetailTemplateId to be the editable area for fields that are currently not displayed on the grid. Then have an update button that uses the Datasource function of Update to update that row's values. 

 

@( Html.Kendo().Grid(Model.Members)
                .Name("membersGrid")
                .Columns(columns =>
                {
                              
                        
                    })
                    .AutoBind(true)
                    .HtmlAttributes(new { @class = "table table-hover align-middle faux-k-table" , style =" width: 100%"})
                    .Pageable()
                    .Sortable(false)
                       .ClientDetailTemplateId("DetailGridTemplate")          
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(50)
                                .Events(e =>  e.RequestStart("onRequestStart")
                                             .RequestEnd("onRequestEnd")
                                              )
                        .Read(read => read.Action("GetGroupMembers", "Members").Data("additionalData"))
                    ).NoRecords(n => n.Template(@"<div class=""alert alert-warning"">
                        No data found with selected filter values or there are no eligible members from your MEC to view.
                    </div>"))
                        )


script id="DetailGridTemplate" type="text/kendo-tmpl">

                     
</script>

[Anton Mironov]

Hi Charlston,

Thank you for the code snippet and teh details provided.

In order to edit fields from the same Model, but not represented in the Grid, I would recommend using a PopUp Edit Mode instead of a ClientDetailTemplate.

Here is a demo of a Grid with PopUp Edit Mode:

• https://demos.telerik.com/aspnet-core/grid/editing-popup

The documentation for the PopUp Edit Mode:

• https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/data-management/grid/editing/popup

By default, in the PopUp edit modal window, all the fields of the Model will be available(even the ones not represented as columns in the Grid). If you decide to show only part of the fields, I would recommend using a Template for the PopUp edit modal:

• https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/data-management/grid/editing/popup#custom-popup-editor-template

I hope this information helps.

Kind Regards,
Anton Mironov
Progress Telerik

[Charlston]

Does the data refresh after you save or do you have to do a refresh on the grid after save happens?

[Anton Mironov]

Hi Charlston,

Yes, you are totally correct - the data will refresh automatically when save.

 

Best Regards,
Anton Mironov