R2 2018 Release is here – now with modern UI for chatbots and more! See what’s new!
Change Theme

SASS Themes

    LESS Themes

      SASS Theme Builder

      Create new or customize SASS themes
      Launch Theme Builder

      Grid / ForeignKey column

      Drag a column header and drop it here to group by that column
      Product nameCategoryUnit price 
      • 1
      No items to display

      Description

      In this example you can see how to implement foreign key column in the Telerik for ASP.NET MVC Grid, which generates an ASP.NET MVC DropDownList editor for the Category column. The ForeignKey column definition is shown below:

      columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "CategoryID", "CategoryName").Title("Category").Width(150);

      When a column is defined as a ForeignKey colum the ASP.NET MVC Grid will look for the editor template in ~Views\Shared\EditorTemplates named GridForeignKey.cshtml and populate it with the passed collection through the column declaration. Here is the definition of the editor template:

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

      In addition to the Foreign Key editor template, populate a list which holds all the categories and pass it via the ViewData - you can see how this is done in the ForeignKeyColumnController.cs PopulateCategories() method.

      If Create operations will be used provide a DefaultCategory in the DataSource Model Field.

      More about Telerik Grid for ASP.NET MVC

      ASP.NET MVC source

      Also available for:

      • foreignkeycolumn.cshtml
      • ForeignKeyColumnController.cs
      • ProductService.cs

      Support & learning resources

      Grid for other technologies