How do I have a client template that changes between edit and read mode in a Telerik MVC grid?

Question

I am creating a Telerik MVC UI grid and one of my properties in the record view model is a numeric company id.

What I want my grid to display is the display name for the company in the column when reading the grid, but when creating a new record (or editing an existing record) I would like it to show a drop down with possible values the user can select.

I've done the first part with c.Bound(x => x.CompanyId).ClientTemplate('#= getcompanyName(CompanyId)#'); and that works fine, but I don't see anything in the examples or API reference on how to have an editing template different than the display template.

I'm sure I am just missing something, since one example on Telerik's own website shows it (http://demos.telerik.com/aspnet-mvc/grid/editing-custom) but the source code they show is clearly missing the definition for the drop down box (easily seen in that their example passes up a categories ViewData element but none of the provided source code actually uses that.

Any hints on what I"m missing to accomplish this?

Edit:

Ok, so after bashing my head against a wall I think what I want is to create a shared editor template, then do column.Bound(x => x.CompanyId).EditorTemplateName("IdNamePairDropdown").EditorViewData(new { IdNamePairs = Model.AvailableCompanies });.

Of course this doesn't work, and gives me an ArgumentNullReference exception even though at the break ViewData["IdNamePairs"] gives me the correct non-null collection, but at least it's a hint.

Edit 2:

Looks like the solution is to do the following in your grid definition:

              c.Bound(x => x.MarketingCompanyId).Title("Marketer")
                  .ClientTemplate("#= getCompanyName(MarketingCompanyId) #")
                  .EditorTemplateName("IdNamePairDropdown")
                  .EditorViewData(new { IdNamePairs = Model.AvailableCompanies, IdNamePairName = "marketing_companies" });

Then create the corrosponding Editor Template in ~/Views/Shared/EditorTemplates/IdNamePairDropdown.cshtml

@using System.Collections

@(Html.Kendo().DropDownList()
      .Name("id_pair_dropdown_" + ViewData["IdNamePairName"])
      .DataValueField("Id") 
      .DataTextField("Name")
      .HtmlAttributes(new { data_value_primitive = "true"})
      .BindTo((IEnumerable) ViewData["IdNamePairs"])))

This correctly allows a distinct drop down per column when in edit mode.

the only missing part is how to save the output, as selecting a value in the drop down and clicking the Update button returns the default value of the column.

Quick question...do you what a grid that behaves exactly like the one in on the Telerik demo site? I work with the kendo ui almost every day and it can be frustrating as their api is very poorly documented, their stuff usually performs as expected but wow they need to work on documenting the api. — BillRuhl
Pretty much the same functionality except i'm doing inline editing instead of cell/batch editing. Glad I'm not the only one lost in their documentation :) — KallDrexx
OK...I just got back from lunch. I have to knock out a few things for my boss but I will post a working grid for you early this evening. — BillRuhl
Not a problem, extremely appreciated as I keep perusing the docs and have still come up empty handed. — KallDrexx
Well it looks like you made it past the editor template mystery lol. I tried building dynamic drop downs that reuse the same editor template but the performance was better with a separate editor for each one...your going the right direction. You have the grid figured out, I Think the only thing your missing is an onChange event for your drop down. Your drop down list has events..you hook them the same way as the grid. evt => { evt.Change("myList_OnChange")} from there grab a client side reference to the drop down and you can do what ever you want with it. You got this... — BillRuhl

user3731395 user3731395 · Accepted Answer · 2017-02-10T19:48:50

I know this is an old question but since it doesn't have an answer, I thought I would give it one. All one needs to do is define the column as a ForiegnKey column and provide an Editor Template for it. Here is a column definition that works in one of my grids:

col.ForeignKey(c => c.TypeId_kendoGrid, (IEnumerable<SelectListItem>)ViewBag.ProductTypes, "Value", "Text").Title("Type").Width(150);

Then the Editor Template (which I think is included in the Kendo package) is in a file called GridForeignKey.cshtml:

@model object

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

You may notice that my property name looks a little funky (TypeId_kendoGrid). That's because in my case the field is nullable and the grid had a difficult time binding null to it. So in my ViewModel class I do this:

public string TypeId_kendoGrid
    {
        get
        {
            return this.TypeId.ToString();
        }
        set
        {
            int i;
            this.TypeId = int.TryParse(value, out i) ? (int?)i : null;
        }
    }

Where my Model property is TypeId.

How do I have a client template that changes between edit and read mode in a Telerik MVC grid?

1 Answers