Sorting on Foreign Key column

[Bhoopendra]

In our application to display data we are using Kendo Grid with Foreign Key columns. We are facing problem while sorting these Foreign Key columns. If we try to sort the column, it is getting sorted by Id instead of column text.

We tried to implement the solution given at http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/foreign-key-column-sorting-by-text . but this solution is working at client side but it is not working at server side application.

Do we have any way to achieve this?

[Boyan Dimitrov]

Hello Bhoopendra,

 

Please refer to the following forum thread, where same problem is discussed and there are some workarounds provided. 

 

Regards,
Boyan Dimitrov
Telerik

 

 

[Bhoopendra]

Hi Boyan,

We have already have gone through the link http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/foreign-key-column-sorting-by-text .On this link Javascript code has been provided but we need to implement it into views.

We appreciate if you can provide us code segment equivalent to this script which can be used in views (MVC)?

 

[Boyan Dimitrov]

Hello Bhoopendra,

The same approach is not applicable for the MVC wrapper due to the way how MVC wrappers are being configured. There is no way to configure a calculated column in the DataSource configuration with the razor.

A possible workaround would be to have a custom column (hidden in the UI) that holds the text for each Category (the foreign key itself is bound to the integer column). When user tries to sort the foreign key you can explicitly sort the DataSouce by the hidden column. Please refer to the code snippets below: 

columns.Bound(p => p.CategoryName).Hidden();
        columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "CategoryID", "CategoryName")
            .Title("Category").Width(200).Sortable(false);

.Events(ev => ev.Save("save"))

function save(e) {
       // this code finds what is the text value associated with the selected CategoryID (number)and sets the hidden column to this text
        e.model.set("CategoryName", this.columns[2].values[e.values.CategoryID - 1].text);
    }

$(document).ready(function () {
        //since the sorting is disabled for this column you can bind to the click of the header and perform custom sorting by the hidden column
        $("th[data-field='CategoryID']").click(function (e) {
            $("#grid").data().kendoGrid.dataSource.sort({ field: "CategoryName", dir: "desc" });
        })
    });

Please note that such scenario is not officially supported and some custom logic should be implemented. In the example above it is shown some sample code that does not include validation logic and etc. 

Regards,
Boyan Dimitrov
Telerik

 

 

[Raja Patukuri]

Hi Boyan,

Thank you for your reply. The answer you provided would be definitely useful but it is just doing Descending on click of the column header but not Ascending. And up and down arrows on the column header are missing. Can you please extend the answer to full fill these requirements since usually everybody needs it.

[Tsvetomir]

Hi Raja,

The sort of the foreignkey column by the text and not the ID has been discussed in the forum thread below:

https://www.telerik.com/forums/sort-by-foreign-key-text#FoYpnCuUFEi915Q0cRjsFA

Give the approach above a try and let me know if there is a need for additional details.

 

Kind regards,
Tsvetomir
Progress Telerik