Questions on Kendo UI for jQuery Forum

1 answer

41 views

Some AutoCompletes in Wizard in Grid Edit Popup not working

I've got a grid that uses a Kendo Wizard in the grid edit popup window. The first step in the wizard has 3 AutoComplete controls (among other controls). The first 2 AutoCompletes do not save the value selected back to the model and grid, but the 3rd one does and they're all configured exactly the same. The code was working before we upgraded to 2024.3.806. Are there breaking changes for the wizard or AutoComplete in this release? A demo for this kind of scenario would be helpful because I inherited this code, and I'm not even sure if it was done correctly. Here is a sample of the js that defines the grid and the wizard (in the grid edit method):

$gridDiv.kendoGrid({
autoBind: true,
columns: [
{
field: "DealNumber",
title: "Deal Number",
filterable: {
extra: false,
operators: {
string: { contains: "contains" }
}
},
sortable: true,
template: 'dealUrl',
editable: () => false
},
{
field: "CustomerName",
title: Customer Name",
filterable: {
extra: false,
operators: {
string: { contains: "contains" }
}
},
sortable: true
},
{
field: "SalesPersonName",
title: "Sales Person",
filterable: {
extra: false,
operators: {
string: { contains: "contains" }
}
},
sortable: true
},
{
field: "CreatedDate",
type: "date",
title: "Created Date",
sortable: true,
filterable: true,
format: "{0: M/d/yyyy}",
width: 100,
editable: function () { return false; }
}
],
editable: {
mode: "popup",
window: {
title: "Add/Edit",
width: "500px"
}
},
edit: function (e) {
const popupWindow = e.container.data("kendoWindow");
popupWindow.center();

let model = e.model;

$(e.container).kendoWizard({
pager: true,
done: function (e) {
e.preventDefault();

$gridDiv.dataSource.sync();

$($(".k-popup-edit-form")[0]).data("kendoWindow").close();
},
reset: function (e) {
e.preventDefault();

$gridDiv.cancelChanges();

$($(".k-popup-edit-form")[0]).data("kendoWindow").close();
},
steps: [
{
title: "Sale Info",
buttons: [{
name: "next",
primary: true,
},
{
name: "reset",
text: "Cancel"
}],
form: {
id: "page1",
orientation: "vertical",
formData: model,
items: [

{
field: "CustomerName",
title: "Customer Name",
editor: "AutoComplete",
editorOptions: {
dataSource: {
serverFiltering: true,
transport: {
read: {
url: "/Customer/Search",
dataType: "json",
type: "POST"
},
parameterMap: (options, operation) => {
return {
text: (options.filter.filters[0] !== void 0) ?
options.filter.filters[0].value :
null
};
}
}
},
dataTextField: "FullName",
minLength: 3,
highlightFirst: true,
suggest: true,
valuePrimitive: true,
select: (e) => {
model.set("CustomerId", e.dataItem.Id);
},
enforceMinLength: true,
filter: 'contains'
}

},
{
field: "CustomerId",
title: "Customer Id",
},
{
field: "SalesPersonName",
title: "Sales Person",
editor: "AutoComplete",
editorOptions: {
dataSource: {
serverFiltering: true,
transport: {
read: {
url: "/SalesPerson/Search",
dataType: "json",
type: "POST"
},
parameterMap: (options, operation) => {
return {
text: (options.filter.filters[0] !== void 0) ?
options.filter.filters[0].value :
null
};
}
}
},
dataTextField: "FullName",
template: '#: data.FullName #',
minLength: 3,
highlightFirst: true,
suggest: true,
valuePrimitive: true,
select: (e) => {
model.set("SalesPersonId", e.dataItem.Id);
},
enforceMinLength: true,
filter: 'contains'
}

},
{
field: "Manager",
title: "Manager",
editor: "AutoComplete",
editorOptions: {
dataSource: {
serverFiltering: true,
transport: {
read: {
url: "/Manager/Search",
dataType: "json",
type: "POST"
},
parameterMap: (options, operation) => {
return {
text: (options.filter.filters[0] !== void 0) ?
options.filter.filters[0].value :
null
};
}
}
},
dataTextField: "FullName",
template: '#: data.FullName #',
minLength: 3,
highlightFirst: true,
suggest: true,
valuePrimitive: true,
select: (e) => {
model.set("ManagerId", e.dataItem.Id);
},
enforceMinLength: true,
filter: 'contains'
}

}

]
}
},
{
//step 2 code here//
},

]
})
},
sortable: true,
resizable: true,
pageable: {
pageSizes: false,
messages: {
empty: ""
}
},
filterable: true,
persistSelection: true,
noRecords: true,
messages: {
noRecords: "No records found"
},
dataSource: gridDataSource(),
}).data("kendoGrid");
},

AutoComplete

Grid

Wizard

answered on 13 May 2025

2 answers

641 views

Need help to create dynamic wizard step dynamically

Requirements:

We have to create a Kendo Ui JQuery Wizard with dynamic number of steps. We want to develop the registration page exactly like:

tps://demos.telerik.com/aspnet-ajax/wizard/application-scenarios/add-remove-wizardsteps/defaultcs.aspx

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

Form

Wizard

updated answer on 21 Dec 2022

0 answers

745 views

Dynamically add field to Kendo Form inside Kendo Wizard via button

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

Button

Form

Wizard

asked on 01 Apr 2022

0 answers

134 views

Dialog with embedded wizard, activate getting called excessively

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.

Dialog

Wizard

asked on 28 Mar 2022

1 answer

1.7K+ views

Programmatically enable or disable wizard buttons

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?

Wizard

answered on 30 Sep 2021

1 answer

548 views

Adding "required: true" to form validation doesn't let me set values programatically

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: null

I'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?

answered on 03 Sep 2021

1 answer

855 views

Wizard navigation and validation

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!

Form

Validation

Wizard

answered on 24 Aug 2021

1 answer

816 views

How to make reload all value then return step 1

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>

Wizard

answered on 05 May 2021

1 answer

1.5K+ views

How to Upload Image and Show Image in Kendo Wizard

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)

Upload

Wizard

answered on 05 May 2021

4 answers

262 views

Widgets inside a wizard

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

Wizard

answered on 04 Mar 2021