Telerik MVC Grid - Inline Edit: Editable fields in ClientDetailTemplate

[Stefan]

Hello,

we want to add editable fields in the template part of a grid.

Our grid looks sth. like this:

@(
    Html.Kendo().Grid(Model.TABLE)
        .Columns(columns =>
        {
            columns.Bound(c => c.PRIO); 
            columns.Bound(c => c.COMMENT);
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            ...
            .Model(m =>
            {
                m.Id(p => p.ID);
            })
        )
        .ClientDetailTemplateId("template")
        .Editable(e => e.Mode(GridEditMode.InCell))
)

The template does look sth. like this:

<script id="template" type="text/x-kendo-template">
    <div class="col-md-6">
        <p><strong>Beschreibung:</strong></p>
        <p>#: stm_bez1 #</p>
        <p>#: stm_bez2 #</p>
        <p>#: stm_bez3 #</p>
        <p>#: stm_bez4 #</p>
        <p>#: stm_bez5 #</p>
        <p>#: stm_bez6 #</p>
        <p>#: rsc_text1 #</p>
        <p>#: rsc_text2 #</p>
        <p>#: rsc_text3 #</p>
        <p>#: rsc_text4 #</p>
        <p>#: rsc_text5 #</p>
        <p>#: rsc_text6 #</p>
    </div>
    @*
        HOW WOULD WE IMPLEMENT THE EDITABLE FIELDS HERE?
    *@
</script>

How would we go about putting these fields in the template part, and have them editable and propagate to the server on save?:

[Eyup]

Hi Stefan,

 

Thank you for writing to us. I hope you are doing well.

Here are the steps you can follow to achieve this requirement:

1. Remove the Model/Local binding of the Grid:

Html.Kendo().Grid(Model.TABLE)

2. For Editing you should use remote binding with predefined model C# class. For example:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()    

And then you can choose from the available editing modes provided by the Grid:

- InCell editing:
https://demos.telerik.com/aspnet-mvc/grid/editing

- InLine editing:
https://demos.telerik.com/aspnet-mvc/grid/editing-inline

- PopUp editing:
https://demos.telerik.com/aspnet-mvc/grid/editing-inline

3. The next step is to define the Detail Template of the Grid. This live sample demonstrates hierarchy, i.e. another grid in the inner level:
https://demos.telerik.com/aspnet-mvc/grid/hierarchy

4. You can replace the content inside the detail template and define full customized form including labels, inputs, combos, etc.:
https://netcorerepl.telerik.com/cxvPlTbE37uc6mUD11

I hope this info helps. Feel free to implement the mentioned steps and let me know about the result.

 

Regards,
Eyup
Progress Telerik