or
2 answers
385 views
Requirements:
We have to create a Kendo Ui JQuery Wizard with dynamic number of steps. We want to develop the registration page exactly like:
But it has to be in Kendo UI JQuery Wizard. Can you please guide me how to achieve this. I have tried the following code but it is not working.
Please see the attached code.
Thank you,
Gururaj
0 answers
511 views
Hi,
I need to extend the kendo form dynamically. I created a dojo for demonstration:
https://dojo.telerik.com/IDElitox
In the first form, user should be able to click "Add" button and create a new pair of field at the bottom of the form, which shouldn't affect previously filled fields. So instead of 1, the user can submit more than 1 header pair.
Is it possible? How can I do that?
The number of inputs is ambiguous so I didn't think of any better solution. If there is a dedicated tool for this purpose, please let me know.
Regards,
Umutcan
0 answers
74 views
I have a kendo Dialog with an embedded wizard, populated by ajax. On the first invocation of the dialog with the wizard, everything works fine. Then it gets closed, I empty the wizard div on dialog close. On the second invocation of the dialog, the activate method on the wizard starts getting called multiple times on the 'Next' button click, always at least once with the wrong step, the last one. Is there a way to clear out the event handler for the wizard each time the dialog starts up?
Thanks.
1 answer
1.2K+ views
I've been searching for a while now and I can't find any resources on this. Enabling or disabling a button initially can be done through the button config: https://docs.telerik.com/kendo-ui/api/javascript/ui/wizard/configuration/steps.buttons.enabled
But there seems to be no documentation on how to programmatically enable or disable these buttons. What's the best way of doing so?
1 answer
330 views
I have a grid that has some data, and when I press an "edit" button, I want a wizard with forms to edit the contents over multiple pages. Because of all the binding, I figured I could re-use the same wizard and popup and just reload the data inside. This works pretty well until I add validation. For some reason setting model data results in the value being NULL inside the model.
const model = discountWizard.steps()[0].form.editable.options.model;
model.set("requiredField", "required"); // required: true in form
model.set("optionalField", "optional"); // required: false in form
// results in
dirtyFields: Object { requiredField: false, optionalField: true }
optionalField: "optional"
requiredField: nullI've added a reproducer in Dojo: https://dojo.telerik.com/eQoGApIL
How can I fix this?
On a sidenote, the reset button doesn't seem to do anything by default, is that intended?
Neli
Telerik team
answered
on
03 Sep 2021
1 answer
564 views
Hello!
Kendo Wizard always validates the step forms when navigating between them, even if you press "Previous".
This can be seen in the official sample here:
https://demos.telerik.com/kendo-ui/wizard/index
If you are on Step 2 and press "Previous", you are required to input all data before going back to Step 1.
How can I change this? I want to validate the current step form content only if you press "Next", and allow the user to go back without inserting data if he presses "Previous".
Thanks!
Patrick | Technical Support Engineer, Senior
Telerik team
answered
on
24 Aug 2021
1 answer
611 views
Sorry My Title maybe something went wrong. It means. After click done, deleting all values and returning it to step 1 to perform new action.
This code I have taken from https://demos.telerik.com/kendo-ui/wizard/ajax
<div id="example">
<div class="demo-section k-content wide">
<div id="wizard"></div>
</div>
<script>
$("#wizard").kendoWizard({
loadOnDemand: true,
reloadOnSelect: false,
steps: [
{
title: "Welcome",
buttons: ["next"],
contentUrl: "../content/web/wizard/ajax/ajaxContent1.html"
}, {
title: "Attendee Details",
contentUrl: "../content/web/wizard/ajax/ajaxContent2.html",
}, {
title: "Agenda",
buttons: ["previous", "next"],
contentUrl: "../content/web/wizard/ajax/ajaxContent3.html",
}, {
title: "Finalize",
buttons: ["previous", "done"],
contentUrl: "../content/web/wizard/ajax/ajaxContent4.html"
},
],
done: function (e) {
e.preventDefault();
var form = $('#attendeeDetails').getKendoForm();
var talkDDLValue = $("#talk").data("kendoDropDownList").value();
var workshopDDLValue = $("#workshop").data("kendoDropDownList").value();
if (!form.validate()) {
e.sender.stepper.steps()[1].setValid(false);
kendo.alert("Please complete registration form");
e.sender.select(1);
} else if (talkDDLValue == "" || workshopDDLValue == "") {
e.sender.stepper.steps()[1].setValid(true);
e.sender.stepper.steps()[2].setValid(false);
kendo.alert("Please select the talk and workshop you want to subscribe for");
e.sender.select(2);
}
else {
if (e.sender.stepper.steps()[1].options.error) {
e.sender.stepper.steps()[1].setValid(true);
e.sender.stepper.steps()[2].setValid(true);
}
kendo.alert("Thank you for registering! Registration details will be sent to your email.");
}
},
select: function (e) {
if (e.step.options.index == 3) {
updateSelection(e);
}
},
contentLoad: function (e) {
if (e.step.options.index == 3) {
updateSelection(e);
}
},
reset: function () {
var form = $('#attendeeDetails').getKendoForm();
if (form) {
form.clear();
}
}
});
function updateSelection(e) {
var selectedTalk = e.sender.wrapper.find('#talk').getKendoDropDownList().dataItem();
var selectedWorkshop = e.sender.wrapper.find('#workshop').getKendoDropDownList().dataItem();
$('#selectedTalk').html(selectedTalk.id === '' ? '' : selectedTalk.title);
$('#selectedWorkshop').html(selectedWorkshop.id === '' ? '' : selectedWorkshop.title);
}
</script>
<style>
.wizardContainer {
display: flex;
height: 250px;
justify-content: center;
align-items: center;
}
</style>
</div>
Aleksandar
Telerik team
answered
on
05 May 2021
1 answer
1.2K+ views
Hello, I have some problem when use Kendo Upload + Kendo Wizard.
Specifically I'm doing a Kendo Wizard with an .html file.
In the .html file of step 1, I used Kendo Upload to Upload Image.
Then It will show up in the .html file of step 2. But now I can only show in step 1 and I don't know how to show it in step 2
Please help me, thanks!!!
My Kendo Wizard Code:
$("#wizard").kendoWizard({
loadOnDemand: true,
reloadOnSelect: false,
steps: [
{
title: "Upload",
icon: "upload",
successIcon: "check",
buttons: ["next"],
contentUrl: "./step1.html"
}, {
title: "Settings",
icon: "gear",
successIcon: "check",
contentUrl: "./step2.html"
}, {
title: "Check All",
icon: "preview",
successIcon: "check",
buttons: ["previous", "next"],
contentUrl: "../content/web/wizard/ajax/ajaxContent4.html"
}, {
title: "Save",
icon: "save",
successIcon: "check",
buttons: ["previous", "done"],
contentUrl: "../content/web/wizard/ajax/ajaxContent4.html"
},
],
done: function (e) {
e.preventDefault();
var form = $("form").getKendoForm();
var zxy = $("#title").val();
console.log(zxy);
if (e.sender.stepper.steps()[1].options.error) {
e.sender.stepper.steps()[1].setValid(true);
e.sender.stepper.steps()[2].setValid(true);
}
kendo.alert("Thank you for registering!");
},
reset: function () {
var form = $("form").getKendoForm();
if (form) {
form.clear();
}
}
});My step1 is Kendo Upload
<inputname="files"id="files"type="file"/>
$("#files").kendoUpload({
async: {
chunkSize: 11000,// bytes
saveUrl: "https://demos.telerik.com/kendo-ui/upload/chunksave",
removeUrl: "https://demos.telerik.com/kendo-ui/upload/remove",
autoUpload: true
},
validation: {
allowedExtensions: [".jpg", ".jpeg", ".png", ".bmp", ".gif"]
},
success: onSuccess,
showFileList: true,
});
function onSuccess(e) {
if (e.operation == "upload") {
for (var i = 0; i < e.files.length; i++) {
var file = e.files[i].rawFile;
if (file) {
var reader = new FileReader();
reader.onloadend = function () {
$("<div class='product'><img src=" + this.result + " /></div>").appendTo($("#products"));
};
reader.readAsDataURL(file);
}
}
}
}My step 2 is form, I want to show the image uploaded in step 1 above the form. And I'm having trouble here
<form>
<div class="wrapper">
<div id="products"></div>
</div>
<input type="text" id="title" name="title" class="k-textbox" />
</form>Demo:
Step 1: Upload (Image step1.png)
Step2: Input Information (Image step2.png)
4 answers
181 views
I want to create a wizard from an existing form that includes several kendo widgets. The form and its widgets work fine until I initiate the wizard. The first step of the wizard includes a country dropdown and that stops working as soon as the wizard has been initialised. The dropdown doesn't respond to any clicks, nor are there any errors displayed in the browser console. One of the checkboxes should trigger a view model method, but that's not working either.
The form is used to add data to the database. The same form is used to update the database (without needing a wizard) and works as intended when updating.
Help?
Regards,
Henk
