CODEWITHSUNDEEP
asp.net-mvckendo-asp.net-mvc
Badar Ali
Badar Ali

Reputation: 77

Kendo MVC UI sort grid using DropDownList

I have a grid that contains all the student names and their campus. Now I want to sort grid by student names and campus using DropDownList. Here is the drop down list:

@(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")
)

Here is the change event for dropdownlist:

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

};

can you tell me how can I command grid to sort either by student name or campus name. Thanks in advance.

Upvotes: 1

Views: 2259

Answers (2)

rohitreddyk
rohitreddyk

Reputation: 337

If you are using both Kendo MVC UI Grid and Dropdown List:

$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())";

 }

};

use @gridsort in the view to display the Kendo Grid.

Upvotes: 1

Badar Ali
Badar Ali

Reputation: 77

I just solved by myself using JavaScript, as:

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);

    } 
}

Upvotes: 2

Related Questions