Filter grid based on controls outside of grid

[StevenDale]

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

[Jayesh Goyani]

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

[StevenDale]

$("#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>

[StevenDale]

I got it working thanks. Billy Jacobs

[Sankalp]

Amqazing

[Laksh]

Thanks Jayesh,

I have the also same HTML except, instead of text box im using drop down list as filter. When page loads for the first time the drop down list has default selected value. However getParameter returns empty string. Do we know what point datasource.read() operation gets fired on first page load? does it fires before the drop down list gets initialized

[Boyan Dimitrov]

Hello Laksh,

It sounds like a problem that is already fixed in our current service pack release (2015.1 408). Please upgrade and let us know if the problem persists. 

Regards,
Boyan Dimitrov
Telerik