Prevent resize on one tile

1 Answer 31 Views
TileLayout
Lee
Top achievements
Rank 1
Iron
Iron
Iron
Lee asked on 02 Jun 2022, 03:00 PM

Given the tile layout in this Dojo: https://dojo.telerik.com/AGanihOY/2

How do I prevent resizing tile 1 but allow resizing on tile 2? 

Lee
Top achievements
Rank 1
Iron
Iron
Iron
commented on 07 Jun 2022, 11:23 AM

thanks. I just realized this dojo doesn't work on touch devices. 
Georgi Denchev
Telerik team
commented on 10 Jun 2022, 07:45 AM

Hi, Lee,

You are correct, tile resizing is currently supported only on desktop machines that use a mouse. I'll make sure to update the documentation article as I can see that this information is missing from it. I will also speak to the Dev team to find out of they have any plans regarding mobile support for resizing.

Best Regards,

Georgi

1 Answer, 1 is accepted

Sort by
0
Georgi Denchev
Telerik team
answered on 07 Jun 2022, 08:03 AM

Hi, Lee,

You can use an approach similar to the one about preventing the resizing of the Grid columns.

Solution

Attach an event handler to the start event of the underlying resizable widget:

const resizable = $("#tilelayout").getKendoTileLayout().resizable;

      resizable.bind("start", (e) => {

If the target layout is the second one, prevent the resize operation:

      resizable.bind("start", (e) => {
        if ($(e.currentTarget).parent().is("[data-index='1']")) {
          e.preventDefault();
          setTimeout(function(){
            resizable._stop();
          });
        }
      });

Additional information

The conditional logic might require some tweaking, based on the exact requirement. For example, do you always want the second tile to not be resizable? It doesn't matter if you reorder it, the tile on position 2 should never be allowed to resize. If that is the case, then the above approach will work.

If you wish to target tile "B" in particular, no matter what position it is on, then you would have to identify it in some way. Here's one example:

    <script id="second" type="text/x-kendo-template">
    <h3 data-parent='second'>B</h3>
    </script>

    let isBTile = $(e.currentTarget).prev().find("[data-parent]").data("parent") === "second";

Dojo

https://dojo.telerik.com/@gdenchev/IhiQaTOB 

Let me know if you have any questions.

Best Regards,
Georgi Denchev
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.

Tags
TileLayout
Asked by
Lee
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Georgi Denchev
Telerik team
Share this question
or