Kendo Mvc Grid clienttemplate

时间:2014-08-20 10:03:05

标签: kendo-ui kendo-grid kendo-dropdown

我正在使用Kendo MVC Grid,我希望在其中一个单元格中有一个下拉列表。 这是我的代码:

    @(Html.Kendo().Grid<RMS.Admin.ViewModel>()
  .Name("ResourceGrid")
  .Columns(columns =>
  {
      columns.Bound(c => c.ResourceName);
      columns.Bound(c => c.Descritption);
      columns.Bound(c => c.ResourceType).ClientTemplate("#=ResourceType#");
      columns.Bound(c => c.Approved);
      columns.Bound(c => c.IsEnabled);
      columns.Bound(c => c.Data).Width(220);
      columns.Command(command =>
      {
          command.Edit();
          command.Destroy();
      }).Width(172).Title("Edit/Delete");
  })
  .ToolBar(toolbar => toolbar.Create())
  .Editable(editable => editable.Mode(GridEditMode.InLine))
  .Scrollable()
  .Sortable()
      .HtmlAttributes(new { style = "height:800px" })
  .Pageable(pageable => pageable
      .Refresh(true)
      .PageSizes(true)
      .ButtonCount(5))
      .ClientDetailTemplateId("template")
  .DataSource(dataSource => dataSource
      .Ajax()
      .Model(model =>
      {
          model.Id(s => s.ResourceId);
          model.Field(p => p.ResourceType).DefaultValue(ViewData["defResourceType"] as RMS.Admin.ViewModel.ResourceTypeId);
      })
                .Create(update => update.Action("CreateResource", "Home", new { resourceTypeId = "#=ResourceType.Id#" }))
                .Read(read => read.Action("ReadResource", "Home"))
                .Update(update => update.Action("UpdateResource", "Home"))
                .Destroy(destroy => destroy.Action("RemoveResource", "Home"))

    )
        .Events(events => events.DataBound("dataBound"))
  )

问题是我不知道客户模板是什么,所以我不知道如何处理它。 如果使用clienttemplate绑定resourcetype我无法向网格添加新记录,则会收到错误:Uncaught ReferenceError:ResourceType未定义

如果我删除clienttemplate我可以添加一条记录但是当我尝试保存它时它说它找不到ResourceType的id。

1 个答案:

答案 0 :(得分:1)

基本上如果你想在kendo ui网格中使用下拉列表,你必须定义一个包含一个kendo下拉列表小部件的编辑器模板。这意味着您必须使用属性.EditorTemplateName()声明相应的单元格,如下所示:

.Columns(columns =>
  {
      columns.Bound(c => c.ResourceName);
      columns.Bound(c => c.Descritption);
      columns.Bound(c => c.ResourceType).EditorTemplateName("TemplateName");
      columns.Bound(c => c.Approved);
      columns.Bound(c => c.IsEnabled);
      columns.Bound(c => c.Data).Width(220);
      columns.Command(command =>
      {
          command.Edit();
          command.Destroy();
      }).Width(172).Title("Edit/Delete");
  })

editortemplate必须存储在文件夹中:Shared / EditorTemplates / TemplateName.cshtml

TemplateName.cshtml应如下所示:

@model ModelName

@(Html.Kendo().DropDownList()
.OptionLabel("please select a value")    
.Name("ResourceType") <-- the name needs to be equal to the grid cell name
    .DataSource(source=>
        {
        source.Read( read =>
            {
                read.Action("ActionName", "ControllerName");

            })
            .ServerFiltering(true);
        })
    .DataTextField("Name") <-- displays the text of the object
    .DataValueField("ID") <-- stores the id of the object
    )
希望这会引导你走向正确的方向。 欢呼声,