TreeList DropDownListFor Display Value

[Nick]

Hey all,

Using Telerik UI for ASP.NET Core, I've added a TreeList widget. I'm trying to get it to display a DropDownList for what amounts to, in "Grid-speak", a Foreign Key column.

The method I found somewhere in my searches appears to be "working", in that when I enter inline edit mode on the row, the column is showing as a DropDownList and is rendering correctly showing the DataTextField (as shown in the attached Edit.png), but when in display mode on the row, it is only showing the DataValueField (as shown in the attached Display.png).

How do I get the display mode on the row to show the DataTextField from the drop down for the column?

Widget code in /Pages/ProposalVersions/details.cshtml Razor page (removed fields irrelevant to the question for conciseness):

@(Html.Kendo().TreeList<ProposalVersionLineItem>()
  .Name("proposalVersionLineItemTreeList")
  .Columns(columns => {
    columns.Add().Field(column => column.name).Width(200);
    columns.Add().Field(column => column.ProductID).Template("#=ProductID#").Sortable(false).Width(100);              
    columns.Add().Width(300).Command(c =>
    {
      c.CreateChild().Text("Add child");
      c.Edit();
      c.Destroy();
    });            
  })
  .Editable(e => e.Move(move => move.Reorderable(true)))
  .Filterable()
  .Sortable()
  .DataSource(ds => ds
    .Read(r => r.Url("/ProposalVersions/Details?handler=ReadProposalVersionLineItemForTreeList").Data("forgeryToken"))
    .Model(m =>
    {
      m.Id(f => f.ProposalVersionLineItemID);
      m.ParentId(f => f.ParentProposalVersionLineItemID).Nullable(true);
      m.Field(f => f.name);
      m.Field(f => f.ProductID);
    })
  )
)

Editor Template at /Shared/EditorTemplates/ProductID.cshtml:

@(Html.Kendo().DropDownListFor(m => m)
    .DataValueField("ProductID") 
    .DataTextField("name") 
    .BindTo((System.Collections.IEnumerable)ViewData["products"]) 
)

Code Behind populating ViewData in /Pages/ProposalVersions/details.cshtml.cs:

ViewData["products"] = _context.Products
  .Select(s => new {
    s.ProductID,
    s.name
});

From /Models/ProposalVersionLineItem.cs Class:

[Display(Name = "Product")]
[UIHint("ProductID")]
public int ProductID { get; set; }

I feel like this is working "as expected" as it is effectively rendering a custom Editor Template, but I can't figure out how to get it to render a custom "Display Template" for the field... any insight would be appreciated!

Thanks!

Nick

[Stoyan]

Hi Nick,

Based on the provided information - I can suggest configuring the ClientTemplate of the Grid's column to use the field of the Model that bind to the DropDownList's DataTextField:

columns.Add().Field(column => column.ProductID).ClientTemplate("#= data.name #").Sortable(false).Width(100);  

 

 

@(Html.Kendo().DropDownListFor(m => m)
    .DataValueField("ProductID") 
    .DataTextField("name") 
    .BindTo((System.Collections.IEnumerable)ViewData["products"]) 
)

 

That being said I notice this will lead to a duplication - the same data will be shown in 2 columns however they will be editable in different ways. To avoid this I'd recommend defining a separate ProductName field in the Model and use it for the Product column in the Grid, if the requirement at hand and the database's configuration allow it.

I hope the suggestions above are useful.

Regards,
Stoyan
Progress Telerik