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

2 posts, 0 answers
  1. Francis
    Francis avatar
    10 posts
    Member since:
    Mar 2016

    Posted 11 Mar 2016 Link to this post

    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>

  2. Radoslav
    Admin
    Radoslav avatar
    1566 posts

    Posted 16 Mar 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top