Grid filtering not displaying values for dropdown lists.

[Frank]

Hi,

I have a Jquery grid that has a column with dropdown values as below.   All the CRUD functions work 100% and data displays correctly.

The problem is that the filter for the dropdown list shows the object  "[object] [Object]" and not the drop down values from the grid.

I thought I could just use the Filter Menu customization example below... but this doesn't work and doesn't seem to trigger the javascript at all.

https://demos.telerik.com/kendo-ui/grid/filter-menu-customization

 

var dataSource = new kendo.data.DataSource({
            type: "aspnetmvc-ajax",
            transport: {
                "read": {
                    url: "/Admin/Wells/GetWells"
                },
                "update": {
                    url: "/Admin/Wells/Update"
                },
                "create": {
                    url: "/Admin/Wells/Create"
                },
                "destroy": {
                    url: "/Admin/Wells/Delete"
                }
            },
            //batch: true,
            pageSize: 20,
            serverPaging: true,
            serverSorting: true,
            serverFiltering: true,
            serverGrouping: true,
            serverAggregates: true,
            schema: {
                data: "Data",
                total: "Total",
                errors: "Errors",
                model: {
                    id: "Id",
                    fields: {
                                "Id":{"type": "string", "nullable": false},
                                "NAME":{"type": "string", "nullable": false, "validation": {"required": { "message": "This field is required" }}},
                                "OPERATORFK":{"defaultValue": { "ID": "0", "NAME": ""}}
}
                }
            }
        });

$(gridID).kendoGrid({
            sortable: true,
            autoBind: false,
            dataSource: dataSource,
            filterable: true,
            filter: function (e) {
                console.log("filter event is fired");
            },
            columnMenu: true,
            resizable: true,
            selectable: "single",
            autoFitColumn: false,
            pageable: {
                pageSize: 20
            },
           columns:[
                { field: "Id", nullable: "false", title: "ENO", minResizableWidth: "125px", type: "string" },
                { field: "NAME", title: "Borehole Name", minResizableWidth: "350px" },
                { field: "OPERATORFK", filterable: { ui: categoryFilter } , title: "Operator Name", minResizableWidth: "350px", values: values, editor: categoryDropDownEditor, template: "#= (OPERATORFK.NAME == null) ? '' : OPERATORFK.NAME#"}
            ],
            editable: "popup"


        });

 

function categoryFilter(element) {
    alert(JSON.stringify(values));
    element.kendoDropDownList({
        dataSource: values,
        optionLabel: "--Select Value--"
    });

}

[Tsvetina]

Hi Frank,

It looks like the data values in the values array are complex objects, not just strings. In such case, you should set the property names from the values array to the dataTextField and dataValueField options of the DropDownList.

For example, if the objects in the values array have "text" and "value" properties, set the DropDownList like this:

function categoryFilter(element) {
    alert(JSON.stringify(values));
    element.kendoDropDownList({
        dataSource: values,
        optionLabel: "--Select Value--",
        dataTextField: "text",
        dataValueField: "value"
    });

}

Regards,
Tsvetina
Progress Telerik

[Frank]

Hi Tsvetina,

Thankyou.  Unfortunately this has not fixed my issue.   The categoryFilter function is not being called at all... as you can see I have an alert in the function to tell me if it is being fired.

So is there an issue somewhere with the columns object for that column?  I thought I have the correct syntax but the function never fires.

filterable: { ui: categoryFilter } 

[Tsvetina]

Hello Frank,

This is actually my omission. When the column has a values setting, it is not possible to declare a template for its filter. This is noted here: columns.filterable.ui.

However, if the columns.values array has properly set "text" and "value" fields as specified in the documentation, it should load the text values successfully. Can you show me what you are currently setting to the values option:

{ field: "OPERATORFK", filterable: { ui: categoryFilter } , title: "Operator Name", minResizableWidth: "350px", values: values, editor: categoryDropDownEditor, template: "#= (OPERATORFK.NAME == null) ? '' : OPERATORFK.NAME#"}

Regards,
Tsvetina
Progress Telerik

[Frank]

I have attached an image of what is returned in console.

[Frank]

I have figured out now that the problem was that the text and value fields should have been called text and value and not id and name.

The dropdown list now populated correctly in the filter.  Unfortunately when I apply the filter I am getting an error:

'Invalid cast from 'System.String' to 'Model'.'

Is this because my value field is a string and not an integer? or is there something else causing the issue.

[Tsvetina]

Hello Frank,

This probably happens because the column is of a complex type, while the column filter can only pass a primitive value. You can see that in our Foreign Key demo, the column is bound to an int field:
Grid / ForeignKey column

You can try changing the column binding to use the nested ID field (assuming that it is called ID):

{ field: "OPERATORFK.ID", filterable: { ui: categoryFilter } , title: "Operator Name", minResizableWidth: "350px", values: values, editor: categoryDropDownEditor, template: "#= (OPERATORFK.NAME == null) ? '' : OPERATORFK.NAME#"}

Here is a runnable example with a column configured like this:
https://dojo.telerik.com/UKUVeyOl

This may produce problems with the custom editor. If such occur, please show me the categoryDropDownEditor function.

Regards,
Tsvetina
Progress Telerik