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:
<tableid="grid"> <colgroup> <colstyle="width: 150px"/> <colstyle="width: 300px"/> <colstyle="width: 120px"/> <colstyle="width: 120px"/> <colstyle="width: 120px"/> <colstyle="width: 120px"/> </colgroup> <thead> <tr> <thdata-field="clientLogo"data-template="<img src='#= clientLogo #'/>">Client Logo</th> <thdata-field="companyName"data-template="<a href='\\#'>#= companyName#</a>">Company Name</th> <thdata-field="clientID">Client ID</th> <thdata-field="lastEdited">Last Edited</th> <thdata-field="lastEditedBy">Last Edited By</th> <thdata-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>