Stepper in a Tile Layout

[Patrick]

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.

 

 

 

 

 

 

 

 

 

 

 

[Patrick]

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

[Veselin Tsvetanov]

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

[Patrick]

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.

 

 

 

[Patrick]

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.

[Veselin Tsvetanov]

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

[Scot]

Did you find a solution for this? I'm unable to get a start x and and end x from the event.

[Veselin Tsvetanov]

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