This is a migrated thread and some comments may be shown as answers.
Stepper in a Tile Layout
7 Answers 12 Views
This is a migrated thread and some comments may be shown as answers.
Patrick
Top achievements
Rank 1
Patrick asked on 24 Jul 2020, 07:00 PM

Using MVC, I've placed a stepper in a container of a tilelayout with 4 tiles with a colspan of 4.

The colored background bar is contained to just the first "cell" on load.  If I resize the page the stepper resizes to fit the entire width of the spanned container.

I went through the events for the tile lay out and the stepper, but I found nothing that seems to facilitate the ability to capture and resize the stepper when the tile layout has finished loading using jquery.

 

 

 

 

 

 

 

 

 

 

 

7 Answers, 1 is accepted

Sort by
0
Patrick
Top achievements
Rank 1
answered on 27 Jul 2020, 01:51 PM

Not happy with this solution but for the time being this is what I have.

function resetObjects() {
    if ($("#stpHorizontalProgressBar").length) {
        $("#stpHorizontalProgressBar").data("kendoStepper").resize();
    }
}
 
$(document).ready(function () {
    resetObjects();
    setInterval("resetObjects()", 1000);
});
0
Veselin Tsvetanov
Telerik team
answered on 28 Jul 2020, 11:25 AM

Hi Patrick,

The issue is present because the Stepper has been initialized in a hidden container or a container with reduced width. You have correctly used the resize() method to refresh the widget rendering. Nevertheless, as you have correctly noted, using a timeout function to call the resize() method of the Stepper is not an ideal solution. Can you prepare and send me an isolated sample/Dojo demonstrating the issue in question? This way I will be able to review the case locally and provide you with an appropriate alternative (if present).

Regards,
Veselin Tsvetanov
Progress Telerik

0
Patrick
Top achievements
Rank 1
answered on 28 Jul 2020, 12:32 PM

I created a dojo for the jquery version.

 

http://dojo.telerik.com/iMehagAP/7

The issue does not occur when done using only jquery.  I'm currently trying to do this in MVC. 

This has given me a better insight on how it works.... with this understanding I believe i need to do a mixed solution... I'll give it a try and post my results.

 

 

 

0
Patrick
Top achievements
Rank 1
answered on 28 Jul 2020, 01:00 PM

I updated the dojo with additional tiles to make sure it wasn't simply a fluke and it still worked as desired.

http://dojo.telerik.com/iMehagAP/8

In my code I made some significant changes.  At first on the tile with the stepper i had created a bodytemplateid and created a kendo template script which contained the stepper.

instead, I updated the container item to a bodytemplate and entered a simple div:

c.Add().Header(h => h.Text("Progress")).BodyTemplate("<div> id='tilProgress'>test</div>").ColSpan(4).RowSpan(1);

 

I then added a script further down the page (the location of the script tag in relation to the MVC tile layout control is important)

$(document).ready(function () {
        var initStepper = function () {
            var orientation = "Horizontal"
            $("#tilProgress").kendoStepper({
                orientation: orientation, steps: [
                { label: "Item 1", selected: true },
                { label: "Item 2" },
                { label: "Item 3" },
                { label: "Item 4" },
                { label: "Item 5" },
                { label: "Item 6" }
                ]
            }).data("kendoStepper");
        };
        initStepper();
    });

 

It seems that when I try to embed the stepper in the tile layout via a template, it does not wait for the tile layout to fully initialize before placing the stepper.  by doing it in the above fashion, it allows the tile to finish loading, and then builds the stepper correctly.

 

I would like a fully MVC solution, but this works for me.

0
Veselin Tsvetanov
Telerik team
answered on 30 Jul 2020, 12:20 PM

Hello Patrick,

The approach that you have followed is indeed appropriate. If the Stepper gets ritualized after the TileLayout has finished rendering, the size of its ProgressBar will be properly assigned.

Regards,
Veselin Tsvetanov
Progress Telerik

0
Scot
Top achievements
Rank 1
answered on 11 Aug 2020, 02:51 PM
Did you find a solution for this? I'm unable to get a start x and and end x from the event.
0
Veselin Tsvetanov
Telerik team
answered on 13 Aug 2020, 06:31 AM

Hi Scot,

May I ask you to explain how your question relates to the initial topic of the current thread ("Stepper in a Tile Layout")? What do you mean by "I'm unable to get a start x and and end x from the event."?

Regards,
Veselin Tsvetanov
Progress Telerik

Asked by
Patrick
Top achievements
Rank 1
Answers by
Patrick
Top achievements
Rank 1
Veselin Tsvetanov
Telerik team
Scot
Top achievements
Rank 1
Share this question
or