Reload kendo grid according to dropdown selection - kendo-ui

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("Edit").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("Details").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

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(),
};
}

Answer 2

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("Edit").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("Details").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>