Filtering from a drop-down List

6 posts, 1 answers
  1. AP
    AP avatar
    222 posts
    Member since:
    Apr 2010

    Posted 25 Jul 2012 Link to this post

    Is it possible to filter a column from a drop down list (from a foreign key look up table) - and if so what's the best way to do this?

    The only way I can see to do this a present, is using a toolbar template - which isn't ideal but would be ok, but the example isn't for the MVC extensions ( http://demos.kendoui.com/web/grid/toolbar-template.html ), and it seems there should be an easier way in MVC.

    Any examples would be helpful.

    Thanks
  2. Answer
    Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 30 Jul 2012 Link to this post

    Hello Andrew,

    Basically you should use the same approach but with the Wrappers syntax. For example a toolbar template with ComboBox inside should look like this:
    .ToolBar(c => c.Template(Html.Kendo().DropDownList().Name("test").HtmlAttributes(new { style="float:right"}).ToHtmlString()))
    Most of the settings for the combo/grid are identical as the one in the wrapper demos and of course to filter the Grid you will need to use the same logic as the one in the change handler which uses the grid's dataSource filter method to filter the grid's data as in the demo you pasted.
    e.g.
    function onComboChange(){
            var value = this.value();
        if (value) {
            grid.data("kendoGrid").dataSource.filter({ field: "CategoryID", operator: "eq", value: parseInt(value) });
        } else {
            grid.data("kendoGrid").dataSource.filter({});
        }
    }


    I hope this helps.

    Kind Regards,
    Petur Subev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. AP
    AP avatar
    222 posts
    Member since:
    Apr 2010

    Posted 01 Aug 2012 Link to this post

    Thanks for this - I've got a bit further.
    .ToolBar(c=>c.Template(Html.Kendo().DropDownList().Name("DirectorateList").DataTextField("DirectorateName").DataValueField("DirectorateName")
         .Events(e=>e.Change("onChange"))
         .DataSource(source=>source   
         .Read(read=>read.Action("GetDirectorates", "Home")))
         .HtmlAttributes(new { style="float:right"}).ToHtmlString()))

    This gives a populated dropdown list - althought I did have to enable Get requests on the controller - how do I get the dropdown list to make post requests?
    However, the filter fails with an error 'Object doesn't support property or method 'data''

    My code is:-
    function onChange() {
             
            var grid = $("#Grid").data("kendoGrid");
            var value = this.value();
     
            if (value) {
     
                grid.data("kendoGrid").dataSource.filter({ field: "DirectorateName", operator: "eq", value: parseInt(value) });
     
            } else {
     
                grid.data("kendoGrid").dataSource.filter({});
     
            }
        }

    My grid is defined, using Ajax Binding as:-
    @(Html.Kendo().Grid<EVAS_MVC.Models.sysVacancies>()
    .Name("Grid")
     
    .Columns(columns=>
        {columns.Bound(p=>p.ID);
        columns.Bound(p => p.SubmissionDate).Title("Submission Date").Format("{0:d}");
        columns.Bound(p => p.PostTitle);
        columns.Bound(p=>p.SubmittingUser);
        columns.Bound(p => p.DirectorateName).Title("Directorate").Filterable(false);
        columns.Bound(p=>p.VStatus).Title("Status");
        columns.Bound(p => p.VCP_Description);
         
        })
        .ToolBar(c=>c.Template(Html.Kendo().DropDownList().Name("DirectorateList").DataTextField("DirectorateName").DataValueField("DirectorateName")
            .Events(e=>e.Change("onChange"))
            .DataSource(source=>source   
            .Read(read=>read.Action("GetDirectorates", "Home")))
            .HtmlAttributes(new { style="float:right"}).ToHtmlString()))
        .DataSource(dataSource=>dataSource
            .Ajax()
            .Read(read=>read.Action("VacanciesRead","Home"))
            )
            .Pageable()
            .Sortable()
            .Filterable()
            )


  4. AP
    AP avatar
    222 posts
    Member since:
    Apr 2010

    Posted 01 Aug 2012 Link to this post

    I've fixed the javascript issue I was having.
    function onChange() {
             
            var grid = $("#Grid").data("kendoGrid");
            var value = this.value();
     
            if (value) {
     
                grid.dataSource.filter({ field: "DirectorateName", operator: "eq", value: parseInt(value) });
     
            } else {
     
                grid.dataSource.filter({});
     
            }
        }

    But I'm getting an error on the controller now:-
    Invalid property or field - 'NaN' for type: sysVacancies

    The controller code is:-
    public ActionResult VacanciesRead([DataSourceRequest] DataSourceRequest request)
           {
               Models.EVASdBDataContext db = new Models.EVASdBDataContext();
     
               var query = from v in db.sysVacancies
                           select v;
     
               return Json(query.ToDataSourceResult(request));
           }


  5. AP
    AP avatar
    222 posts
    Member since:
    Apr 2010

    Posted 01 Aug 2012 Link to this post

    Sorry - should probably read the code before I copy/paste!
    I removed the conversion to an integer, and the filter is now working.

    function onChange() {
            
           var grid = $("#Grid").data("kendoGrid");
           var value = this.value();
     
           if (value) {
     
               grid.dataSource.filter({ field: "DirectorateName", operator: "eq", value: value });
     
           } else {
     
               grid.dataSource.filter({});
     
           }
       }

  6. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 16 Aug 2013 Link to this post

    in this example who is this.value?
    if i want that filtering when clicking on a button? who will be this.value?how the code should look like,in order to be able to filter the data based on a input(lets say,a texbox) ?

    Best Regards
Back to Top