Kendo MVC UI 使用 DropDownList 对网格进行排序

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 网格。

Kendo MVC UI 使用 DropDownList 对网格进行排序

Kendo MVC UI sort grid using DropDownList

asp.net-mvc

kendo-asp.net-mvc