Question

我有一个网格，其中包含所有学生姓名及其校园。现在我想使用DropDownList按学生姓名和校园排序网格。这是下拉列表：

@(Html.Kendo().DropDownList()
      .Name("sorter")
      .DataTextField("Text")
      .DataValueField("Value")
      .Events(e => e.Change("change"))
      .BindTo(new List<SelectListItem>() {
          new SelectListItem() {
              Text = "Sort by Name",
              Value = "1"
          },
          new SelectListItem() {
              Text = "Sort by Campus",
              Value = "2"
          }
      })
      .Value("1")
)

以下是下拉列表的更改事件：

 function change() {
    var value = $("#sorter").val();
    alert(value);

};

你能告诉我如何命令网格按学生姓名或校园名称排序。提前谢谢。

Answer 1

我刚刚使用JavaScript解决了这个问题：

function change() {
    var value = $("#sorter").val();
    if (value == "1")
    {
        // sort grid by student names
        var kendoGrid = $("#grid").data("kendoGrid");
        var dsSort = [];
        dsSort.push({ field: "DisplayName", dir: "asc" });
        kendoGrid.dataSource.sort(dsSort);
    }
    elseif(value == "2")
    {
        // sort grid by campus
        var kendoGrid = $("#grid").data("kendoGrid");
        var dsSort = [];
        dsSort.push({ field: "Campus", dir: "asc" });
        kendoGrid.dataSource.sort(dsSort);

    } 
}

Answer 2

如果您同时使用Kendo MVC UI网格和下拉列表：

$function change() {
    var value = $("#sorter").val();

 if(value==1){

   var gridsort = "@(Html.Kendo().Grid<GiveyourModelHere>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.StudentName);
            columns.Bound(c => c.StudentCampus).Sortable(false);
        })
        .Sortable())";
}
else{

   var gridsort = "@(Html.Kendo().Grid<Model>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.StudentName).Sortable(false);
            columns.Bound(c => c.StudentCampus);
        })
        .Sortable())";

 }

};

在视图中使用@gridsort来显示Kendo Grid。

使用DropDownList的Kendo MVC UI排序网格

2 个答案: