EditCell with widgets Kendo Grid MVC - asp.net-mvc

Question

I have a grid with some editor templates. The grid can be edited InCell.
I want to change the edit inCell event so that it will edit the values on double click. Untill now I have done it like this :
$(table + " table").on("dblclick",
"tbody>tr>td",
function(e) {
var grid = $(table).data("kendoGrid");
grid.editCell($(this));
});
The problem that I have is that when I double click on the cell, the widget that I want for editing (Multiselect, DropdownList ...) is not rendered in the grid and looks like this :
Instead, it should look like this:
One of the editors looks like this :
#(Html.Kendo().DropDownList()
.Name("Responsible")
.DataTextField("ResponsibleName")
.DataValueField("ResponsibleId")
.BindTo((System.Collections.IEnumerable)ViewData["Responsible"])
);
The definition of the grid is :
#(Html.Kendo().Grid(Model.ActivitiesList)
.Name(Model.ActivitiesSection)
.ClientDetailTemplateId(Model.ActivitiesSection + "-description")
.Columns(columns =>
{
columns.Bound(c => c.ActivityId).Title(#Html.Kendo().CheckBox().Name("check-#=ActivitiesSection#").Checked(false).Enable(false).ToString()).ClientTemplate(#Html.Kendo().CheckBox().Name("check-#=ActivityId#").Checked(false).ToString()).Sortable(false);
columns.Bound(c => c.StatusColor).Title("").ClientTemplate("<i class='fa fa-circle' aria-hidden='true' style='font-size: smaller; color:#=StatusColor#;'></i>").Sortable(false);
columns.Bound(c => c.StatusDescription).Title("Status").ClientTemplate("#=StatusDescription#");
columns.Bound(c => c.Name).Title("Name").ClientTemplate("<p class='activity-name'>#=Name#</p>");
columns.Bound(c => c.Priority).Title("Priority").ClientTemplate("#=PriorityTemplate(Priority)#");
columns.Bound(c => c.Responsible).Title("Responsible").HtmlAttributes(new { #class = "templateCell" }).ClientTemplate("#=ResponsibleTemplate(Responsible)#");
columns.Bound(c => c.Team).Title("Team").ClientTemplate("Better solutions");
columns.Bound(c => c.GeographicResponsibility).Title("Geographic Resp").HtmlAttributes(new { #class = "templateCell" }).ClientTemplate("#=GeographicResponsibilityTemplate(GeographicResponsibility)#").EditorTemplateName("_GeographicalResponsibilityEditor");
columns.Bound(c => c.FunctionOrPracticeResponsible).Title("Function/Practice Resp").HtmlAttributes(new { #class = "templateCell" }).ClientTemplate("#=FunctionOrPracticeResponsibleTemplate(FunctionOrPracticeResponsible)#").EditorTemplateName("_FunctionResponsibleEditor");
columns.Bound(c => c.DueDate).Title("Due date").ClientTemplate("<p style='white-space: nowrap'>#= DueDate != null ? kendo.toString(kendo.parseDate(DueDate,'dd/MM/yyyy'), 'dd-MM-yyyy') : 'DD-MM-YY' #</p>").EditorTemplateName("_ActivityDueDateEditor");
columns.Bound(c => c.Starred).Title("<i class='fa fa-star' aria-hidden='true' style='color: #ededed; font-size:large;'></i>").ClientTemplate("<i class='fa fa-star' aria-hidden='true' style='color:\\#ededed;'></i>").Sortable(false);
columns.Bound(c => c.StatusDescription).Title("<i class='fa fa-file' aria-hidden='true' style='color: #ededed; font-size:large'></i>").ClientTemplate("<i class='fa fa-file' aria-hidden='true' style='color:\\#ededed;'></i>").Sortable(false);
columns.Bound(c => c.ActivityId).Title("").ClientTemplate("<input type='button' value='More Info' class='expanded-section' id='#= ActivityId #'/>").Sortable(false);
columns.Bound(c => c.ActivityId).Title("").ClientTemplate("<input type='hidden' class='js-activity-id' value='#= ActivityId #'").Sortable(false);
columns.Bound(c => c.KeyLaunchElementId).Hidden(true);
columns.Bound(c => c.ProcessMapId).Hidden(true);
columns.Bound(c => c.WorkstreamId).Hidden(true);
})
.DataSource(e => e.Ajax().ServerOperation(false).Sort(a => a.Add("Name").Ascending())
.Model(model =>
{
model.Id(act => act.ActivityId);
model.Field(act => act.Name);
model.Field(act => act.ActivityId).Editable(false);
model.Field(act => act.Priority).DefaultValue(new ActivityPriorityViewModel());
model.Field(act => act.StatusColor).Editable(false).DefaultValue("#00b0d3");
model.Field(act => act.StatusDescription).DefaultValue("New").Editable(false);
model.Field(act => act.Responsible).DefaultValue(new ActivityResponsibleViewModel());
model.Field(act => act.Team).Editable(false);
model.Field(act => act.GeographicResponsibility).DefaultValue(new GeographicalResponsibilityViewModel());
model.Field(act => act.FunctionOrPracticeResponsible).DefaultValue(new List<FunctionOrPracticeViewModel>());
model.Field(act => act.DueDate);
model.Field(act => act.Starred).Editable(false);
})
.Update(update => update.Action("UpdateActivity", "Activity"))
.AutoSync(true))
.Events(events => events.DetailExpand("detailExpand").Save("function(e) { this.dataSource.sync() }").DataBound("activityFilter.IsSorted"))
.Sortable(s => s.SortMode(GridSortMode.SingleColumn).AllowUnsort(false))
.Editable(edit => edit.Mode(GridEditMode.InCell))
)
Thank you!

Answer 1

At first create new editor and place it under directory: Views/Shared/EditorTemplates directory. I created "DropdownTest.cshtml" editor:
#using Kendo.Mvc.UI
#(
Html.Kendo().DropDownListFor(m => m)
.BindTo((System.Collections.IEnumerable)ViewData["Responsible"])
.DataValueField("ResponsibleId")
.DataTextField("ResponsibleName")
)
ViewData["Responsible"] is used to list all of positions while editing, so it must be initialized in view method:
public ActionResult Index()
{
ViewData["Responsible"] = new List<Responsible>()
{
new Responsible
{
ResponsibleId = 1,
ResponsibleName = "Test-A"
},
new Responsible
{
ResponsibleId = 2,
ResponsibleName = "Test-B"
}
};
return View();
}
A grid wrapper column definition (instead of bound - use foreign key):
columns.ForeignKey(p => p.Responsible.ResponsibleId, (System.Collections.IEnumerable)ViewData["Responsible"],
"ResponsibleId", "ResponsibleName").EditorTemplateName("DropdownTest");
EditorTemplateName("DropdownTest") is linked to editor from EditorTemplates directory.