Quantcast
Channel: Telerik Forums RSS
Viewing all articles
Browse latest Browse all 99250

Sorting on Foreign Key column

$
0
0

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 

Viewing all articles
Browse latest Browse all 99250

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>