How to reuse and parameter a Kendo UI grid EditorTemplate (using ASP MVC)?

Question

I've created a DropDownList EditorTemplate for grid inline editing successfully. Now I would like to reuse this template in multiple columns (same grid), and/or in different views with different grids.

What I figured out so far is if I omit the 'Name' for the dropdownlist in the template then the template automatically binds to that column what refers to it in the grid (using .EditorTemplateName(...)). However there are other things what should be parameterized (explicit or implicit) firstly the dropdown datasource.

Q: Having many dropdown in one grid, how to parameterize the dropdown datasource to prevent copy and paste the DropDownListTemplate.cshtml zillon times?

Q: Generally how can I parameter this template when using in multiple columns, and multiple views?

The view:

@(Html.Kendo().Grid<Enumeration>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(e => e.Locale).Width(200)
            .EditorTemplateName("DropDownListTemplate");
        // columns.Bound(e => e.OtherColumn).Width(200)
        //    .EditorTemplateName("DropDownListTemplate", ???);

...and the template called DropDownListTemplate.cshtml and placed in /Views/Shared/EditorTemplates

@model string
@(Html.Kendo()
  .DropDownListFor(m => m)
  .BindTo(ViewBag.LocaleDropDownListDataSource) // <- Having many dropdown in one grid, how to parameterize this, without copy and paste the DropDownListTemplate.cshtml zillon times?
  //.OptionLabel("Select Locale")
  .DataValueField("Locale")
  .DataTextField("Value")
  //.Name("Locale") // Omitting this binds the template automatically to the referring column in the grid. Using a custom .Name, what is not a column name in the grid ruins the working
  )

Dion D. · Accepted Answer · 2015-05-22 07:49:59Z

3

Why do you have to reinvent the wheel, Kendo already provide us GridForeignKey column to be used zillion times.

Template code

@model object

@(Html.Kendo().DropDownListFor(m => m)        
      .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
)

Implementation in Grid

columns.ForeignKey(col => col.DepartmentId, (IEnumerable) ViewBag.Departments, "Value", "Text").Title("Department");

Demo

edited May 22, 2015 at 7:49

answered May 22, 2015 at 7:38

Dion D.

2,5962 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dion D. Over a year ago

Yeah it doesn't have to be a FK, you also can call it "a property which connected to your collection" or "column that need to be selected by dropdown". It doesn't have to be an ID, it can be a text string as long as it matches with collection value

g.pickardou Over a year ago

OK, cool. The only thing is not clear for me where it refers to the template name? (I suppose the dropdown template resides in "anyname.cshtml")

Dion D. Over a year ago

The moment you set this column.ForeignKey it will refer to GridForeignKey template. You can find it in ~/Views/Shared/EditorTemplates/GridForeignKey.cshtml

g.pickardou · Accepted Answer · 2015-07-09 11:34:55Z

2

Dion's answer is indeed correct in aspect that in foreign key (and similar) situations there is an out of the box solution what he explained, so I marked it as answer.

Despite of this, the general question how to parameter and editor template still a practical question and needs to be answered. The EditorViewData() naming in the builder is pretty self-explaining. (well, after you found it... :-)

The view:

@(Html.Kendo().Grid<Enumeration>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(e => e.AnyColumn).Width(200)
            .EditorTemplateName("ReusableTemplate")
            .EditorViewData(new {AnyParameterName = anyValue1, OtherParameterName = otherValue1});
        columns.Bound(e => e.OtherColumn).Width(200)
            .EditorTemplateName("ReusableTemplate")
            .EditorViewData(new {AnyParameterName = anyValue2, OtherParameterName = otherValue2});

...and the template called ReusableTemplate.cshtml and placed in /Views/Shared/EditorTemplates

@model object

@{
    // Access the actual parameter values anywhere including the kendo helpers below (if any) via ViewData:
    var any = ViewData.AnyParameterName
    var other = ViewData.OtherParameterName
}

@(Html.Kendo()
  .AnyHelperYouWant_or_NoHelperAtAll
  )

For example:

@(Html.Kendo().Grid<Enumeration>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(e => e.AnyColumn).Width(200)
            .EditorTemplateName("ReusableTemplate")
            .EditorViewData(new {Name = "list1");
        columns.Bound(e => e.OtherColumn).Width(200)
            .EditorTemplateName("ReusableTemplate")
            .EditorViewData(new {Name = "list2"});

and use it:

@model object

@{
    // Access the actual parameter values:
    // Note: You can inline this variable if you want
    var name = ViewData.Name;
}


@(Html.Kendo().DropDownListFor(m => m).BindTo((SelectList)ViewData[name])

edited Jul 9, 2015 at 11:34

answered May 22, 2015 at 9:14

g.pickardou

36.5k47 gold badges161 silver badges326 bronze badges

2 Comments

Encryption Over a year ago

In the EditorTemplate would you still use the .BindTo (say if it were a Dropdown)? If you provided a completed example pertaining to the question above I would upvote.

g.pickardou Over a year ago

@Encription. Yes you could still use in any legal syntax construction. See added example.

Collectives™ on Stack Overflow

How to reuse and parameter a Kendo UI grid EditorTemplate (using ASP MVC)?

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related