Kendo MVVM - data-column template syntax

Question

I am simply trying to put a checkbox in a grid column. Here is my html:

<div id="systemsGrid" data-role="grid"
            data-sortable="true"
            data-scrollable="true"
            data-editable="inline"
            data-selectable="true"
            data-pageable="true"
            data-toolbar="['create']"
            data-bind="source: systems, events: { change: configureSystem }"
            data-auto-bind="true"
            data-columns='[
                { field: "ActiveFlag", title: "Active", width: 25, template: "<input type=\'checkbox\' # if(ActiveFlag == 1){ # checked #} #  />" }
            ]'>
        </div>

I get this error on the "'[" part following data-columns: Validation (HTML5): If this attribute value is enclosed in quotation marks, the quotation marks must match.

And this error on the "\'checkbox\'" part of the html: Validation (HTML5): This attribute name must be followed by an equal (=) sign and a value. If the value is in quotation marks, the quotation marks must match.

What is the correct syntax to accomplish this?

OnaBai OnaBai · Accepted Answer · 2014-08-04T22:10:28

Define it as:

<div id="systemsGrid" data-role="grid"
    data-sortable="true"
    data-scrollable="true"
    data-editable="inline"
    data-selectable="true"
    data-pageable="true"
    data-toolbar="['create']"
    data-bind="source: systems, events: { change: configureSystem }"
    data-auto-bind="true"
    data-columns='[ 
        { field: "ActiveFlag", title: "Active", width: 25, template: "<input type=\"checkbox\" # if (ActiveFlag) {# checked # }# />"  }
    ]'>
</div>

Check it here http://jsfiddle.net/fqLU9/1

Kendo MVVM - data-column template syntax

1 Answers