Customize the popup editor for a treelist

[Colin]

I am using .NET Core and implementing a treelist with a custom row template.  Therefore, I have to use popup editing.  The window that pops up looks terrible and it contains many fields that I do NOT want to show.  How can I customize the window to use dropdowns, comboboxes etc and only display the fields that I want to edit?

[Mihaela]

Hi Colin,

You could configure the TreeList to use a custom PopUp editor as follows:

• Create a template in the folder "~/Views/Shared/EditorTemplates/" and insert the controls for all required editable fields in the TreeList. This custom template will override the default Popup editing form. According to the example below, the fields "Name" and "Category" will be displayed in the Popup form. The fields "ParentID" and "ID" will be hidden.

//~/Views/Shared/EditorTemplates/CustomTreeListPopup.cshtml

@model ProjectName.Models.HierarchicalViewModel

<div class="k-edit-form-container">
    <h5>Customized template</h5>
    <br />
    @Html.HiddenFor(model => model.ID)
    @Html.HiddenFor(model => model.ParentID)

    <div class="k-edit-label">
        @Html.LabelFor(model => model.Name)
    </div>
    <div class="k-edit-field">
        @Html.EditorFor(model => model.Name)
        @Html.ValidationMessageFor(model => model.Name)
    </div>

    <div class="k-edit-label">
        @Html.LabelFor(model => model.Category)
    </div>
    <div class="k-edit-field">
        @(Html.Kendo().DropDownListFor(m => m.Category)
            .DataTextField("CategoryName")
            .DataValueField("CategoryID")
            .HtmlAttributes(new { style = "width:100%" })
            .AutoBind(false)
            .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("GetCategories", "ControllerName");
                  });
              })
            )
    </div>
</div>

• Specify the name of the template in the "Editable" method. It should match with the name of the View added in the "EditorTemplates" folder:

 

@(Html.Kendo().TreeList<ProjectName.Models.HierarchicalViewModel>()
    .Name("treelist")
    .Columns(columns =>
    {
      ....
    })
    .Editable(e => e.Mode("popup").TemplateName("CustomTreeListPopup"))
    ...
)

Here you can review a similar example for a customized Popup editor in Grid: 

https://github.com/telerik/ui-for-aspnet-core-examples/blob/master/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Views/Grid/CustomPopUpEditor.cshtml

If you have any additional queries, you are more than welcome to let me know.

 

Regards, Mihaela Progress Telerik