GRID 中的列客户端模板答案

【问题标题】：Column Client Template in GRIDGRID 中的列客户端模板
【发布时间】：2018-05-21 17:42:20
【问题描述】：

我正在将应用程序从 MVC 5 迁移到 Core 2.0。我们正面临网格客户端模板的问题，因为当我们将它与可编辑属性一起使用时，我们无法使用它。以下是代码。

@(Html.Kendo().Grid<PPVR>()
    .Name("PPVRGird")
    .Columns(columns =>
    {
        columns.Bound(e => e.Id).Hidden();
        columns.Bound(c => c.Name);
        columns.Bound(c => c.Quantity);
        columns.Bound(c => c.Type);
        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);
        columns.Bound("").ClientTemplate("<div style='text-align:center'><a href='javascript:void(0)' class='custom-action-button pull-center' onclick='deletePayPerViewRules(#=Id#)'><img src='/Content/trashed.svg' width='40' height='40' /><br />Delete</a></div>").HeaderHtmlAttributes(new { @class = "custom-action-button" }).Width(200);
        })
        .Pageable()
        .HtmlAttributes(new { style = " text-align:left; font-family:lato; font-size:16px; " })
        .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(100)
        .Read(read => read.Action("GetPPVR", "PPV"))
        .Model(model =>
        {
            model.Id(u => u.Id);
            model.Field(u => u.Type).Editable(false);
        })
        .Update(update => update.Action("UpdatePPVR", "PPV")))
        .Editable(editable => editable.Mode(GridEditMode.InLine))
)

这带来了空白页。当我评论行 .Editable(editable => editable.Mode(GridEditMode.InLine)) 页面出现。它在 MVC 5 中运行良好，但在核心 2.0 中运行良好。

请建议我如何实现这一目标。

UPDATE => 只有当我使用内联选项进行编辑时才会出现此问题，而我使用 Pop Up 时它工作正常。

【问题讨论】：

对于我的模板只有列，我使用columns.Template(t => { }).ClientTemplate...。您是否收到控制台错误？两者的剑道版本相同吗？
DLL 的 JavaScript 版本相同我按照 Kendo 网站上推荐的步骤将 Telerik 添加为 nuget 源，然后下载包。我需要的是有额外的列和自定义按钮。
UPDATE => 只有当我在使用弹出窗口时使用内联选项进行编辑时才会出现此问题，然后它工作正常。

标签： asp.net-mvc asp.net-core kendo-ui kendo-grid kendo-asp.net-mvc

【解决方案1】：

好的，经过 2 天的等待，我收到了 Telerik 团队的回复。

一种可能的解决方案是将所需的列绑定到任何字段，并使用 columns.editable 配置来防止对这些列进行编辑。 https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.editable

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;}");

Telerik Team Answer

这对我来说似乎是一种解决方法，但效果很好。

希望这个问题也能节省其他人的时间。

【讨论】：