Filtering from a drop-down List

[AP]

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

[Petur Subev]

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

[AP]

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()

        )

[AP]

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));

       }

[AP]

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({});

 

       }

   }

[Daniel]

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