Question

我正在使用kendo grid 2014 2014，我想在单元格编辑模式下使用客户端模板。但它不能像我想的那样工作。我需要点击该单元格才能进入编辑模式。这是我的网格。

@(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())
                        ))

抱歉，我无法发布照片，所以我将其上传到其他主机。

在enter link description here之前

enter link description here之后

Answer 1

请查看此http://jsfiddle.net/khNsE/70/示例。

这是kendo 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

Answer 2

您可以通过

强制最后一个Cell进入编辑模式

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

请参考这个小提琴：http://jsfiddle.net/houssamk/7z0ubup7/1/

注意：请不要将此通话置于＆＃34;编辑＆＃34;事件处理程序，因为它将再次触发编辑事件。请参阅http://docs.telerik.com/kendo-ui/api/web/grid#methods-editCell

Kendo UI Grid incell编辑与客户端模板 - Razor视图

2 个答案: