Hi Duy,

Thank you for sharing the use-case you are having.

At this point, dynamically adding/removing containers in the TileLayout is not supported. However, it has been requested and I encourage you to cast your vote for the feature request in our feedback portal below:

• https://feedback.telerik.com/kendo-jquery-ui/1467818-add-remove-support-for-the-tilelayout-component

We monitor the requests regularly and prioritize those with a high number of votes and the potential impact the respective feature will bring.

Regards,
Nikolay
Progress Telerik

Hello Duy,

I could suggest finding the desired element with jQuery and setting its display CSS property to "none", for example:

$("#tilelayout").find(".k-tilelayout-item:first-child").css("display", "none");

You can check the following Dojo I have prepared demonstrating the above:

• https://dojo.telerik.com/IkeHoxob

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

Nikolay, 

you can find first and last child and turn display on/off, how do I find a child using index like child 3 or child 4?

thanks.

$("#tilelayout").find(".k-tilelayout-item:first-child").css("display", "none");

 $("#tilelayout").find(".k-tilelayout-item:last-child").css("display", "none");

Hi Duy,

The items can be located via id and respectively set hidden with jQuery:

var item = $("#tilelayout").find("#" +$("#tilelayout").getKendoTileLayout().items[1].id) //1 is the id of the container
$(item).css("display", "none");

Please check the following Dojo out:

• https://dojo.telerik.com/IkeHoxob/3

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

Hi,

I've been able to achieve a solution that removes and adds an item in the layout. This, however, is not perfect. When you do this, the HTML inside each container will be re-rendered, which is not always ideal. Depending on your situation, this may suffice. Adding a container works in a similar. When adding a new tile container, you need to do is append another Tile Container definition to the "items" array, and then call setOptions.

removeContainer(itemId) {
        var items = this.layout.items;
        var itemToRemove = this.layout.itemsMap[itemId];

        items.splice(items.indexOf(itemToRemove), 1);
        this.layout.setOptions({ containers: items });
    }

addContainer(widthInColumns, heightInRows, headerText, bodyHtml) {
        var items = this.layout.items;

        items.push({
            colSpan: widthInColumns,
            rowSpan: heightInRows,
            header: {
                text: headerText
            },
            bodyTemplate: bodyHtml
        });
        this.layout.setOptions({ containers: items });
    }