Kendo ui 剑道用户界面网格使用客户端模板进行编辑-Razor视图

我正在使用剑道网格2014年第2季度，我想在单元格编辑模式下使用客户端模板。但它并不像我想要的那样工作。我需要点击该单元格才能进入编辑模式。 这是我的表格

@(Html.Kendo().Grid<AdminProject.Common.ViewModels.ProjectActivityViewModel>()
                  .Name("gridName")
                  .Columns(columns =>
                  {
                      columns.Bound(d => d.ResourceName);
                      columns.Bound(d => d.TotalHours).Title("Total Hours").Width(150).ClientFooterTemplate("Sum: #=sum#");
                      columns.Bound(d => d.TotalCost).Title("Total Cost").Format("{0:c0}").Width(150).ClientFooterTemplate("Sum: #= kendo.toString(sum, 'c0')#");
                      columns.Bound(d => d.Hours)
                          .ClientTemplate(Html.Kendo().TextBox().Name("NewHours").ToClientTemplate().ToHtmlString());


                  })
                  .Editable(editable => editable.Mode(GridEditMode.InCell))
                  .ToolBar(toolbar =>
                  {
                      toolbar.Save(); // The "save" command saves the changed data items
                  })
                 .Pageable(pageable => pageable
                        .Refresh(true)
                        .PageSizes(true)
                        .ButtonCount(5)
                        )
                .Sortable()
                .Events(e => e.Edit("onEdit"))
                .AutoBind(true)
                .DataSource(dataSource => dataSource
                .Ajax()
                .Batch(true)
                .PageSize(10)
                        .Aggregates(aggregates =>
                            {
                                aggregates.Add(p => p.TotalHours).Sum();
                                aggregates.Add(p => p.TotalCost).Sum();
                            })
                .Events(events => { events.Error("error_handler").Sync("sync_handler"); })
                .ServerOperation(true)
                .Model(model =>
                {
                    model.Id(product => product.ResourceId); // Specify the property which is the unique identifier of the model
                    model.Field(product => product.TotalHours).Editable(false);
                    model.Field(product => product.TotalCost).Editable(false);
                    model.Field(product => product.ResourceName).Editable(false);
                })
                .Read(read => read.Action(AdminProject.Common.Constants.ActionNames.GetDetail, AdminProject.Common.Constants.ControllerNames.Project).Data("additionalData"))
                .Update(update => update.Action(AdminProject.Common.Constants.ActionNames.UpdateActivity, AdminProject.Common.Constants.ControllerNames.Project).Data("additionalData2"))
                        .Sort(sort => sort.Add(s => s.ResourceId).Ascending())
                        ))

对不起，我无法发布照片，因此我将其上载到另一个主机

以前

在

之后，看看这个例子

这是剑道ui脚本，您可以使用它代替mvc包装器

var _roleDataSource = new kendo.data.DataSource({
    data: [
        { id: 1, title: "Software Engineer" },
        { id: 2, title: "Quality Assurance Engineer" },
        { id: 3, title: "Team Lead" }
    ]
});

var _peopleDataSource = new kendo.data.DataSource({
    data: [
        { id: 1, name: "John", roleId: 1, roleTitle: "Software Engineer" },
        { id: 2, name: "Dave", roleId: 2, roleTitle: "Quality Assurance Engineer" },
        { id: 3, name: "Aaron", roleId: 3, roleTitle: "Team Lead" }
    ]
});

var _grid = $("#grid").kendoGrid({
    dataSource: _peopleDataSource,
    columns: [
        {
            field: "name",
            title: "Name"
        },{
            field: "roleTitle",
            title: "Role",
            editor: function(container, options) {
                $("<input data-bind='value:roleTitle' />")
                  //  .attr("id", "ddl_roleTitle")
                    .appendTo(container)
                    .kendoDropDownList({
                        dataSource: _roleDataSource,
                        dataTextField: "title",
                        dataValueField: "title",
                        template: "<span data-id='${data.id}'>${data.title}</span>",
                        select: function(e) {
                            var id = e.item.find("span").attr("data-id");
                            var person =_grid.dataItem($(e.sender.element).closest("tr"));
                            person.roleId = id;

                            setTimeout(function() {
                                $("#log")
                                    .prepend($("<div/>")
                                        .text(
                                            JSON.stringify(_grid.dataSource.data().toJSON())
                                         ).append("<br/><br/>")
                                    );
                                });
                        }
                    });
            }
        }
    ],
    editable: true
}).data("kendoGrid");

希望这有帮助

问候

---

vinit

您可以通过

var grid = $('#gridName').data('kendoGrid');
grid.editCell(grid.tbody.find('tr:eq(0) td:last'));

请参考这把小提琴：

注:

---

请不要将此调用放入编辑事件处理程序中，因为它将再次触发编辑事件。请参见

对不起，我不能理解你的意思，意思是你非常想要的？你想单击单元格，只有单击的单元格将处于可编辑模式，或者整个列的显示（如图所示）所有单元格都将可编辑？对不起，我没有解释清楚。我的情况是：我想在展示前将网格更新为图片。但当我在中输入值并单击“保存”时，它不起作用。我必须双击“小时”单元格，当它在之后的图片中显示时，这意味着该单元格处于编辑模式。所以“保存”按钮会起作用。我想要的只是一个小的编辑文本框，就像之前的图片一样，当网格加载时，它会从一开始就显示出来。用户在输入数据时不希望单击或双击每一行。谢谢Vap，但在您的示例中，用户仍然需要单击来编辑单元格值。当网格初始化时，是否仍有打开所有可编辑单元格的方法？有两种方法1您需要将编辑按钮与内联编辑一起放置，这意味着当您单击编辑按钮时，所有字段都处于编辑模式。2在这里，您需要在网格初始化时编写自定义javascript函数，并传递网格的列名，然后手动对字段进行编辑。尝试读取根据我的建议，尝试在单元格单击事件上调用编辑函数way 1，这样可以保留新值并更新数据。