Client Template in GRID

[JP]

I am Migrating the app from MVC 5 to Core 2.0. We are facing issue with the grid client template as we are unable to use it when we use it along with the editable property. Following is the code.

01.@(Html.Kendo().Grid<PPVR>()
02.                                                .Name("PPVRGird")
03.                                                .Columns(columns =>
04.                                                {
05.                                                    columns.Bound(e => e.id).Hidden();
06.                                                    columns.Bound(c => c.name);
07.                                                    columns.Bound(c => c.quantity);
08.                                                    columns.Bound(c => c.type);
09.                                                    columns.Bound("").ClientTemplate("<div style='text-align:center'><a href='javascript:void(0)' class='k-grid-edit custom-action-button'onclick='customGridEditClick(this)'><img src='/Content/edit.svg' width ='40' height='40'/><br/>Edit</a></div>").HeaderHtmlAttributes(new { @class = "custom-action-button" }).Title("Edit").Width(150);
10.                                                    columns.Bound("").ClientTemplate("<div style='text-align:center'><a href='javascript:void(0)' class='custom-action-button pull-center' onclick='deleteppvr(#=id#)'><img src='/Content/trashed.svg' width='40' height='40' /><br />Delete</a></div>").HeaderHtmlAttributes(new { @class = "custom-action-button" }).Width(200);
11.                                                })
12.                                                    .Pageable()
13.                                                    .HtmlAttributes(new { style = " text-align:left; font-family:lato; font-zize:16px; " })
14.                                                    .DataSource(dataSource => dataSource
15.                                                    .Ajax()
16.                                                    .PageSize(100)
17.                                                    .Read(read => read.Action("GetPPVR", "PPV"))
18.                                                    .Model(model =>
19.                                                    {
20.                                                        model.Id(u => u.id);
21.                                                        model.Field(u => u.type).Editable(false);
22.                                                    })
23.                                                    .Update(update => update.Action("UpdatePPVR", "PPV"))
24.                                                    )
25.
26..Editable(editable => editable.Mode(GridEditMode.InLine))
27.
28.                                            )
29.
30.

This brings the empty page. When I comment the line .Editable(editable => editable.Mode(GridEditMode.InLine)) page appears. It works well in MVC 5 but not in core 2.0.

Kindly suggest how can I achieve this.

[JP]

Sample Project for replication 

https://drive.google.com/file/d/1QFE9R1xvjHxCDYFA2TsufYFIRR_8CFeq/view?usp=sharing

[JP]

UPDATE => This issue is coming only when I am using Inline option for editing when I use Pop Up then it works fine.

[Preslav]

Hello JP,

A possible solution is to bind the desired columns to any field, and using the columns.editable configuration to prevent editing for these columns. 

• https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.editable

For example:

columns.Bound(p => p.Freight).ClientTemplate("Hi").HeaderHtmlAttributes(new { @class = "custom-action-button" }).Width(200).Editable("function(){return false;}");
columns.Bound(p => p.Freight).ClientTemplate("Bye").HeaderHtmlAttributes(new { @class = "custom-action-button" }).Title("Sample").Width(150).Editable("function(){return false;}");

I hope this helps.


Regards,
Preslav
Progress Telerik