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
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
Rank 2
Iron
Iron
Iron
Thanks, but your solution duplicates:
.Filter(FilterType.Contains)
.DataValueField("Id")
.DataTextField("Name")
.DataSource(...)
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(...)
)