Filter grid based on controls outside of grid

7 posts, 1 answers
  1. StevenDale
    StevenDale avatar
    100 posts
    Member since:
    Apr 2007

    Posted 26 Jun 2013 Link to this post

    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

  2. Answer
    Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 27 Jun 2013 Link to this post

    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
  3. Kendo UI is VS 2017 Ready
  4. StevenDale
    StevenDale avatar
    100 posts
    Member since:
    Apr 2007

    Posted 03 Jul 2013 Link to this post

    $("#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>
  5. StevenDale
    StevenDale avatar
    100 posts
    Member since:
    Apr 2007

    Posted 03 Jul 2013 Link to this post

    I got it working thanks. Billy Jacobs
  6. Sankalp
    Sankalp avatar
    1 posts
    Member since:
    Jun 2012

    Posted 08 Oct 2014 in reply to Jayesh Goyani Link to this post

    Amqazing
  7. Laksh
    Laksh avatar
    25 posts
    Member since:
    Mar 2011

    Posted 17 Apr 2015 in reply to Sankalp Link to this post

    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

  8. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 21 Apr 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready