Kendo Grid with dropdown

Question

Hi Team,

Good Morning. I am using HTML Kendo Grid to display data using bound columns. Here are the column details. Task I'd, Task Name, Status. I am able to display data but now requirement is to display Status as dropdown inside Kendo Grid so that user can select status. Please let me know how to add dropdown list to kendo Grid, we can hard code status (dropdown entries) as Complete or Pending.

Thanks in advance

Regards,
Sagar Pallavi

Pranam Bhat · Answer

Here is the solution: 1) Use the columns.template configuration to add inputs to the column cells. 2) In the dataBound event handler, initialize a DropDownList for each input. var ddlDataSource = [{ value: 1, displayValue: "one" }, { value: 2, displayValue: "two" }, { value: 3, displayValue: "three" } ]; $("#grid").kendoGrid({ columns: [{ field: "value", template: columnTemplateFunction }], dataSource: [{ value: 1 }, { value: 2 }, { value: 3 } ], dataBound: function(e) { var grid = e.sender; var items = e.sender.items(); items.each(function(e) { var dataItem = grid.dataItem(this); var ddt = $(this).find('.dropDownTemplate'); $(ddt).kendoDropDownList({ value: dataItem.value, dataSource: ddlDataSource, dataTextField: "displayValue", dataValueField: "value", change: onDDLChange }); }); } }); function columnTemplateFunction(dataItem) { var input = ' ' return input }; function onDDLChange(e) { var element = e.sender.element; var row = element.closest("tr"); var grid = $("#grid").data("kendoGrid"); var dataItem = grid.dataItem(row); dataItem.set("value", e.sender.value()); };

Arnab Mukherjee · Answer

https://docs.telerik.com/kendo-ui/knowledge-base/cascading-dropdown-editors