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

Grid filtering not displaying values for dropdown lists.

6 Answers 297 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Frank
Top achievements
Rank 1
Frank asked on 19 May 2019, 03:17 AM

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

6 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 21 May 2019, 02:06 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Frank
Top achievements
Rank 1
answered on 22 May 2019, 11:25 AM

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 } 

0
Tsvetina
Telerik team
answered on 22 May 2019, 03:00 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Frank
Top achievements
Rank 1
answered on 22 May 2019, 04:13 PM
I have attached an image of what is returned in console.

0
Frank
Top achievements
Rank 1
answered on 22 May 2019, 04:27 PM
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.
0
Tsvetina
Telerik team
answered on 27 May 2019, 06:57 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Frank
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Frank
Top achievements
Rank 1
Share this question
or