EditCell with widgets Kendo Grid 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.