New to Telerik UI for ASP.NET Core? Download free 30-day trial

ForeignKey Column

The ForeignKey column functionality of the Telerik UI Grid component for ASP.NET Core is primarily used for matching the value of a bound property to a desired text field from an external for the grid collection. It follows the convention of the SQL ForeignKey functionality that is used for linking two tables based on a foreign key.

The foreign values for the columns of the grid could be supplied in two ways:

Binding to a Local Collection

Binding the column to a local collection of items can be done by passing a valid IEnumerable collection to the ForeignKey column configuration

    columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "CategoryID", "CategoryName")
            .Title("Category").Width(200);
<foreign-key-column field="CategoryID" title="Category" width="150"
            values='(System.Collections.IEnumerable)ViewData["categories"]' 
            value-field="CategoryID" 
            text-field="CategoryName">
        </foreign-key-column>
    public class GridController : Controller
    {
        public ActionResult Index()
        {
            ViewData["categories"] = GetCategories();
            return View();
        }
    }
    public class CategoryViewModel{
        public int CategoryID { get; set; }
        public string CategoryName { get; set; }
    }

Binding to a Remote Collection

In order to bind the column to a remote collection of items, supply a URL Action instead of a static collection. It is mandatory to supply the DataValueField and DataTextField options in order to ensure that the column values will be bound to the correct foreign value.

    columns.ForeignKey(p => p.CategoryID, ds=> ds.Read(r => r.Action("Categories", "Grid")), "CategoryID", "CategoryName")
            .Title("Category").Width(200);
    <foreign-key-column field="CategoryID" title="Category" width="200" value-field="CategoryID" text-field="CategoryName">
        <datasource>
            <transport>
                <read url="/grid/categories"/>
            </transport>
        </datasource>
    </foreign-key-column>
    public class GridController : Controller
    {
        public ActionResult Categories()
        {
            IEnumerable<CategoryViewModel> categories;
            using (var dataContext = new SampleEntitiesDataContext())
            {
                 categories = dataContext.Categories
                            .Select(c => new CategoryViewModel
                            {
                                CategoryID = c.CategoryID,
                                CategoryName = c.CategoryName
                            })
                            .OrderBy(e => e.CategoryName).ToList();
            }
            return Json(categories);
        }
    }
    public class CategoryViewModel{
        public int CategoryID { get; set; }
        public string CategoryName { get; set; }
    }

See Also

In this article