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

[kva]

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");
        });
    }))

[Mihaela]

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

[kva]

Thanks, but your solution duplicates:

                .Filter(FilterType.Contains)
                .DataValueField("Id")
                .DataTextField("Name")
                .DataSource(...)

And violates open-closed principle.

[Mihaela]

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(...)
)