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

Filtering from a drop-down List

5 Answers 877 Views
Grid
This is a migrated thread and some comments may be shown as answers.
AP
Top achievements
Rank 1
Iron
Iron
Veteran
AP asked on 25 Jul 2012, 02:59 PM
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

5 Answers, 1 is accepted

Sort by
0
Accepted
Petur Subev
Telerik team
answered on 30 Jul 2012, 11:24 AM
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!
0
AP
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 01 Aug 2012, 09:05 AM
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()
        )


0
AP
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 01 Aug 2012, 09:40 AM
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));
       }


0
AP
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 01 Aug 2012, 09:45 AM
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({});
 
       }
   }

0
Daniel
Top achievements
Rank 1
answered on 16 Aug 2013, 08:44 AM
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
Tags
Grid
Asked by
AP
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Petur Subev
Telerik team
AP
Top achievements
Rank 1
Iron
Iron
Veteran
Daniel
Top achievements
Rank 1
Share this question
or