Kendo UI grid toolbar template Dropdown Error

Question

Reference1 Reference2

I've encountered some other issues prior to getting to this stage and those are detailed in the Referencea link, anyway main problem is after finally getting the dropdown (Reference2) to display it, unfortunately doesn't actually connect to the controller action which should fill it with no obvious answer why.

The only error which seems to indicate anything is:- TypeError: r is undefined kendo.web.min.js Line 13

The present code I'm using for the dropdown is:-

<script type="text/x-kendo-template" id="template">
    <div class="toolbar">
        <label class="category-label" for="external">Show patients by ex:</label>
        <input type="search" id="external" style="width: 230px"></input>
    </div>
</script>

var dropDown = grid.find("#external").kendoDropDownList({
            dataTextField: "ExName",
            dataValueField: "ExId",
            autoBind: false,
            optionLabel: "All",
            dataSource: {
                type: "json",
                severFiltering: true,
                transport: {
                    url: '@Url.Action("_Ex", "Entry")',
                    data: { ignore: Math.random() }
                }
            },
            change: function () {
                var value = this.value();
                if (value) {
                    grid.data("kendoGrid").dataSource.filter({ field: "ExId", operator: "eq", value: parseString(value) });
                } else {
                    grid.data("kendoGrid").dataSource.filter({});
                }
            }
        });



<style scoped="scoped">
    #grid .k-toolbar
    {
        min-height: 27px;
    }
    .external-label
    {
        vertical-align: middle;
        padding-right: .5em;
    }
    #external
    {
        vertical-align: middle;
    }
    .toolbar {
        float: right;
        margin-right: .8em;
    }
</style>

I know the controller action works and it's not that as 1 it's not even called and 2 because I use it on another page but as the main grid within a hierarchy grid.

As ideas or help around this would be much appreciated.

Answer 1

The transport configuration of the datasource on the combobox is incorrect. The only valid value for the type property is 'odata' whereas you specify 'json'. If you want to specify that the datasource transport returns json you need to configure your datasource like this:

  dataSource: {
      serverFiltering: true,
      transport: {                    
          read: {
              url: '@Url.Action("_Ex", "Entry")',
              dataType: 'json'
          }
      },
 }

The dataType property specifies what type of data you're expecting back from the server.

The url property specifies the URI for the remote data.

You can find comprehensive documentation on the datasource API here.