如何在Kendo Grid ASP MVC中实现多重选择?

时间:2017-06-22 08:48:53

标签: asp.net-mvc kendo-ui kendo-grid kendo-asp.net-mvc kendo-multiselect

我正在使用 2014年的剑道控制开发应用程序<( 我无法访问最新的2017或2018年 < /强>)。在这个项目中,我有几个外键类型的列,如下所示:

columns.ForeignKey(p => p.StatusID, (System.Collections.IEnumerable)ViewData["status"], "ID", "Name").HeaderTemplate("Status")

为了创建网格,我遵循了基本的例子:

http://demos.telerik.com/aspnet-core/grid/foreignkeycolumn

对于基本实施,它的外观和工作方式与用户可以在过滤修改选项中的各种状态或用户中进行选择。

但是,我希望能够一次选择多个。我尝试迁移此示例,这是针对 Kendo for jQuery

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/filtering/multiselect-used-for-column-filtering.html

他们实施了多重选择

multiselect

这应该足以满足我的需求。我试图迁移到ASP MVC,现在看起来像这样:

@model object

@(
 Html.Kendo().MultiSelectFor(m => m)
    .BindTo((MultiSelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
)

基本上,我将下拉列表替换为多选,但没有任何改变,我的过滤仍然显示正常下拉,没有多选:

dropdownlist

也许我应该做更多改变,但我不知道还应该改变什么;我想知道如果有人以前经历过这个以及他们如何处理它,我尝试了多个示例和代码,但我的模板更新了,它总是下拉列表。另一个有趣的例子,但它也在jQuery中,我还没有能够在ASP MVC中找到一个实现:

http://jsfiddle.net/victordscott/5kbfY/

此外,我知道自2015年第一季度以来我想要实现的目标:

http://demos.telerik.com/aspnet-mvc/grid/filter-multi-checkboxes

不幸的是,我无法访问任何更新版本,正如我之前解释过的那样。提前感谢任何想法。

1 个答案:

答案 0 :(得分:0)

不知道它是否在旧版本中可用,但您可以尝试使用“EditorTemplate”

编辑EditorTemplate的代码:(放在文件夹“EditorTemplates”中,将其命名为f.e:“myeditortemplate.cshtml”)

@model object    

@(Html.Kendo().MultiSelect()
          .Name("optional")
          .AutoClose(false)
          .Placeholder("Select attendees...")
          .BindTo(new List<string>() {
              "value1",
              "value2",        
          })
    )

或用于remote-datasource:

@model object    

@(Html.Kendo().MultiSelect()
          .Name("optional")
          .AutoClose(false)
          .Placeholder("Select attendees...")
          .DataSource(source =>
          {
              source.Read(read =>
              {
                  read.Action("ReadAction", "MyController");
              });
          })
    )

然后在网格定义中:

...
..
   column.Bound(c => c.optional).EditorTemplateName("myeditortemplate");
..
..

欢呼声