Some AutoCompletes in Wizard in Grid Edit Popup not working

1 Answer 7 Views

AutoComplete Grid Wizard

Paul asked on 12 May 2025, 07:51 PM | edited on 12 May 2025, 08:44 PM

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

Some AutoCompletes in Wizard in Grid Edit Popup not working

1 Answer, 1 is accepted