Question

我有一个带有一些编辑器模板的网格。网格可以编辑InCell。我想更改编辑inCell事件，以便它在双击时编辑值。直到现在我这样做了：

$(table + " table").on("dblclick",
        "tbody>tr>td",
        function(e) {
            var grid = $(table).data("kendoGrid");
            grid.editCell($(this));
        });

我遇到的问题是，当我双击单元格时，我想要编辑的小部件（Multiselect，DropdownList ...）没有在网格中呈现，看起来像这样：

相反，它应该是这样的：

其中一位编辑看起来像这样：

@(Html.Kendo().DropDownList()
.Name("Responsible")
.DataTextField("ResponsibleName")
.DataValueField("ResponsibleId")
.BindTo((System.Collections.IEnumerable)ViewData["Responsible"])
);

网格的定义是：

 @(Html.Kendo().Grid(Model.ActivitiesList)
          .Name(Model.ActivitiesSection)
          .ClientDetailTemplateId(Model.ActivitiesSection + "-description")
          .Columns(columns =>
          {
              columns.Bound(c => c.ActivityId).Title(@Html.Kendo().CheckBox().Name("check-#=ActivitiesSection#").Checked(false).Enable(false).ToString()).ClientTemplate(@Html.Kendo().CheckBox().Name("check-#=ActivityId#").Checked(false).ToString()).Sortable(false);
              columns.Bound(c => c.StatusColor).Title("").ClientTemplate("<i class='fa fa-circle' aria-hidden='true' style='font-size: smaller; color:#=StatusColor#;'></i>").Sortable(false);
              columns.Bound(c => c.StatusDescription).Title("Status").ClientTemplate("#=StatusDescription#");
              columns.Bound(c => c.Name).Title("Name").ClientTemplate("<p class='activity-name'>#=Name#</p>");
              columns.Bound(c => c.Priority).Title("Priority").ClientTemplate("#=PriorityTemplate(Priority)#");
              columns.Bound(c => c.Responsible).Title("Responsible").HtmlAttributes(new { @class = "templateCell" }).ClientTemplate("#=ResponsibleTemplate(Responsible)#");
              columns.Bound(c => c.Team).Title("Team").ClientTemplate("Better solutions");
              columns.Bound(c => c.GeographicResponsibility).Title("Geographic Resp").HtmlAttributes(new { @class = "templateCell" }).ClientTemplate("#=GeographicResponsibilityTemplate(GeographicResponsibility)#").EditorTemplateName("_GeographicalResponsibilityEditor");
              columns.Bound(c => c.FunctionOrPracticeResponsible).Title("Function/Practice Resp").HtmlAttributes(new { @class = "templateCell" }).ClientTemplate("#=FunctionOrPracticeResponsibleTemplate(FunctionOrPracticeResponsible)#").EditorTemplateName("_FunctionResponsibleEditor");
              columns.Bound(c => c.DueDate).Title("Due date").ClientTemplate("<p style='white-space: nowrap'>#= DueDate != null ? kendo.toString(kendo.parseDate(DueDate,'dd/MM/yyyy'), 'dd-MM-yyyy') : 'DD-MM-YY' #</p>").EditorTemplateName("_ActivityDueDateEditor");
              columns.Bound(c => c.Starred).Title("<i class='fa fa-star' aria-hidden='true' style='color: #ededed; font-size:large;'></i>").ClientTemplate("<i class='fa fa-star' aria-hidden='true' style='color:\\#ededed;'></i>").Sortable(false);
              columns.Bound(c => c.StatusDescription).Title("<i class='fa fa-file' aria-hidden='true' style='color: #ededed; font-size:large'></i>").ClientTemplate("<i class='fa fa-file' aria-hidden='true' style='color:\\#ededed;'></i>").Sortable(false);
              columns.Bound(c => c.ActivityId).Title("").ClientTemplate("<input type='button' value='More Info' class='expanded-section' id='#= ActivityId #'/>").Sortable(false);
              columns.Bound(c => c.ActivityId).Title("").ClientTemplate("<input type='hidden' class='js-activity-id' value='#= ActivityId #'").Sortable(false);
              columns.Bound(c => c.KeyLaunchElementId).Hidden(true);
              columns.Bound(c => c.ProcessMapId).Hidden(true);
              columns.Bound(c => c.WorkstreamId).Hidden(true);
          })

          .DataSource(e => e.Ajax().ServerOperation(false).Sort(a => a.Add("Name").Ascending())
              .Model(model =>
              {
                  model.Id(act => act.ActivityId);
                  model.Field(act => act.Name);
                  model.Field(act => act.ActivityId).Editable(false);
                  model.Field(act => act.Priority).DefaultValue(new ActivityPriorityViewModel());
                  model.Field(act => act.StatusColor).Editable(false).DefaultValue("#00b0d3");
                  model.Field(act => act.StatusDescription).DefaultValue("New").Editable(false);
                  model.Field(act => act.Responsible).DefaultValue(new ActivityResponsibleViewModel());
                  model.Field(act => act.Team).Editable(false);
                  model.Field(act => act.GeographicResponsibility).DefaultValue(new GeographicalResponsibilityViewModel());
                  model.Field(act => act.FunctionOrPracticeResponsible).DefaultValue(new List<FunctionOrPracticeViewModel>());
                  model.Field(act => act.DueDate);
                  model.Field(act => act.Starred).Editable(false);
              })
              .Update(update => update.Action("UpdateActivity", "Activity"))
              .AutoSync(true))
          .Events(events => events.DetailExpand("detailExpand").Save("function(e) { this.dataSource.sync() }").DataBound("activityFilter.IsSorted"))


          .Sortable(s => s.SortMode(GridSortMode.SingleColumn).AllowUnsort(false))
          .Editable(edit => edit.Mode(GridEditMode.InCell))
    )

谢谢！

Answer 1

首先创建新编辑器并将其放在目录下：Views / Shared / EditorTemplates目录。我创建了“DropdownTest.cshtml”编辑器：

@using Kendo.Mvc.UI

@(
 Html.Kendo().DropDownListFor(m => m)                
        .BindTo((System.Collections.IEnumerable)ViewData["Responsible"])
        .DataValueField("ResponsibleId")
        .DataTextField("ResponsibleName")
)

ViewData [“Responsible”]用于在编辑时列出所有位置，因此必须在view方法中初始化：

public ActionResult Index()
        {    
            ViewData["Responsible"] = new List<Responsible>()
            {
                new Responsible
                {
                    ResponsibleId = 1,
                    ResponsibleName = "Test-A"
                },
                new Responsible
                {
                    ResponsibleId = 2,
                    ResponsibleName = "Test-B"
                }
            };

            return View();
        }

网格包装器列定义（而不是绑定 - 使用外键）：

columns.ForeignKey(p => p.Responsible.ResponsibleId, (System.Collections.IEnumerable)ViewData["Responsible"],
            "ResponsibleId", "ResponsibleName").EditorTemplateName("DropdownTest");

EditorTemplateName（“DropdownTest”）链接到EditorTemplates目录中的编辑器。

带有小部件的EditCell Kendo Grid MVC

1 个答案: