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