Lookup Optimization

As a rule, the lookup column contains IDs from some field of the main data source, but instead of them, displays human-readable values from its own data source. At first launch, the DataGrid loads data from both data sources, thus lowering the performance.

To optimize the lookup column, you can send the human-readable values from the server as a part of the main data source alongside the IDs (like in this example). In this case, use the calculateDisplayValue option of the column to specify which field provides the human-readable values. With this optimization, the lookup data source will not be loaded until a user starts editing the lookup column.

$(function () {
        columns: [{
            caption: "Customer",
            // "CustomerName" provides human-readable values
            calculateDisplayValue: "CustomerName",
            dataField: "CustomerID",
            lookup: {
                valueExpr: "CustomerID",
                displayExpr: "ContactName",
                dataSource: {
                    store: {
                        // ...
                        key: "CustomerID"
        // ...
See Also