This is a migrated thread and some comments may be shown as answers.

Filter grid based on controls outside of grid

6 Answers 886 Views

Grid

This is a migrated thread and some comments may be shown as answers.

StevenDale asked on 26 Jun 2013, 09:38 PM

I am using the Kendo Grid and ajax bindings. However I would like to be able to filter the results based on values of controls set outside of the grid? I know I could use the built in filters but I don't want the grid to fetch the data before filtering it. I want my controller to filter the data before the grid is bound to it. How do I accomplish this?

The following is a simple example of what my page might look like.

Start Date ------------------- End Date ------------------- FilterButton

Grid
------------------------------------------------------------------------
Name | Birth Date | .....
________________________________________________________

When I click the Filter button I want to rebind the grid based on values of my Model, which would be updated from the StartDate value and EndDate value selected prior to clicking the Filter Button. I have tried using javascript where I first set the values on the Model based on the selected values of the controls and then calling rebind on the grid. For this I also my model type as a parameter to the select query but that does not work. It always calls the constructor on the Model parameter that is passed into the select query when I do this. This seems like such a simple thing.

Thanks,

Billy Jacobs

6 Answers, 1 is accepted

Accepted

answered on 27 Jun 2013, 10:41 AM

Hello,

Please try with the below code snippet.

<div>

<input type="text" id="SearchText" value="1" />

<input type="button" id="btnSearch" onclick="BindGrid();" value="Bind" />

</div>

<div>

@(Html.Kendo().Grid<MvcApplication1.Models.TestModels>()

.Name("Grid")

.Columns(columns =>

{

columns.Bound(p => p.ID);

columns.Bound(p => p.Name);

})

.Filterable()

.Sortable()

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("Grid_Read", "Home").Data("getParameter"))

.Model(model => { model.Id(p => p.ID); })

)

</div>

<script type="text/javascript">

function getParameter() {

return {

param1: $("#SearchText").val()

};

}

function BindGrid() {

$("#Grid").data("kendoGrid").dataSource.read();

$("#Grid").data("kendoGrid").refresh();

}

</script>

public ActionResult Grid_Read([DataSourceRequest] DataSourceRequest request, string param1)

{

List<TestModels> models = new List<TestModels>();

for (int i = 1; i < 6; i++)

{

TestModels model = new TestModels();

model.ID = i;

model.Name = param1 + i;

models.Add(model);

}

return Json(models.ToDataSourceResult(request));

}

public class TestModels

{

public int ID { get; set; }

public string Name { get; set; }

}

Thanks,
Jayesh Goyani

answered on 04 Jul 2013, 03:14 AM

$("#Grid").data("kendoGrid") is null. $("#Grid") is not null. The name of the Kendo grid is "Grid" and I can get the values of my kendo datepickers as well but I cannot get the Kendo Grid in javascript. Any ideas?

Here is my Grid and my javascript:

@using PartnerSite.Models

@using Telerik.Web.Mvc.UI

@model DSLD.Domain.Models.ClosedHouseListManagementModel

@{

ViewBag.Title = "Closed House Check List";

}

<table>

<tr>

<td>Start Date</td>

<td>

<input type="hidden" id="StartDate" name="StartDate" />

@(Html.Kendo().DatePicker().Value(Model.StartDate)

.Name("StartDatePicker")

.HtmlAttributes(new { style = "width: 100px;" })

)

</td>

<td>End Date</td>

<td>

<input type="hidden" id="EndDate" name="EndDate" />

@(Html.Kendo().DatePicker().Value(Model.EndDate)

.Name("EndDatePicker")

.HtmlAttributes(new { style = "width: 100px;" })

)

</td>

<td>

<button onclick=" BindGrid(); return false; ">Filter</button>

</td>

</tr>

<tr>

<td colspan="5">

@(Html.Kendo().Grid<ClosedHouseCheckListItemModel>()

.Pageable()

.Name("Grid")

.Resizable(o => o.Columns(true))

.ToolBar(toolBar => toolBar.Create())

.Columns(columns =>

{

columns.Bound(c => c.Id).Visible(false);

columns.ForeignKey(c => c.SubdivisionId, (System.Collections.IEnumerable)ViewData["Subdivisions"], "Id", "Name").Title("Subdivision");

columns.ForeignKey(c => c.LotId, (System.Collections.IEnumerable)ViewData["Lots"], "Id", "Name").Title("Lot");

columns.Bound(c => c.ItemDescription);

columns.Bound(c => c.DateOpen).Format("{0:MM/dd/yyyy}").Width(100);

columns.Bound(c => c.DateClosed).Format("{0:MM/dd/yyyy}").Width(100);

//columns.ForeignKey(c => c.Builder, (System.Collections.IEnumerable)ViewData["Builders"], "Id", "Name").Title("Builder");

columns.ForeignKey(c => c.SubdivisionId, (System.Collections.IEnumerable)ViewData["Partners"], "Id", "Name").Title("Vendor");

columns.Command(commands =>

{

commands.Edit().Text("Edit");

commands.Destroy().Text("Delete");

}).Title("Actions").Width(100);

})

.Pageable()

.Filterable()

.Groupable()

.Sortable()

.Scrollable(c => c.Height("800px"))

.Groupable()

.DataSource(dataSource => dataSource.Ajax()

.Events(events => events.Error("grid_error"))

.Model(model => model.Id(u => u.Id))

.Read(r => r.Action("GetClosedHouseCheckListItems", "ClosedHouseCheckList").Data("getParameter"))

.Create("InsertClosedHouseCheckListItem", "ClosedHouseCheckList")

.Update("UpdateClosedHouseCheckListItem", "ClosedHouseCheckList")

.Destroy("DeleteClosedHouseCheckListItem", "ClosedHouseCheckList")

.Model(model => model.Field(m => m.Id).DefaultValue(Guid.Empty)))

)

</td>

</tr>

</table>

<script type="text/javascript">

function getParameter() {

alert('before get parameter');

alert($("#StartDatePicker").data("kendoDatePicker").value());

$("#StartDate").val($("#StartDatePicker").data("kendoDatePicker").value());

$("#EndDate").val($("#EndDatePicker").data("kendoDatePicker").value());

alert('after get parameter');

return {

startDate: $("#StartDate").val(),

endDate: $("#EndDate").val()

};

}

function BindGrid() {

alert('before');

alert($("#Grid"));

alert($("#Grid").data("kendoGrid")); // alerts null

alert($("#StartDatePicker").data("kendoDatePicker").value()); // does not alert

$("#Grid").data("kendoGrid").dataSource.read(); // won't execute even if I remove all alerts

$("#Grid").data("kendoGrid").refresh(); // won't execute even if I remove all alerts

alert('after'); // does not get here

}

</script>