DropDown in Grid Toolbar does not appear to initialize

[Michael]

I have a Kendo Grid/Toolbar/Dropdown setup that is mostly inspired by the examples on the demo page.

It's a remote JSON backed grid (works fine), with a dropdown in the toolbar that is also backed by JSON (doesn't work fine).

What happens is the dropdown does not appear to initialize. It's not that it is empty and simply not loading data... but it's not even a kendo dropdown, it just remains as an empty input field.

If I take the exact template code, and javascript, and put it somewhere in an HTML file statically, it works great. Looks great, JSON binds perfectly, etc... but when I apply it to the toolbar using that template property, it just doesn't seem to work.

Here is my code...

Template Code:

<script type="text/x-kendo-template" id="template">

    <div class="toolbar">

        <label class="category-label" for="category">Show products by category:</label>

        <input type="search" id="category" style="width: 230px"></input>

    </div>

</script>

Grid and Dropdown JS:

var baseURL = "/Chargeability/JSON"

var dataSource = new kendo.data.DataSource({

 

    transport: {

 

        read: {

            url: baseURL,

            dataType: "json"

        }

 

    },

    batch: false,

    pageSize: 5,

    serverPaging: true,

    serverSorting: false,

    schema: { data: "ChargeabilityWeeks", total: "TotalCount" }

 

});

 

var grid = $("#grid").kendoGrid({

    dataSource: dataSource,

    scrollable: false,

    sortable: true,

    columns:

    [

        {

            title: 'Name',

            field: 'Name',

            template: '#= Name #'

        },

        {

            title: 'Weekly Requirement',

            field: 'Weekly_req_pct',

            template: '#= kendo.toString(Weekly_req_pct, "p") #'

        },

        {

            title: 'Weekly Actual',

            field: 'Weekly_act_hrs',

            template: '#= Weekly_act_hrs #'

        },

        {

            title: 'Yearly Requirement',

            field: 'Yearly_req_pct',

            template: '#= kendo.toString(Yearly_req_pct, "p") #'

        },

        {

            title: 'Yearly Actual',

            field: 'Yearly_act_pct',

            template: '#= kendo.toString(Yearly_act_pct, "p") #'

        },

    ],

    pageable: true,

 

    toolbar: kendo.template($("#template").html())

 

});

 

console.log(grid.find("#category"));

 

var dropDown = grid.find("#category").kendoDropDownList({

 

    dataTextField: "Name",

    dataValueField: "ID",

    autoBind: true,

    optionLabel: "All",

    dataSource: {

 

        type: "json",

        serverFiltering: false,

        transport: {

            read: '/Chargeability/BU_JSON'

        }

 

    }

 

});

Like I said if I just make some other input field outside of the grid and run this same code, no problem.

I did a test on the find() that is being run inside the grid and the result is NOT null... so... yeah. I'm kind of stuck at that point.

[Rosen]

Hello Michael,

Unfortunately, it is not obvious, from the provided information, what may be the cause for the issue you have described. Therefore, it will be appreciated if you provide a jsFiddle test page in which this behavior can be observed locally.

Also note that jQuery selectors will not return if null or undefined, even if no elements are matched. A more reliable way to check if the result contains elements is to inspect the length property of the returned jQuery object. 

Regards,
Rosen
the Telerik team

[Michael]

length is showing 0 so I guess that's a good sign that the .find isn't working


I'll try to formulate a different query and see if I can get it to go

[Michael]

The problem with the demo code seems to be that the jQuery element returned by .kendoGrid() only includes the table tag of the Grid.

A quick trace of the .html() property of the returned objects reveals only <table> content.

In firefox at minimum, the toolbar div is affixed firmly *outside* of the table, therefore the demo code's suggestion of grid.find() returns nothing, thus the failure to initialize.

I need to figure out how to get a good selector for the toolbar object which is just adjacent to the HTML element that .kendoGrid() returns

[Rosen]

Hello Michael,

The kendoGrid method will return the same element on which it is called in order to preserve the jQuery chaining. Thus, if the grid is instantiated over a table element it will return the table element. In order to get reference to grid's wrapper (most outer) element you may use similar to the following code:

/*...grid initialization here...*/


var grid = $("#grid").data("kendoGrid");
var input = grid.wrapper.find("#category");

All the best,
Rosen
the Telerik team

[Michael]

Thanks,

That worked.