Progress® Kendo UI® for jQuery Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 26 Feb 2021 18:04 by ADMIN
Release 2021.R1
Ron
Created on: 19 May 2020 09:09
Category: TileLayout
Type: Feature Request
40
Add / remove support for the TileLayout component
I would like to see the ability to dynamically add and remove items for the TileLayout component, ideally using drag & drop. My use case would be to have a TileLayout dashboard area to which I would like to drag & drop new items from a side toolbar. Additionally items should be removable from the dashboard area.
15 comments
ADMIN
Tsvetomir
Posted on: 26 Feb 2021 18:04

Hi Jack,

If there is anything specific that you would like to see when resizing or reordering on a mobile device, please share it in the feedback portal dedicated for responsiveness:

https://feedback.telerik.com/kendo-jquery-ui/1497744-resizing-for-tilelayout-on-mobile

As the current thread has diverged from the initial idea - add/remove support. It would be great if we could keep the threads concise. 

 

Best regards,
Tsvetomir
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/.

Jack
Posted on: 20 Feb 2021 18:01

It is resizing with the browser because it is based on a bootstrap responsive grid.

Resize your browser at tablet size and phone size and see how it behaves.

ADMIN
Alex Hajigeorgieva
Posted on: 22 Dec 2020 11:35

Hello,  Jacques,

The example you have sent looks exactly like our Sortable panels demo, I do not see any resizing options:

https://demos.telerik.com/kendo-ui/sortable/sortable-panels

For the MVVM bindings, thank you for the Dojo, I will address this with the developer who is currently working on the method so we can have a solution which involves MVVM templates as well.

Thank you very much for bringing this to our attention and clarifying the use case.

Kind Regards,
Alex Hajigeorgieva
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/.

Jack
Posted on: 15 Dec 2020 11:22

Alex,

As far as my comment regarding resizing is concerned, look at https://www.kidoju.com/en/s/5f9ab7405bd2d0012eb571f9 which is developed with Kendo UI. It does not use TileLayout. Move the panels around. Resize the window to mobile phone size and check the responsiveness using a bootstrap grid.

I wish I could replace my layout solution with TileLayout but in the current state of the widget, it is not suitable.

Jacques 

Jack
Posted on: 15 Dec 2020 11:14

Hi, Alex

Check https://dojo.telerik.com/ohUcoter

1) First change the values in the textboxes and see how first and second change with MVVM

2) Try to add or remove a tile: all bindings are lost because of setOptions (this is what I mean by stating below "using setOptions as shown below is not ideal with MVVM bindings").

Jacques

ADMIN
Alex Hajigeorgieva
Posted on: 15 Dec 2020 10:44

Hi, Jack,

I am not entirely certain what is the expected configuration.

Are you referring to similar to the following:

// HTML
'bodyTemplate': viewModel.first

// model
first:  kendo.template($('#first').html()),

https://dojo.telerik.com/@bubblemaster/EKOmETOK

If not, please share a runnable example with the problematic behaviour so we can take it into account whilst we are working on this item.

Kind Regards,
Alex Hajigeorgieva
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/.

Jack
Posted on: 08 Dec 2020 18:39

Hello Alex Hajigeorgieva

Bind the content of tiles (that is A and B) in your example, not the button click event.

Consider form fields in your tiles (possibly with an edit button in the header).

Then if you want to add/remove tiles things get tricky.

Jack


ADMIN
Alex Hajigeorgieva
Posted on: 03 Dec 2020 10:49

Hello, Jack,

I created a separate feature request for resizing on mobiles here:

https://feedback.telerik.com/kendo-jquery-ui/1497744-resizing-for-tilelayout-on-mobile

In regards to the second point, can you please share a specific scenario in which you have encountered an issue with MVVM and setOptions(). I created this MVVM example using the same methods as shown below and they seem to work well:

https://dojo.telerik.com/OWaTADAx

Look forward to hearing back from you.

Kind Regards,
Alex Hajigeorgieva
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/.

Jack
Posted on: 26 Nov 2020 11:33

Ideally also:

  1. layout should use a responsive grid to resize properly on mobile devices, and
  2. there should be a persistence mechanism to load/save layout as user preferences (using setOptions as shown below is not ideal with MVVM bindings)
ADMIN
Alex Hajigeorgieva
Posted on: 18 Nov 2020 14:53

Hi, Duy,

Thank you for getting in touch.

I modified the function by removing the order property from the tiles before passing them to the setOptions() method:

https://dojo.telerik.com/uBEhEwag/2

 $("#remove").click(function (e) {
              e.preventDefault();
              var layout = $("#tilelayout").getKendoTileLayout();
              var options = layout.getOptions();
              if(options.containers.length){
                options.containers.splice(1,1);
                var containers = options.containers.map(function(container){
                	delete container.order;
                        return container;
                });
                layout.setOptions({containers: containers});
              }
            });

 

Give this a try and let me know in case you see any issues with it. We did discover a bug related with the ordering and setOptions() so it could be related to it. The bug is now fixed since 2020 R2 SP1. 

Let us know what your findings are.

Regards,
Alex Hajigeorgieva
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/.

duy
Posted on: 12 Nov 2020 08:26

Hi Alex Hajigeorgieva !

when I using the example of you to add/remove item in TileLayout. I have a error when using 

"splice array" to remove item from TileLayout.

 

Here is error.

I have tileLayout with 4 item:

step 1: remove item 2nd from tileLayout. In TileLayout contains 3 item.

step 2: drag item 3 to item 2. with reorderable: true

Error : "kendo.all.js:171577 Uncaught TypeError: Cannot read property 'order' of undefined".

Please check it in dojo link.

https://dojo.telerik.com/uGIgukOC/2

Attached Files:
ADMIN
Alex Hajigeorgieva
Posted on: 23 Sep 2020 09:27

Hi,

Currently, to add/remove a tile dynamically, you can use the setOptions() method. In one case, you push the new tile in the containers array and in the other, splice the array

https://dojo.telerik.com/@bubblemaster/UgapUXoQ/4

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

duy
Posted on: 21 Aug 2020 03:16
remove function ??
Greg
Posted on: 28 May 2020 14:03

Hi Ron, I too put in a ticket for this.  I have code that adds an item. I took it from kendo.all.js  _initContainers function.  I am currently working on removing it and will post something once I work it out,  This is not production code so excuse the mess!

 

 var t2 = $("#tilelayout").data("kendoTileLayout")
        var containerSettings = {
           
            bodyTemplate: $("#first").html(),
            header: { text: 'Some Header' },
            order :2,
            colSpan: 1,
            rowSpan: 1,
           

        }
        var id = kendo.guid();
        var container = $('<div></div>').addClass("k-tilelayout-item k-card").attr('id', id);
        var headerSettings = containerSettings.header;

         if (headerSettings && (headerSettings.template || headerSettings.text)) {
            header = $('<div></div>').addClass("k-tilelayout-item-header k-card-header ");
            if (t2.options.reorderable) { //that.options.reorderable
                header.addClass("k-cursor-grab");
            }
            if (headerSettings.text) {
                headerContent = '<h5 class=\'' + "k-card-title" + '\'>' + headerSettings.text + '</h5> <span class="removeItem glyphicon glyphicon-remove-circle"></span>';
            }
            header.append(headerContent || kendo.template(headerSettings.template)({}));
            header.appendTo(container);
        }
        body = $('<div></div>').addClass("k-tilelayout-item-body k-card-body");
        body.append(kendo.template(containerSettings.bodyTemplate)({}));
        body.appendTo(container);
        container.appendTo(t2.element); //that.element
        t2._addContainer(container, containerSettings, 2, id); //that._addContainer(container, containerSettings, i, id);
ADMIN
Preslav
Posted on: 25 May 2020 12:03

Hello Ron,

Thank you for submitting this feature request. If it gets enough votes from our community, we will consider implementing it.

 

Regards,
Preslav
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Create an account Log In
View
Type
Status
Category