Progress® Kendo UI® for Angular Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 13 Nov 2020 15:26 by ADMIN
Karim
Created on: 16 Sep 2020 05:37
Category: Grid
Type: Feature Request
3
Grid ForeignKey Column

As of right now it is a lot of work to properly implement a foreign key column and some of the features are only working with multiple workarounds. It would be nice to have a foreign key grid column as it already exists for ASP.NET. The ultimate goal would be to set the foreign key field which the column is bound to, pass a list of complex objects and set the text field and value field for that list. 

An example of an hypothetical implementation:

<kendo-grid-column field="ProductId" [data]="ProductList" [valueField]="'Id'" [textField]="'Name'"></kendo-grid-column>

Currently all of this has to be done manually by defining a cell template and edit template which comes with a couple of limitations. The greatest limitation is that the out of the box sorting and filtering does not work since the grid will sort/filter by the Id instead of the cell template value. For the filtering additionally a custom made filter needs to be implemented for each column which displays the DropDown in the filter menu.

For ASP.NET all of these things come out of the box and are extremely helpful. Here is a link to the ASP.NET implementation for a foreign key column: https://demos.telerik.com/aspnet-core/grid/foreignkeycolumn

I wish something like that will be implemented in Angular as well in the near future as it makes the development extremely hard without this feature.
I saw the sorting/filtering together with the foreign key column as one of the main reasons to choose Telerik as it is extremely helpful and setting it apart from its competitors. 

4 comments
ADMIN
Martin Bechev
Posted on: 13 Nov 2020 15:26

Hi Karim,

Please take a look at the following examples from our documentation where it is explained how to create a custom DropDownList filter:

https://www.telerik.com/kendo-angular-ui/components/grid/filtering/reusable-filter/#row-filtering

 <kendo-grid-column field="Category.CategoryName" title="Category">
        <ng-template kendoGridFilterCellTemplate let-filter>
            <my-dropdown-filter
                [filter]="filter"
                [data]="distinctCategories"
                textField="CategoryName"
                valueField="CategoryID">
            </my-dropdown-filter>
        </ng-template>
    </kendo-grid-column>

where a single dataIItem represents:

{
        "ProductID": 1,
        "ProductName": "Chai",
        "SupplierID": 1,
        "CategoryID": 1,
        "QuantityPerUnit": "10 boxes x 20 bags",
        "UnitPrice": 18,
        "UnitsInStock": 39,
        "UnitsOnOrder": 0,
        "ReorderLevel": 10,
        "Discontinued": false,
        "Category": {
            "CategoryID": 1,
            "CategoryName": "Beverages",
            "Description": "Soft drinks, coffees, teas, beers, and ales"
        },
        "FirstOrderedOn": new Date(1996, 8, 20)
    }

 

Also please check out how to create a filter, passing a property field that is part of an object (e.g. CategoryIDfrom above dataItem srtucture) to the field of the column:

<kendo-grid-column field="CategoryID" title="Category" width="180">
            <ng-template kendoGridFilterMenuTemplate
                let-column="column"
                let-filter="filter"
                let-filterService="filterService"
                >
                <multicheck-filter
                  [isPrimitive]="false"
                  [field]="column.field"
                  [currentFilter]="filter"
                  [filterService]="filterService"
                  textField="CategoryName"
                  valueField="CategoryID"
                  [data]="categories"></multicheck-filter>
            </ng-template>
            <ng-template kendoGridCellTemplate let-dataItem>
                {{dataItem.Category?.CategoryName}}
            </ng-template>
        </kendo-grid-column>

For more details end example, check the following article:

https://www.telerik.com/kendo-angular-ui/components/grid/filtering/reusable-filter/#multi-checkbox-menu-filtering

Regards,
Martin
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/.

Karim
Posted on: 08 Nov 2020 21:15
Well, how do I solve the sorting/filtering issue for these columns without an implementation for a ForeignKey column?
ADMIN
Martin Bechev
Posted on: 29 Sep 2020 09:10

Hi Karim,

Thank you for the logged feature request and additional details provided on it.

It seems like a nice enhancement to have. However, exactly the same implementation cannot be achieved since the grid needs to modify the data items in order to work properly, but the grid currently does not modify the collection.

We will track the customer demand and will consider providing an Angular directives solution instead, based on the interest.

Regards,
Martin
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/.

Karim
Posted on: 21 Sep 2020 17:47

An example of how SyncFusion handles this type of scenario:

https://ej2.syncfusion.com/angular/documentation/grid/how-to/complex-column-as-foreign-key-column/

Create an account Log In
View
Type
Status
Category