EditorTemplate not working on Core 2.1 Razor Pages

[Awes]

My company is trying to be on the cutting edge. 

We built some CRUD pages using Kendo UI. But having problems with the drop down list. In .Net Core we are using razor pages, but the concepts is the same.

 

    @(Html.Kendo().Grid<NG.Analytics.Models.Applications>()//(Model.Data)
                    .Name("Grid")
                    .Columns(columns =>
                    {
                        columns.Bound(a => a.Id).Title("ID").Visible(false);
                        columns.Bound(a => a.CategoryId).EditorTemplateName("ApplicationCategory"); //Having trouble with what to put right here. 
                        columns.Bound(a => a.CategoryId).Title("CategoryID");
                        columns.Bound(a => a.Title).Title("Title").Width(200);
                        columns.Bound(a => a.Description).Title("Description");
                        columns.Bound(a => a.BaseUrl).Title("Base Url").Width(120);
                        columns.Bound(a => a.Url).Title("Url");
                        columns.Bound(a => a.IconUrl).Title("Icon Url").Width(350);
                        columns.Bound(a => a.IsExternal).Title("Is External").Width(120);
                        columns.Command(command => { command.Edit(); }).Width(90);
                        columns.Command(command => { command.Destroy(); }).Width(100);
                        columns.Command(command => command.Custom("ViewDetails").Click("showDetails"));
                    })
                    .ToolBar(toolbar => toolbar.Create())
                    .Editable(editable => editable.Mode(GridEditMode.PopUp))
                    .Sortable()
                    .Scrollable()
                    .Filterable()
                    .HtmlAttributes(new { style = "height: 750px;" })
                    .DataSource(dataSource => dataSource
                            .Ajax()
                            .Model(model =>
                            {
                                model.Id(a => a.Id); // Specify the property which is the unique identifier of the model
                    model.Field(a => a.Id).Editable(false); // Make the ID property not editable
                                                            //model.Field(p => p.CategoryId).DefaultValue(
                                                            //Model.ApplicationCategory as Models.ApplicationCategory);
                })
                            .Read(read => read.Url("?handler=Data").Type(HttpVerbs.Get))
                            .Create(update => update.Url("?handler=CreateApplications").Type(HttpVerbs.Post))
                            .Destroy(update => update.Url("?handler=Applications").Type(HttpVerbs.Delete))
                            .Update(update => update.Url("?handler=UpdateApplications").Type(HttpVerbs.Put)))
    )

    <partial name="EditorTemplates/ApplicationCategoryEditor" /> //Editor is working as expected when normally use.

Here is what the partial looks like:

 

@(Html.Kendo().DropDownList()
                      .Name("CategoryName")
                      .DataTextField("CategoryName")
                      .DataValueField("Id")
                      .BindTo(Model.ApplicationCategory)
                      .HtmlAttributes(new { style = "width: 100%" })
)

 

I know you guys are pretty good and responsive. I just hope I can find the answer. 

Thanks, Trung

[Georgi]

Hi Awes,

I assume that the issue is caused due to the location of the editor template view. It should be located in ~/Shared/EditorTemplates.

For your convenience I am attaching a small sample which demonstrates how to create a drop down editor in Razor Pages.


Regards,
Georgi
Progress Telerik

[Awes]

Hi Georgi,

The example that you gave me works for its purpose. 

I'm trying to get the editor to work in a edit popup. And The EditTemplate does not go through the popup.

Please let me know if you know how to fix this.

[Georgi]

Hi Awes,

I apologize for the inconvenience, I did not notice that the grid is in popup edit mode.

When in popup edit mode the editor can only be specified via DataAnnotations.

e.g.

[UIHint("DropDownEditor")]
public string Address { get; set; }

For your convenience I am attaching a modified version of the sample from my previous post.


Regards,
Georgi
Progress Telerik

[Christian Sandöy]

In your editor template you have hardcoded list
how do I get dynamic data in the template
in MVC I would use a viewbag, but I cant use that in Razor pages

[Georgi]

Hi Christian,

Have you considered using remote binding for the editor? Is that an option for you?

The following demo demonstrates how to bind the drop down to a remote service:

• https://demos.telerik.com/aspnet-core/dropdownlist/remotedatasource

 

Regards,
Georgi
Progress Telerik

[Kiran]

Hi Georgi,

ASP.NET CORE: Can you give the sample example on Grid Batch Editing with Multi-Select Editor Template.

I tried as mentioned below, but The Editor template not loading.

<script>
    function employeesTemplate(employees) { //generates a template with all the employee names
        var template = "<ul>";
        for (var i = 0; i < employees.length; i++){
            template += "<li>" + employees[i].Name + "</li>";
        }
        template += "</ul>";
        return template;
    }
</script>
>
@(Html.Kendo().Grid<EmployeeViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Command(comm =>
        {
            comm.Edit();
        });
        columns.Bound(e => e.EmployeeID);
        columns.Bound(e => e.FirstName);
        columns.Bound(e => e.LastName);
        columns.Bound(e => e.Employees).ClientTemplate("#=employeesTemplate(Employees)#")
.EditorTemplateName("MultiEmployeeDataEditor");
    })
    .ToolBar(tools=> tools.Create())
    .Pageable()   
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(5)        
        .Model(model =>
            {
                model.Id(e => e.EmployeeID);
                model.Field(e => e.EmployeeID).Editable(false);
            })
        .Read(read => read.Action("Read", "Home"))
        .Update(update => update.Action("Update", "Home"))
        .Create(create => create.Action("Create", "Home")))
)
EditorTemplate: (Area/Employee/View/Shared/EditorTemplate/MultiEmployeeDataEditor.cshtml)
@(Html.Kendo().MultiSelectFor(m => m)
            //.Name("Employees")
            .DataTextField("FullNameWithRoleTitle")
            .DataValueField("EmployeeID")
            .Filter(FilterType.Contains)                        
            .BindTo((System.Collections.IEnumerable)ViewBag.EmployeeData))

[Georgi]

Hi, Kiran,

Please have in mind that you have to either specify in the model declaration that the editor is MultiEmployeeDataEditor or use the EditorTemplateName method.

e.g.

// specify editor in model declaration

[UIHint("MultiEmployeeDataEditor")]
public ICollection<Employee> Employees {get; set;}

// specify editor in column configuration

columns.Bound(e=> e.Employees).ClientTemplate(...).EditorTemplateName("MultiEmployeeDataEditor")