4 Answers, 1 is accepted
Hello,
This exception is related to the Kendo UI js files not being loaded properly. See the following dojo example, in which the TileLayout works as expected: https://dojo.telerik.com/uZihokuF It demonstrates how to properly load the kendo.all.min.js file.
We would advise going through the Getting Started documentation, and specifically the Adding the Required JavaScript and CSS Files section: https://docs.telerik.com/kendo-ui/intro/first-steps#1-adding-the-required-javascript-and-css-files
The kendo.all.min.js file should be added after the jQuery script file and jQuery should be loaded only once on the page. jQuery and the Kendo UI js files must be added to the <head> element of the page.
Give this a try and let us know in case you still get the exception.
Regards,
Ivan Danchev
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Veteran
can we load kendo grid in tile layout ?
<script id="Accomp-grid-template" type="text/x-kendo-template">
<div id="Accomplishmentsgrid" style="height:100%;"></div>
</script>
i have given above code in html and binded datasource to Grid Id.
colSpan: 2,
rowspan: 1,
header: {
text: "Accomplishments"
},
bodyTemplate: kendo.template($("#Accomp-grid-template").html())
},
though data is binding to grid but not displaying in Tile layout
Hello Kongal,
Most likely the colSpan and rowSpan values are too small and the Grid is only partially visible. Here's the dojo modified to show a Grid in one of the tiles: https://dojo.telerik.com/OcOzeYOz
Note that colSpan and rowSpan for the second tile are set to 3.
Regards,
Ivan Danchev
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Correct me if I am wrong, here is my I understanding of what you want to do:
You need the items in a List to evenly stretch horizontally occupying 100% width of the List. So if there's only 1 item, it occupies 100% width of the List. If there's an item too many (i.e. all items must be resized below their minWidth), the last item is moved to the next row.
Here's what you can achieve with Seo Group Buy
You can set columnWidth="{yourItemRendererMinWidth}" and columnAlign="justifyUsingWidth". This makes your TileLayout divide its rows evenly into columns with minimum width as yourItemRendererMinWidth. If a column exceeds List container's right edge, it is transferred to the next row, while all the previous columns in the row stretch to container's right edge.
However, there will be empty columns on the row (e.g. if there're 2 items with minWidth=100, and your List's width is 300, there will be one empty column). You'll have to programmatically adjust columnWidth or requestedColumnCount on your TileLayout if you have too few items.