Is there a way to make partial view editors for custom objects that suit both form and grid controls

1 Answer 52 Views
Form Grid
kva
Top achievements
Rank 2
Iron
Iron
Iron
kva asked on 07 Sep 2023, 09:35 AM

I have grid and form, which are bound to Employee object. It has object property Department. To edit it, I use separate editors, because I didn't find the right format to allow editing in both places.

Usage in form:

i.Add().Field(e => e.DepartmentId).Label("Отдел").EditorTemplateView(Html.Partial("FormEditors/Department"));

Editor of the form's field:

@(Html.Kendo().DropDownList()
    .Name("DepartmentId")
    .DataTextField("Name")
    .DataValueField("Id")
    .Filter(FilterType.Contains)
    .DataSource(source =>
    {
        source.Read(read => read.Action("GetDepartments", "Home"));
    }))

Usage in grid:

        columns.Bound(p => p.Department.Name).Width(230)
            .ClientTemplate("#=data.Department?.Name ?? ''#")
            .EditorTemplateName("Department")
            .Filterable(ftb => ftb.Cell(cell =>
            {
                cell.Operator("startswith");
                cell.ShowOperators(false);
            }));

Editor of the grid's column:

@(Html.Kendo().DropDownListFor(m => m)
    .DataTextField("Name")
    .DataValueField("Id")
    .Filter(FilterType.Contains)
    .HtmlAttributes(new { data_bind = "value: Department" })
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("GetDepartments", "Home");
        });
    }))


1 Answer, 1 is accepted

Sort by
1
Accepted
Mihaela
Telerik team
answered on 12 Sep 2023, 08:04 AM

Hello,

You can specify the path to the custom editor template in the EditorTempaltes folder to the Html.Partial() method:

i.Add().Field(e => e.DepartmentId).Label("Отдел").EditorTemplateView(Html.Partial("~/Views/Shared/EditorTemplates/Department.cshtml"));

Since the Grid's column editor binds to the whole "Department" object, but the Form's item editor must bind to the respective Model property (i.e., "DepartmentId", I would suggest passing the property name through the ViewDataDictionary, as per the example below:

//main View

@{
    ViewData["Title"] = "Home Page";
}

    items.Add()
        .Field(e => e.DepartmentId).Label("Отдел")
.EditorTemplateView(Html.Partial("~/Views/Shared/EditorTemplates/Department.cshtml", new ViewDataDictionary(ViewData) { { "PropertyName", "DepartmentId" } }));


//~/Views/Shared/EditorTemplates/Department.cshtml
@model Department

@{
    var editorConfig = ViewData["PropertyName"];
}

@{
    if (editorConfig != null)
    {
        @(Html.Kendo().DropDownListFor(m => m.DepartmentId)
                .Filter(FilterType.Contains)
                .DataValueField("Id")
                .DataTextField("Name")
                .DataSource(...)
          )
    } 
    else 
    {
        @(Html.Kendo().DropDownListFor(m => m)
                .HtmlAttributes(new { data_bind = "value: Department" })
                .Filter(FilterType.Contains)
                .DataValueField("Id")
                .DataTextField("Name")
                .DataSource(...)
            )
    }
}

I hope that helps.

 

Regards,
Mihaela
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages. If you're new to the Telerik family, be sure to check out our getting started resources, as well as the only REPL playground for creating, saving, running, and sharing server-side code.
kva
Top achievements
Rank 2
Iron
Iron
Iron
commented on 13 Sep 2023, 06:05 AM

Thanks, but your solution duplicates:

                .Filter(FilterType.Contains)
                .DataValueField("Id")
                .DataTextField("Name")
                .DataSource(...)
And violates open-closed principle.
Mihaela
Telerik team
commented on 15 Sep 2023, 05:04 PM

Thank you for your note.

To avoid code duplication, I would suggest the following modification of the editor configuration:

//~/Views/Shared/EditorTemplates/Department.cshtml
@model Department

@{
    var editorConfig = ViewData["PropertyName"];
    var valueAttr = "";
    var nameAttr = "";
}

@{
    if (editorConfig != null)
    {
        valueAttr = "DepartmentId";
        nameAttr = "DepartmentId";
    }
    else
    {
        valueAttr = "Department.Id";
        nameAttr = "Department_Name";
    }
}

@(Html.Kendo().DropDownList()
    .Name(nameAttr)
    .DataTextField("Name")
    .DataValueField("Id")
    .Filter(FilterType.Contains)
    .HtmlAttributes(new { data_bind = $"value: {@valueAttr}"})
    .DataSource(...)
)
Tags
Form Grid
Asked by
kva
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Mihaela
Telerik team
Share this question
or