How add/remove item dynamic in Tilelayout ~

[duy]

Hi !

 

I'm using Kendo TileLayout in Jquery. When I create Tilelayout.

 

I want add or remove item dynamic at runtime, but I don't find way to do it.

 

Please help me do it

 

Many thanks !

[Nikolay]

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

[Hung]

If we can not add/remove, is there a why we can hide/show a container?

[Nikolay]

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

[duy]

you know "dynamic" ?????

i don't like create 100 items if i need 50 items or 20 items or 10 items.

How many items to enough at runtime ????

[Hung]

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");

 

[Nikolay]

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

[Timothy]

    

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 });
    }

[Nikolay]

Hi Timothy,

Indeed, adding and removing tiles depends on the setOptions() method which re-renders the whole TileLayout. For the time being this is how the widget works.

Regards,

Nikolay