Kendo网格列 - 编辑

时间:2018-03-21 10:04:08

标签: kendo-grid

我在页面中有一个kendo grid 当用户开始从网格中编辑指定列时,我需要显示文本。

这是网格:

@(Html.Kendo().Grid<GGISServices.Models.SilviPrio.GenerateDocumentViewModel>()
        .Name("grid")
        .AutoBind(false)
        .Columns(columns =>
        { ...
          columns.Bound(c => c.TreeQ4)
                .HeaderTemplate("<a class='k-link' href=''>"+ LanguageService.Instance.Translate("Enum_TreeGroup_4") +"<br><span class='subtitle'>" + LanguageService.Instance.Translate("Trees_MeasurementUnits") + "</span></a>")
                .HtmlAttributes(new { @class = "tree-q4 pvrf-data tree-column" }).Sortable(true)
                .Filterable(f => f.Multi(true).DataSource(ds => ds.Read(r => r.Action("GetFilterData", "Document", new { Area = GGISWeb.AreaModules.SilviPrio }).Type(HttpVerbs.Post).Data("{ field: 'TreeQ4', fieldtype: 'decimal' }"))));
            columns.Bound(c => c.TreeQ1)
                .HeaderTemplate("<a class='k-link' href=''>" + LanguageService.Instance.Translate("Enum_TreeGroup_1") + "<br><span class='subtitle'>" + LanguageService.Instance.Translate("Trees_MeasurementUnits") + "</span></a>")
                .HtmlAttributes(new { @class = "tree-q1 pvrf-data tree-column" }).Sortable(true)
                .Filterable(f => f.Multi(true).DataSource(ds => ds.Read(r => r.Action("GetFilterData", "Document", new { Area = GGISWeb.AreaModules.SilviPrio }).Type(HttpVerbs.Post).Data("{ field: 'TreeQ1', fieldtype: 'decimal' }"))));
            columns.Bound(c => c.TreeQ2)
                .HeaderTemplate("<a class='k-link' href=''>" + LanguageService.Instance.Translate("Enum_TreeGroup_2") + "<br><span class='subtitle'>" + LanguageService.Instance.Translate("Trees_MeasurementUnits") + "</span></a>")
                .HtmlAttributes(new { @class = "tree-q2 pvrf-data tree-column" }).Sortable(true)
                .Filterable(f => f.Multi(true).DataSource(ds => ds.Read(r => r.Action("GetFilterData", "Document", new { Area = GGISWeb.AreaModules.SilviPrio }).Type(HttpVerbs.Post).Data("{ field: 'TreeQ2', fieldtype: 'decimal' }"))));
            columns.Bound(c => c.TreeQ5)
                .HeaderTemplate("<a class='k-link' href=''>" + LanguageService.Instance.Translate("Enum_TreeGroup_5") + "<br><span class='subtitle'>" + LanguageService.Instance.Translate("Trees_MeasurementUnits") + "</span></a>")
                .HtmlAttributes(new { @class = "tree-q5 pvrf-data tree-column" }).Sortable(true)
                .Filterable(f => f.Multi(true).DataSource(ds => ds.Read(r => r.Action("GetFilterData", "Document", new { Area = GGISWeb.AreaModules.SilviPrio }).Type(HttpVerbs.Post).Data("{ field: 'TreeQ5', fieldtype: 'decimal' }"))));
            columns.Bound(c => c.TreeQ3)
                .HeaderTemplate("<a class='k-link' href=''>" + LanguageService.Instance.Translate("Enum_TreeGroup_3") + "<br><span class='subtitle'>" + LanguageService.Instance.Translate("Trees_MeasurementUnits") + "</span></a>")
                .HtmlAttributes(new { @class = "tree-q3 pvrf-data tree-column" }).Sortable(true)
                .Filterable(f => f.Multi(true).DataSource(ds => ds.Read(r => r.Action("GetFilterData", "Document", new { Area = GGISWeb.AreaModules.SilviPrio }).Type(HttpVerbs.Post).Data("{ field: 'TreeQ3', fieldtype: 'decimal' }"))));
            columns
              .Bound(c => c.SilviPrioId)
              .ClientTemplate(
                  "#= actionDetails(data) #"
              )
              .Title(LanguageService.Instance.Translate("GridLabel_Action"))
              .Filterable(false)
              .Sortable(false)
              .HtmlAttributes(new { @class = "action-column" });
        })
        .ToolBar(toolbar =>
        {
            toolbar.Save();
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Sortable()
        .Filterable()
        //.Selectable(selection => selection.Enabled(true))
        .Selectable(selection => selection.Mode(GridSelectionMode.Single))
        //.Events(e => e.DataBound("SaveState").ExcelExport("ShowLoading"))
        .Pageable(pageable => pageable
            .Refresh(true)
            .Info(true)
            .PageSizes(new int[] { 5, 10, 25, 50, 100, 1000 })
            .ButtonCount(5)
            )
        .Events(events => events
            .Change("onChange")
            .DataBound("onDataBound")
            .DataBinding("onDataBounding")
            .Edit("onEditing")
            .SaveChanges("onSavingChanges")
        )
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .Events(events => events
                .Error("error_handler")
                .RequestEnd("request_end_handler")
            )
            .Model( model =>
            {
                model.Id(p => p.SilviPrioId);
                model.Field(p => p.Region).Editable(false);
                model.Field(p => p.CostCenter).Editable(false);
                model.Field(p => p.UP).Editable(false);
                model.Field(p => p.UA).Editable(false);
                model.Field(p => p.MeasurementUnit).Editable(false);
                model.Field(p => p.PlannedQuantity).Editable(false);
                model.Field(p => p.PlannedUnitPrice).Editable(false);
            })
            .Read(read => read.Action("GetData", "Document", new { Area = GGISWeb.AreaModules.SilviPrio }))
            .Update(update => update.Action("Editing_Update", "Document", new { Area = GGISWeb.AreaModules.SilviPrio }).Data("additionalUpdateInfo"))
            .PageSize(25)
        )
        .Resizable(resize => resize.Columns(true))
)

我需要显示一个这样的文字, enter image description here  但是当用户开始编辑字段时TreeQ4, TreeQ1 我在网上搜索过,我已经用HtmlAttributes(title建立了一些东西,但它不是这样的。 你能告诉我如何解决这个问题吗?

1 个答案:

答案 0 :(得分:0)

使用kendo网格编辑事件,然后将文本追加到事件函数中的html元素。