Configuring steps server-side

[Aleks]

Is there a way to configure steps server-side, like you can with the grid via LoadSettings?

If not, how do you configure the steps dynamically?

For example if the configuration of the steps comes from a database?

[Stoyan]

Hello, Aleks,
Thank you for your inquiry.

The .LoadSettings configuration method in the Grid configures its columns. Since the Stepper Component doesn't have columns and is intended to visualize progress, I am unsure what kind of configuration you are look to apply.

That being said the Wizard steps can be configured server-side. This is a link to it's API, which exposes the available configuration methods.

Please consider sharing more details about your scenario, if the above doesn't prove helpful. 

Regards,
Stoyan
Progress Telerik

[Aleks]

Hi Stoyan.

I'm aware that the LoadSettings method is for loading columns into a grid and that the Wizard doesn't have columns; I was using it as an example of the ability to supply the configuration at runtime.

Using LoadSettings with a grid, one can dynamically create and configure columns at runtime and supply them to the grid definition as an enumerable. This means you don't have to hard code your columns and column settings into the grid definition at design-time.

For the wizard, one or more steps (and associated configuration) are added to the wizard defintion at design-time via the WizardStepFactory.

What I'm asking is... is there a way to create and supply the number, content and configuration of steps from the server at runtime, like columns can be for the grid?

I had a look at the documentation you suggested and it's not immediately obvious which method would help achieve this.

[Stoyan]

Hi Aleks,

Thank you for the reply and the comprehensive explanation.

I am currently working on a solution. However I am going to need some additional time to provide one. Once I find a solution I will get back to you as soon as possible.

Thank you in advance for your patience.

Regards,
Stoyan
Progress Telerik

[Stoyan]

Hi Aleks,
Thank you for your patience.

It is possible to create a List of steps in the Controller and pass it to the View with ViewData. You can use the Kendo.Mvc.UI.WizardStep or define your own model.

 public IActionResult Index()
        {
            var steps = new List<Kendo.Mvc.UI.WizardStep>()
            {
                new Kendo.Mvc.UI.WizardStep
                {
                    Title = "Some title",
                    Content = "Conteeent"
                },
                new Kendo.Mvc.UI.WizardStep
                {
                    Title = "A logical next step",
                    Content = "Supreme content"
                }

            };

            ViewData["Steps"] = steps;
            return View();
        }

Then in the View

1. get the ViewData sent by the controller

   var model = (List<Kendo.Mvc.UI.WizardStep>)ViewData["Steps"];

2. iterate the List and create a new Step in Wizard for each item in the list

    @(Html.Kendo().Wizard()
                           .Name("wizard")
                           .Events(ev => ev.Done("onDone"))
                           .Tag("form")
                           .HtmlAttributes(new { @novalidate = "" })
                           .Steps(s =>
                           {
                               foreach (Kendo.Mvc.UI.WizardStep step in model)
                               {
                                   s.Add().Title(step.Title).Content(step.Content);
                               }
                           })
   
       )

I have applied the above in the attached project. Let me know, if you have further questions.

Regards,
Stoyan
Progress Telerik