[Solved] How do I populate data into a Kendo UI grid using Nunjucks.js?

[Francis]

I am wondering if its possible to use Nunjucks to iterate through local data that populates into a Kendo UI grid. This is my first time using both Kendo and JS template engines so I am very new to this. Basically, I want to have Nunjucks iterate through my data (in script) and then have it populate into the Kendo grid. I am building this for demo purposes so there is no need to get remote data, now. I am not sure how to accomplish this. Can someone point me to the right direction. Thanks! Here is my code: 

<table id="grid">
    <colgroup>
        <col style="width: 150px" />
        <col style="width: 300px" />
        <col style="width: 120px" />
        <col style="width: 120px" />
        <col style="width: 120px" />
        <col style="width: 120px" />
    </colgroup>
    <thead>
        <tr>
            <th data-field="clientLogo" data-template="<img src='#= clientLogo #' />">Client Logo</th>
            <th data-field="companyName" data-template="<a href='\\#'>#= companyName#</a>">Company Name</th>
            <th data-field="clientID">Client ID</th>
            <th data-field="lastEdited">Last Edited</th>
            <th data-field="lastEditedBy">Last Edited By</th>
            <th data-field="status">Status</th>
        </tr>
    </thead>
</table>
<script>
    //nunjucks to iterate through data below
    var clients = [ { clientLogo: "/images/lowes.png",
                companyName: "Lowe's Home Improvement",
                clientID: 123456,
                lastEdited: "02/15/2016",
                lastEditedBy: "Barbara Johnson",
                status: "In Progress"},
                { clientLogo: "/images/verizon.png",
                companyName: "Verizon Wireless",
                clientID: 123456,
                lastEdited: "02/15/2016",
                lastEditedBy: "Barbara Johnson",
                status: "In Progress"},
                { clientLogo: "/images/mcdonalds.png",
                companyName: "McDonald's Corporation",
                clientID: 123456,
                lastEdited: "02/15/2016",
                lastEditedBy: "Barbara Johnson",
                status: "In Progress"},
                { clientLogo: "/images/att.png",
                companyName: "AT&T Wireless & Network Information",
                clientID: 123456,
                lastEdited: "02/15/2016",
                lastEditedBy: "Barbara Johnson",
                status: "In Progress"},
                { clientLogo: "/images/stjoseph.png",
                companyName: "St Joseph Healthcare System",
                clientID: 123456,
                lastEdited: "02/15/2016",
                lastEditedBy: "Barbara Johnson",
                status: "In Progress"},
                { clientLogo: "/images/proteinbar.png",
                companyName: "Protein Bar",
                clientID: 123456,
                lastEdited: "02/15/2016",
                lastEditedBy: "Barbara Johnson",
                status: "In Progress"},
                { clientLogo: "/images/invision.png",
                companyName: "InVisionApp",
                clientID: 123456,
                lastEdited: "02/15/2016",
                lastEditedBy: "Barbara Johnson",
                status: "In Progress"} ];

// end iteration

    $("#grid").kendoGrid({
        dataSource: clients //inline data - to change to remote data
    });
</script>

[Radoslav]

Hi Francis,

You can place the grid declaration directly in the template for example:

{% block content %}
<table id="grid">
…
</table>
<script>

$("#grid").kendoGrid({
        dataSource: {{ clients }}
    });

</script>
{% endblock %}

In this case you need to pass the clients as a model when evaluating the template string:

nunjucks.renderString(yourTemplate, { clients: [arrayOfClients] });

Also please note that we do not provide support for integration kendo widgets with third party libraries.  This is out of our support scope.

Regards,
Radoslav
Telerik