Kendo Grid Filter throwing javascript error when bound to remote api filter data

[Karthik]

hi, I am trying to populate Kendo MVC Grid filter with remote api data but getting js error. Could you help on fixing it? Please find the code snippets and js error below

C# Grid:

@(Html.Kendo().Grid<AggregateModel>()
...
.columns.Bound(e => e.AccountType)
       .Title("Account Type").Width(100)
       .Filterable(f => f.Multi(true).Search(true).DataSource(ds => ds
          .Read(read => read.Type(HttpVerbs.Get).Url("api/AccountTypeFilters")
          .Data("{ field: 'AccountType' }"))));

API Response (api/AcountTypeFilters) : with Text and Value fields

{
    "$id": "1",
    "AccountType": [
        {
            "$id": "2",
            "Disabled": false,
            "Group": null,
            "Selected": false,
            "Text": "Client",
            "Value": "0"
        },
        {
            "$id": "3",
            "Disabled": false,
            "Group": null,
            "Selected": false,
            "Text": "House",
            "Value": "1"
        }
    ]
}

js error:

Uncaught TypeError: n.slice is not a function
    at init.success (kendoscripts.min.js?v=2-0-289-1:1:101049)
    at success (kendoscripts.min.js?v=2-0-289-1:1:100001)
    at i.success (kendoscripts.min.js?v=2-0-289-1:1:88721)
    at v (headerscripts.min.js?v=2-0-289-1:14:35030)
    at Object.fireWith [as resolveWith] (headerscripts.min.js?v=2-0-289-1:14:35775)
    at b (headerscripts.min.js?v=2-0-289-1:14:74792)
    at XMLHttpRequest.<anonymous> (headerscripts.min.js?v=2-0-289-1:14:79897)
    at XMLHttpRequest.wrapFn (webcomponents.js?v=2-0-289-1:2996:35)
    at _ZoneDelegate.invokeTask (webcomponents.js?v=2-0-289-1:2626:171)
    at ZoneImpl.runTask (webcomponents.js?v=2-0-289-1:2425:37)

Kendo.Mvc, Version=2022.1.412.0
Kendo UI js v2018.3.911

[Mihaela]

Hello Karthik,

Thank you for the shared code snippets.

I would recommend modifying the response of the Read request (api/AccountTypeFilters) to return the data in the following format:

[
        {
            "AccountType": "Client", // the name of the property must match the name of the Grid column (i.e., "AccountType")
        },
        {
            "AccountType": "House",
        },
       ...
]

Regards,
Mihaela
Progress Telerik

[Karthik]

Thanks Mihaela, that worked.

I have another filterable column which needs to take Name/Value pair and show 'Name' but pass 'Value' to api. How do I achieve this? I tried field and value something like below but didn't work. Is there an api for Data method that shows all properties.

.Filterable.DataSource(ds => ds.Read().Data("{ field: 'AccountName', value: 'AccountValue' }"))

[Eyup]

To show the "Name" in the filter menu while passing the "Value" for filtering, the filter data source must return objects with "Text" and "Value" properties. The Kendo Grid filter expects this structure for its filter options.

How to Configure the Filterable Column

columns.Bound(e => e.AccountType)
    .Title("Account Type")
    .Filterable(f => f.Multi(true).Search(true).DataSource(ds => ds
        .Read(read => read
            .Type(HttpVerbs.Get)
            .Url("api/AccountTypeFilters")
        )
    ));

Your API should return a flat array of objects like:

[
    { "Text": "Client", "Value": "0" },
    { "Text": "House", "Value": "1" }
]

• Text: Displayed in the filter menu.
• Value: Used internally for filtering and sent to the server.

Notes on the Data Method

• The .Data() method in the DataSource configuration is used to send additional parameters with the request, not to specify how the filter options are mapped. The filter menu will automatically use the "Text" and "Value" properties for display and filtering.
• There is no built-in API that will show all properties in the filter menu; only "Text" and "Value" are considered for multi-checkbox filters.

If You Need Custom Mapping

If your API returns data in a different shape (for example, nested under a property like "AccountType"), you can use the Schema.Data option to map it:

.Filterable(f => f.Multi(true).Search(true).DataSource(ds => ds
    .Read(read => read.Url("api/AccountTypeFilters"))
    .Schema(schema => schema.Data("AccountType")) // Maps to the array in your response
))

[Karthik]

hi Mihaela, thanks for advise.

I tried 'Text/Value array' in api response as suggested but it didn't work. May be because I am running older versions. I see '[object HTMLInputElement]' as menu items.

Regarding the usage of Schema, it was not supported in my Kendo MVC version.
Kendo.Mvc, Version=2022.1.412.0
Kendo UI js v2018.3.911

Nevertheless, I worked around with just one field in api response. That works. Thanks for the help.

Regards
Karthik

[Mihaela]

Hi Karthik,

It is important to ensure that the version of the referenced Kendo UI scripts (kendo.all.min.js and kendo.aspnetmvc.min.js") and theme file matches the version of the Kendo.Mvc.dll (for example, 2022.1.412):

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.default-ocean-blue.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.1.412/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.1.412/js/kendo.aspnetmvc.min.js"></script>

Would you update the required client-side resources and let me know how the behavior changes at your end?