Hello,
I'm encountering an issue with the autocomplete functionality in Kendo UI Grid. While the data selected through autocomplete is correctly added to hidden fields, it does not appear in the Grid.
Specifically, after using the autocomplete functionality, I checked whether the correct data was added to the respective hidden fields and found that the values I expected were indeed present in those fields. However, I noticed that these values were not visible in the Grid. This implies that the data selected by users is not being properly reflected within the Grid.
In summary, I am unable to display the data received through the autocomplete functionality within the Grid. I would appreciate any suggestions to resolve this issue.
The code structure related to the problem I mentioned above is as follows.
@(Html.Kendo().Grid(Model.Lines).Name("OrderLines")
.ToolBar(tools => tools.Create().Text("Add new product"))
.Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
.Events(events => events
.Change("onChange"))
.Columns(columns =>
{
columns.Bound(p => p.Title)
.ClientTemplate("#= Title #" +
"<input type='hidden' name='Lines[#= index(data)#].Title' value='#= Title #' />")
.EditorTemplateName("ProductTitleAutoComplete");
columns.Bound(p => p.Title).Hidden().ClientTemplate("#= Title #" +
"<input type='hidden' name='Lines[#= index(data)#].Title' value='#= Title #' />"
);
columns.Bound(p => p.Description).ClientTemplate("#= Description #" +
"<input type='hidden' name='Lines[#= index(data)#].Description' value='#= Description #' />"
);
columns.Bound(p => p.Quantity).ClientTemplate("#= Quantity #" +
"<input type='hidden' name='Lines[#= index(data)#].Quantity' value='#= Quantity #' />"
);
columns.Bound(p => p.UnitPrice).ClientTemplate("#= UnitPrice #" +
"<input type='hidden' name='Lines[#= index(data)#].UnitPrice' value='#= UnitPrice #' />"
);
columns.Bound(p => p.TaxRate).ClientTemplate("#= TaxRate #" +
"<input type='hidden' name='Lines[#= index(data)#].TaxRate' value='#= TaxRate #' />"
);
columns.Bound(p => p.DiscountRate).ClientTemplate("#= DiscountRate #" +
"<input type='hidden' name='Lines[#= index(data)#].DiscountRate' value='#= DiscountRate #' />"
);
columns.Bound(p => p.PurchaseOrderId).Hidden().ClientTemplate("#= PurchaseOrderId #" +
"<input type='hidden' name='Lines[#= index(data)#].PurchaseOrderId' value='#= PurchaseOrderId #' />"
);
columns.Bound(p => p.ProductId).Hidden().ClientTemplate("#= ProductId #" +
"<input type='hidden' name='Lines[#= index(data)#].ProductId' value='#= ProductId #' />"
);
columns.Bound(p => p.Id).Hidden().ClientTemplate("#= Id #" +
"<input type='hidden' name='Lines[#= index(data)#].Id' value='#= Id #' />"
);
columns.Bound(p => p.MeasureWeightId).ClientTemplate("#= MeasureWeightId #" +
"<input type='hidden' name='Lines[#= index(data)#].MeasureWeightId' value='#= MeasureWeightId #' />"
);
columns.Command(command => command.Destroy()).Width(100);
})
.DataSource(dataSource => dataSource.Ajax()
.Model(model =>
{
model.Id(p => p.ProductId);
model.Field(p => p.ProductId).Editable(false);
})
.ServerOperation(false)
))
function onChange_ProductAutoComplete(e) {
var dataItem = e.sender.dataItem(0);
var grid = $("#OrderLines").data("kendoGrid");
if (dataItem) {
var el = $(e.sender.element[0]);
const parent = el.closest("td");
const inputs = parent.siblings().find('input');
$(inputs).each(function () {
var name = $(this).attr('name');
if (name.endsWith("Description")) {
$(this).val(dataItem.Notes);
} else if (name.endsWith("ProductId")) {
$(this).val(dataItem.Id);
}
else if (name.endsWith("Title")) {
$(this).attr({ value: dataItem.Title });
$(this).val(dataItem.Title);
}
else if (name.endsWith("MeasureWeightId")) {
$(this).val(dataItem.MeasureWeightId);
}
});
}
}
function onReadDataOnGrid_ProductAutoComplete(e) {
let data = {
title: $('#Title_ProductAutoComplete').val()
};
return data;
}
Thank you in advance for your support.