Search code examples
javascriptjquerykendo-uikendo-template

Javascript in Kendo UI Template


How can I use regular javascript, specifically a foreach, in a kendo template?

I have:

<script id="partsTemplate" type="text/x-kendo-template">
    <div class="k-grid k-widget k-secondary">
        <table>
            <colgroup>
                <col style="width:70px">
                <col style="width:70px">
                <col style="width:120px">
                <col>
                <col style="width:30px">
            </colgroup>
            <thead class="k-grid-header">
            <tr>
                <th role="columnheader" class="k-header"><b>Quantity</b></th>
                <th role="columnheader" class="k-header"><b>Type</b></th>
                <th role="columnheader" class="k-header"><b>Manufacturer</b></th>
                <th role="columnheader" class="k-header"><b>Part</b></th>
                <th role="columnheader" class="k-header"><img src="/laravel/public/images/icons/magnifier_zoom_in.png"></th>
            </tr>
            </thead>
            <tbody>
            #for(var i=0, i<10, i++){#
                <tr><td>5</td><td>5</td><td>5</td><td>5</td></tr>
            # } #
            </tbody>
        </table>
    </div>
</script>

However Kendo is throwing an invalid template error.


Solution

  • Your for loop syntax isn't correct; you have to use semicolons:

    # for (var i=0; i<10; i++) { #
        <tr><td>5</td><td>5</td><td>5</td><td>5</td></tr>
    # } #