This is a migrated thread and some comments may be shown as answers.

How 2 set Foreign key column use Tag helper?

12 Answers 428 Views

Grid

This is a migrated thread and some comments may be shown as answers.

12 Answers, 1 is accepted

answered on 11 Jun 2020, 12:29 PM

Hi Tim,

The tag helper configuration is equivalent to the html helper foreign key column configuration. You need to specify the value and text fields and the source of values.

e.g.

// in controller store the data for example in the ViewData

        public ActionResult ForeignKeyColumn()
        {            
            PopulateCategories();
            return View();
        }

        private void PopulateCategories()
        {
            using (var dataContext = new SampleEntitiesDataContext())
            {
                var categories = dataContext.Categories
                            .Select(c => new CategoryViewModel
                            {
                                CategoryID = c.CategoryID,
                                CategoryName = c.CategoryName
                            })
                            .OrderBy(e => e.CategoryName);

                ViewData["categories"] = categories.ToList();
                ViewData["defaultCategory"] = categories.First();
            }
        }

// configure foreignkey column
 
<kendo-grid name="grid" height="550">
...
        <foreign-key-column field="Category" values=" (System.Collections.IEnumerable)ViewData["categories"]" value-field="CategoryID" text-field="CategoryName"></foreign-key-column>

Regards,
Georgi
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

answered on 06 Aug 2020, 09:36 AM

Hey Georgi,

I am interested in using the ForeignKeyColumn Tag-Helper, however I have found that it does not work in my project while the ForeignKeyColumn HTML-Helper does work. I attached the two approaches, they are almost indentical but the ForeignKeyColumns behave differently:

@(Html.Kendo().Grid<Data.CarModel>()

.Name("modelGridWorking")

.Columns(c => {

c.ForeignKey("BrandId", Model.Brands, "BrandId", "BrandName").Title("Marke").Width(100);

c.Bound("ModelName").Title("Modell").Width(100);

c.Bound("Description").Title("Beschreibung").Width(200);

c.Bound("Locked").Title("Gesperrt").Width(50);

c.Command(cmd => cmd.Edit()).Width(120);

c.Command(cmd => cmd.Destroy()).Width(120);

})

.DataSource(c => {

c.Ajax()

.ServerOperation(true)

.Read(o => o.Url("ModelManagement?handler=Read").Data("forgeryToken"))

.Create(o => o.Url("ModelManagement?handler=Create").Data("forgeryToken"))

.Update(o => o.Url("ModelManagement?handler=Update").Data("forgeryToken"))

.Destroy(o => o.Url("ModelManagement?handler=Destroy").Data("forgeryToken"))

.Model(m => {

m.Id("ModelId");

m.Field("ModelName", typeof(String));

m.Field("Description", typeof(String));

m.Field("Locked", typeof(Boolean));

});

})

.Editable(GridEditMode.InLine)

.Pageable(c => {

c.Refresh(true).ButtonCount(5).PageSizes(new[] { 10, 20, 50 });

})

.Groupable(true)

.Sortable(true)

)

<kendo-grid name="modelGridNotWorking">

<columns>

<foreign-key-column title="Marke" width="100" field="BrandId" values="Model.Brands" value-field="BrandId" text-field="BrandName"></foreign-key-column>

<column title="Modell" width="100" field="ModelName"></column>

<column title="Beschreibung" width="200" field="Description"></column>

<column title="Gesperrt" width="50" field="Locked"></column>

<column width="120">

<commands>

<column-command text="Bearbeiten" name="edit"></column-command>

</commands>

</column>

<column width="120">

<commands>

<column-command text="Löschen" name="destroy"></column-command>

</commands>

</column>

</columns>

<datasource type="DataSourceTagHelperType.Ajax" page-size="20">

<transport>

<read url="ModelManagement?handler=Read" data="forgeryToken" />

<create url="ModelManagement?handler=Create" data="forgeryToken" />

<update url="ModelManagement?handler=Update" data="forgeryToken" />

<destroy url="ModelManagement?handler=Destroy" data="forgeryToken" />

</transport>

<schema>

<model id="ModelId">

<fields>

<field name="ModelName" type="String"></field>

<field name="ModelDescription" type="String"></field>

<field name="Locked" type="Boolean"></field>

</fields>

</model>

</schema>

</datasource>

<editable mode="inline" enabled="true" />

<pageable button-count="5" refresh="true" page-sizes="new int[] { 10, 20, 50 }"></pageable>

<groupable enabled="true" />

<sortable enabled="true" />

</kendo-grid>

In the Model, i am populating the public Property Brands as follows:

public IEnumerable<CarBrand> Brands { get; set; }

public IActionResult OnGet()

{

Brands = _context.CarBrand.ToList();

}

Note the I also tried to use the ViewData instead of a property but the result is the same. Do you have any idea why the ForeignKeyColumn in the first example works as expected (displays the Brand name instead of BrandId) but the later does not (displays BrandId, also when editing it shows an Integer-Editor instead of a DropDown)?

answered on 02 Oct 2020, 07:10 AM

Hello Frank,

Generally, the basic scenario works in every version. You can check it live here and use it as a reference:
https://demos.telerik.com/aspnet-core/grid/foreignkeycolumn

If the issue in your original project remains, I would suggest that you open a formal Support Ticket and send us a very basic runnable isolated version of your application so we can further investigate the issue.

Regards,
Eyup
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.