DropDown In Kendo Grid - kendo-ui

Question

I need to add a dropdown in a Kendo Grid. I have tried to add by using EditorTemplate but something is not right in the code that's why it is not working for me.The dropdown have 3 values (Donate, Refund, Undo). Below is my kendo grid and i need to display dropdown on the first column. Please help.
#(Html.Kendo().Grid<GA.CustomerCare.Web.Synergy.Models.CustomerOrderARInfo>
(Model.CustomerOrderARInfoResult)
.Name("SearchResultsGridParent")
.Columns(columns =>
{
columns.Bound(e => e.ActionList).Width(100).EditorTemplateName("ActionDropdownEditor");
columns.Bound(e => e.TransNumber).Width(85);
columns.Bound(e => e.OriginalTransNumber).Width(85);
columns.Bound(e => e.DateEntered).Width(115);
columns.Bound(e => e.TransDate).Width(85);
columns.Bound(e => e.TransType).Width(130);
columns.Bound(e => e.Status).Width(100);
columns.Bound(e => e.Amount).Width(100);
columns.Bound(e => e.AmountApplied).Width(100);
columns.Bound(e => e.AvailableFunds).Width(85);
columns.Bound(e => e.AdjustmentReason).Width(85);
columns.Bound(e => e.CcCheckGiftCard).Width(155);
columns.Bound(e => e.PaypalTransID).Width(135);
columns.Bound(e => e.Area).Width(85);
columns.Bound(e => e.EnteredBy).Width(115);
columns.Bound(e => e.Reference).Width(155);
columns.Bound(e => e.DateCapture).Width(155);
columns.Bound(e => e.AmountCapture).Width(155);
})
.Sortable(sortable => sortable
.AllowUnsort(true)
.SortMode(GridSortMode.MultipleColumn)
)
.Resizable(resize => resize.Columns(true))
.ColumnResizeHandleWidth(10)
.Scrollable(scrolling => scrolling.Height(190))
//.ClientDetailTemplateId("template")
//.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetCustomerOrderAR", "Order", new { CustomerOrderID = Model.CustomerOrderID }))
)
)
Below is the property i am using in the Model :
[Display(Name = "ActionList")]
public string ActionList { get; set; }
Below is my ActionDropdownEditor :
#model string
#(Html.Kendo().DropDownList()
.Name("ActionList") //Important, must match the column's name
.Value(Model)
.SelectedIndex(0)
.BindTo(new string[] { "Donate", "Refund", "Undo" }))

Answer 1

I also tried using the kendo Grid with DropDown in the same way as you did and it worked.
Please check it with your code whether some references are missing.
column.Bound(p => p.ActionList).ClientTemplate("#= ActionList !=null ? ActionList : '' #").EditorTemplateName("_Sex").Title("ActionList");
I am giving my whole Dropdown in EditorTemplates Folder for you to check with your code:
#using Kendo.Mvc.UI
#(Html.Kendo().DropDownListFor(m => m)
.Name("ActionList").HtmlAttributes(new { #style = "font-size:12px", #class = "PaxType" })
.BindTo(new string[] { "Donate", "Refund", "Undo" }))

Answer 2

You can place a DropDownList into a Kendo Grid by using html in a ClientTemplate. I achieved something similar using the following...
column.Bound(p => p.WFKeyType).Title("Type").ClientTemplate("<select class='form-control'><option value='' disabled='disabled' selected='selected'>Select Key Type</option><option value='String'>String</option><option value='Integer'>Integer</option><option value='DateTime'>DateTime</option><option value='Currency'>Currency</option><option value='Bool'>Bool</option></select>");
which produces a DropDownList in the Grid Column containing 'String', 'Integer', 'DateTime', 'Currency', & 'Bool' as options. The 'form-control' class is from Bootstrap and helps the column look more clean. Your project would need to add Bootstrap 3 before the class would be accessible.