This is a migrated thread and some comments may be shown as answers.

Wizard with Upload Component

1 Answer 22 Views
Wizard
This is a migrated thread and some comments may be shown as answers.
Tobias
Top achievements
Rank 1
Tobias asked on 05 Feb 2021, 07:39 AM

Hello,

is it possible to Add the Upload Component in the Wizard. I tried it by myself but if i upload a file i get two files. My Issue is the Same like this:

https://stackoverflow.com/questions/54467957/kendo-upload-duplicating-file-after-initial-file-selection

Can Somebody post a code snippet?

 

Here is my test:

 

<div id="wizard">
    <div>
        <h1>Upload Labeling File</h1>
        @(Html.Kendo().Upload()
            .Name("files")
            .Async(a=> a.SaveUrl("./Masterdata/LabelExport?handler=Save")
            .RemoveUrl("./Masterdata/LabelExport?handler=Save")
            )
            .Validation(validation => validation.AllowedExtensions(new string[] { ".json" }))
            .Validation(validation => validation.MaxFileSize(2000000))
            )
 
            <h3>Click "Next" </h3>
    </div>
        <div>
            <h1>Personal data</h1>
            <form class="k-form">
                <div class="k-form-container">
 
                    <div class="k-form-field">
                        <label>Name: <input type="text" id="drop"></label>
                    </div>
                    <div class="k-form-field">
                        <label>Surname: <input type="text"></label>
                    </div>
                </div>
            </form>
        </div>
        <div>
            <h1>Contacts data</h1>
            <form class="k-form">
                <div class="k-form-container">
                    <div class="k-form-field">
                        <label>Telephone: <input type="text"></label>
                    </div>
                    <div class="k-form-field">
                        <label>Mail: <input type="text"></label>
                    </div>
                </div>
            </form>
        </div>
    </div>
 
    <script>
        $("#wizard").kendoWizard({
            steps: [{
                title: "Welcome",
            }, {
                title: "Personal Details",
            }, {
                title: "Contact Details"
            }]
        });
    </script>

 

1 Answer, 1 is accepted

Sort by
0
Misho
Telerik team
answered on 09 Feb 2021, 12:38 PM

Hi,

Based on the information you have provided about your setup it is notable that the wizard component is initialized through the jQuery initialization https://docs.telerik.com/kendo-ui/controls/navigation/wizard/overview . On the other hand for the Upload widget the HTML helpers are used: https://docs.telerik.com/aspnet-core/html-helpers/overview 

What I suggest you is to try to make the implementation more consistent by using only the jQuery or HTML helpers only in your project.

What you could try is also to apply Deffered initialization of Kendo Upload Widget: https://docs.telerik.com/aspnet-core/getting-started/helper-basics/fundamentals#deferred-initialization 

In addition you could consider initializing the widgets in the document.ready event and see how the behavior changes.

I hope this helps.

Please don't hesitate to contact us again if a specific issue pops up or in case you have other feedback or questions related to Telerik  components.

Looking forward to your feedback.

Best Regards,
Misho
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/.

Tags
Wizard
Asked by
Tobias
Top achievements
Rank 1
Answers by
Misho
Telerik team
Share this question
or