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

Filter grid based on controls outside of grid

6 Answers 780 Views
Grid
This is a migrated thread and some comments may be shown as answers.
StevenDale
Top achievements
Rank 2
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

Sort by
0
Accepted
Jayesh Goyani
Top achievements
Rank 2
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
0
StevenDale
Top achievements
Rank 2
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>
0
StevenDale
Top achievements
Rank 2
answered on 04 Jul 2013, 04:45 AM
I got it working thanks. Billy Jacobs
0
Sankalp
Top achievements
Rank 1
answered on 08 Oct 2014, 07:39 PM
Amqazing
0
Laksh
Top achievements
Rank 1
answered on 17 Apr 2015, 09:18 PM

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

0
Boyan Dimitrov
Telerik team
answered on 21 Apr 2015, 11:57 AM

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!
 
Tags
Grid
Asked by
StevenDale
Top achievements
Rank 2
Answers by
Jayesh Goyani
Top achievements
Rank 2
StevenDale
Top achievements
Rank 2
Sankalp
Top achievements
Rank 1
Laksh
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Share this question
or