Grid using data-attribute initialization

[Robert]

I'm having trouble using data-attribute initialization for the grid.

I created a jsbin using the KendoUI web sample code, with "dataSource", "columns", and "pageable" moved to global var's.
http://jsbin.com/uwicus/1/

As you can see in the jsbin, the grid works correctly when initialized by

<script>
    $(document).ready(function() {
        $("#grid").kendoGrid({
            dataSource: ds,
            height: 430,
            scrollable: true,
            sortable: true,
            filterable: true,
            pageable: pageableProperties,
            columns: columnList
        });
    });
</script>

However, when I switch to the equivalent data-attribute initialization, it no longer works correctly

<div
    id="grid"
    data-role="grid"
    data-source="ds"
    data-height="430"
    data-scrollable="true"
    data-sortable="true"
    data-filterable="true"
    data-pageable="pageableProperties"
    data-columns="columnList"
/>

Please let me know what I'm missing here.  Thx.

[Alexander Valchev]

Hi Robert,

In order to trigger the declarative initialization, you should use kendo.init or kendo.bind

• http://docs.kendoui.com/api/framework/kendo#methods-init
• http://docs.kendoui.com/api/framework/kendo#methods-bind

In addition, the data-columns/data-pageable attributes cannot accept variable names. They should contain the configuration options itself. For example:

data-columns='["ProductName", { "field": "UnitPrice", "title": "Unit Price", "format": "{0:c}", "width": "130px" }]'

I hope this will help.

Regards,
Alexander Valchev
Telerik