Hi,
I am experimenting with this grid control.
I have this code where I am filling a grid with data from the SQL table. The data is loading good.
Second step : I want to edit the row and in this case , I want to edit City column which will be a dropdown in edit mode. I have the code to pull the data from database. My API is returning cities. I can see it in console.log. However, the dropdown in the edit mode does not show any data. It is blank. I am not sure where to fix it or how to fix it.
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<link href="https://kendo.cdn.telerik.com/themes/12.0.0/default/default-main.css" rel="stylesheet" />
<!-- Add the Kendo library by either using the JAVASCRIPT MODULES -->
<script src="https://kendo.cdn.telerik.com/2025.3.825/mjs/kendo.all.js" type="module"></script>
<script src="telerik-license.js" type="text/javascript"></script>
<div id="tripsGrid"></div>
<script type="text/javascript" >
$(document).ready(function() {
$("#tripsGrid").kendoGrid({
dataSource: {
transport: {
read: {
url: "http://localhost:54243/api/Dispatch/GetTripsForSelectedDate", // Replace with your actual API endpoint
type: "GET", // <-- key change
dataType: "json",
contentType: "application/json"
},
parameterMap: function (options, type) {
if (type === "read") {
return kendo.stringify({
page: options.page,
pageSize: options.pageSize,
sort: options.sort,
filter: options.filter,
date: $("#datePicker").val() || null // if you have a date picker
});
}
// For create/update/destroy, send the model as JSON.
// If you enable batch: true later, handle options.models[0] instead.
if (type === "create" || type === "update" || type === "destroy") {
return kendo.stringify(options); // 'options' is the dataItem for non-batch
}
}
},
schema: {
model: {
id: "Trip_ID",
fields: {
Trip_ID: { type: "number" },
Route: { type: "string" },
RouteID: { type: "number" },
Start_Dt: { type: "string", editable : true },
LastName: { type: "string", editable : true },
FirstName: { type: "string", editable : true },
StartDesc: { type: "string" },
StartAddr1: { type: "string" },
StartAddr2: { type: "number" },
StartCityID: { type: "number", editable : true },
StartStateID: { type: "number", editable : true },
StartZipID: { type: "number", editable : true },
StartCity : { type: "string", editable : true },
StartState: { type: "string" },
StartZip: { type: "string" }
}
}
},
pageSize: 10, // Optional: for client-side paging
serverPaging: true, // Set to true for server-side paging
serverSorting: true, // Set to true for server-side sorting
serverFiltering: true // Set to true for server-side filtering
},
height: 550,
sortable: true,
pageable: true,
filterable: true,
editable: { mode: "inline", confirmation: "Delete this trip?" },
columns: [
{ command: ["edit", "destroy"], title: " ", width: 180 },
{ field: "Trip_ID", title: "TripID" },
{ field: "Route", title: "Route", format: "{0:c}" },
{ field: "RouteID", title: "RouteID" },
{ field: "Start_Dt", title: "Start Date" },
{ field: "LastName", title: "Last Name" },
{ field: "FirstName", title: "First Name" },
{ field: "StartDesc", title: "Start Desc" },
{ field: "StartAddr1", title: "Addr1" },
{ field: "StartAddr2", title: "Addr2" },
{ field: "StartCityID", title: "Start City ID", editor: startCityDropdownEditor, template: "#: StartCity #" },
{ field: "StartStateID", title: "Start State ID" },
{ field: "StartZipID", title: "Start Zip ID" },
{ field: "StartCity", title: "StartCity", editor: startCityDropdownEditor, template: "#: StartCity #" },
{ field: "StartState", title: "StartState" },
{ field: "StartZip", title: "StartZipcode" }
]
});
});
//&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
function startCityDropdownEditor(container, options) {
$('<input required name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
optionLabel: "Select city...",
dataTextField: "LkupItem",
dataValueField: "LkupItemID",
valuePrimitive: true, // model field is a number, not an object
filter: "contains", // searchable
autoBind: true,
dataSource: {
transport: {
read: {
url: "http://localhost:54243/api/Dispatch/GetCities", // API below
type: "GET", // keep POST to avoid 405/WebDAV issues
dataType: "json",
contentType: "application/json"
}
},
schema: { data: "data" } , // expect { data: [...] }
requestEnd: function(e) {
// log the raw response payload
console.log("API Response for GetCities:", e.response);
// log the parsed data that DropDownList will bind to
console.log("Parsed City List:", this.data());
}
},
change: function (e) {
// keep StartCity (name) in sync so the display template shows new text
var item = this.dataItem();
if (item && options.model) {
options.model.set("StartCity", item.LkupItem);
}
},
dataBound: function () {
// Ensure selected value shows when editing existing rows
if (options.model.StartCityID != null) {
this.value(options.model.StartCityID);
}
}
});
}
</script>
</asp:Content>
Thanks,
Ravi