Reload kendo grid according to dropdown selection

Question

I'm using Kendo UI grid with ASP.NET MVC 4

    @Html.Label("Status: ")<select id="drStaus" style="width:250px">
                <option value="Open">Open</option>
                <option value="Pending">Pending</option>
                <option value="Other">Closed</option>

            </select>
    <br /><br />

    @(Html.Kendo().Grid((IEnumerable<FeedBackDashBord.Models.FeedBack>)Model)    
    .Name("grid")
    .Columns(columns => {
        columns.Bound(o => o.id).Visible(false);
        columns.Template(o => Html.ActionLink("Edit", "Edit", new { o.id })).ClientTemplate("<a href=\"" + Url.Action("Edit", "DashBoard") + "/#= id#\">Edit</a>").Width(45);
        columns.Bound(o => o.CurrentURL).Width("200px").Title("Reported URL");
        columns.Bound(o => o.OS).Width("70px");
        columns.Bound(o => o.Browser).Width("70px");
        columns.Bound(o => o.UserAgent).Width("200px"); ;
        columns.Bound(o => o.datetime).Title("Date Time").Width("100px");
        columns.Bound(o => o.Description).Title("Description").Width("200px");
        columns.Bound(o => o.Email).Width("150px");
        columns.Bound(o => o.Status).Width("70px");
        columns.Template(o => Html.ActionLink("Details", "Details", new { o.id })).ClientTemplate("<a href=\"" + Url.Action("Details", "DashBoard") + "/#= id#\">Details</a>").Width(65);
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .Groupable()
    .HtmlAttributes(new { style = "height:900px;" })
     .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("AjaxGrid", "DashBoard").Data("additionalInfo"))
             )

)

    <script>

        function additionalInfo() {

                return {
                    status: $("#drStaus").val()
                }

        }


        $("#drStaus").kendoDropDownList();



</script>

In the above code i have successfully bound the Kendo Grid to a data source. Now i need to implement the following scenario.

when a option value is selected from the "drStaus" dropdown, i want to pass the selected value to the kendogrid and reload the grid according to the selected value.

Answer 1

I've implemented the above scenario using Kendo Grid ToolBar Template.

http://demos.kendoui.com/web/grid/toolbar-template.html

 @(Html.Kendo().Grid((IEnumerable<FeedBackDashBord.Models.FeedBack>)Model)    
    .Name("grid")
    .Columns(columns => {
        columns.Bound(o => o.id).Visible(false);
        columns.Template(o => Html.ActionLink("Edit", "Edit", new { o.id })).ClientTemplate("<a href=\"" + Url.Action("Edit", "DashBoard") + "/#= id#\">Edit</a>").Width(45);
        columns.Bound(o => o.CurrentURL).Width("200px").Title("Reported URL");
        columns.Bound(o => o.OS).Width("70px");
        columns.Bound(o => o.Browser).Width("70px");
        columns.Bound(o => o.UserAgent).Width("200px"); ;
        columns.Bound(o => o.datetime).Title("Date Time").Width("100px");
        columns.Bound(o => o.Description).Title("Description").Width("200px");
        columns.Bound(o => o.Email).Width("150px");
        columns.Bound(o => o.Status).Width("70px");
        columns.Template(o => Html.ActionLink("Details", "Details", new { o.id })).ClientTemplate("<a href=\"" + Url.Action("Details", "DashBoard") + "/#= id#\">Details</a>").Width(65);
    })
    .ToolBar(toolbar =>
    {
        toolbar.Template(@<text>
           <div class="toolbar">
                    <label class="category-label" for="category">Status:</label>
                        @(Html.Kendo().DropDownList()
                            .Name("drStaus")
                            .OptionLabel("All")
                            .DataTextField("Text")
                            .DataValueField("Value")
                            .AutoBind(false)
                            .Events(e => e.Change("categoriesChange"))
                            .DataSource(ds =>
                            {
                                ds.Read("ToolbarTemplate_Categories", "DashBoard");
                            })
                        ) 
                        </div>
        </text>);
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .Groupable()
    .HtmlAttributes(new { style = "height:900px;" })
     .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("AjaxGrid", "DashBoard").Data("additionalInfo"))
             )

)

    <script>

        function additionalInfo() {

                return {
                    status: $("#drStaus").val()
                }

        }


        $("#drStaus").kendoDropDownList();



</script>
    <script>
        function categoriesChange() {
            var value = this.value(),
                 grid = $("#grid").data("kendoGrid");

            if (value) {
                grid.dataSource.filter({ field: "Status", operator: "eq", value: value });//parseInt(value)
            } else {

                grid.dataSource.filter({});
            }
        }
</script>

Answer 2

Try this solution, I use demo model property to bound grid.

In view

   @(Html.Kendo().DropDownList()
      .Name("drStatus")
      .DataTextField("Text")
      .DataValueField("Value")
      .Events(e => e.Change("Change"))
      .BindTo(new List<SelectListItem>() {
          new SelectListItem() {
              Text = "Open",
              Value = "Open"
          },
          new SelectListItem() {
              Text = "Pending",
              Value = "Pending"
          },
          new SelectListItem() {
              Text = "Other",
              Value = "Other"
          }
      })
      .Value("Open")
)

@(Html.Kendo().Grid(Model)
.Name("grid")
.Columns(columns =>
    {
        columns.Bound(x => x.Name);
        columns.Bound(x => x.Id);
    })
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Groupable()
.DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read.Action("AjaxGrid", "DashBoard").Data("additionalInfo"))
  )

)

And in javaScript

  var additionalDataObject;
function additionalInfo() {
    var dropdownlist = $("#drStatus").data("kendoDropDownList");
    additionalDataObject = {
        status: dropdownlist.value()
    };

    return additionalDataObject;
}

function Change() {
    var grid = $("#grid").data("kendoGrid");
    var page = grid.dataSource._page;
    reloadFilterParameters();
    grid.dataSource.page(page);
}

function reloadFilterParameters() {
    var dropdownlist = $("#drStatus").data("kendoDropDownList");
    additionalDataObject = {
        status: dropdownlist.value(),
    };
}