Lookup column display different value depend on value from another column in the same row inside dxdatagrid (Dev Extreme)

Question

I am using dxdatagrid in Dev Extreme library

Is there any way that I can filter data source of the lookup column right after change value of another lookup column in the same row inside the datagrid

I created this demo to explain:

var listAccount = [
    { ID: 1, WebsiteID: 1, Website: 'A', AccountID: '1', Username: 'A1' },
    { ID: 2, WebsiteID: 1, Website: 'A', AccountID: '2', Username: 'A2' },
    { ID: 3, WebsiteID: 2, Website: 'B', AccountID: '4', Username: 'B1' },
    { ID: 4, WebsiteID: 3, Website: 'C', AccountID: '7', Username: 'C1' },
    { ID: 5, WebsiteID: 4, Website: 'D', AccountID: '8', Username: 'D1' },
    { ID: 6, WebsiteID: 5, Website: 'E', AccountID: '9', Username: 'E1' }
];

var websites = [
   { WebsiteID: 1, Website: 'Website A' },
   { WebsiteID: 2, Website: 'Website B' },
   { WebsiteID: 3, Website: 'Website C' },
   { WebsiteID: 4, Website: 'Website D' },
   { WebsiteID: 5, Website: 'Website E' }
];

var account = [
   { AccountID: 1, Username: 'A1', WebsiteID: 1 },
   { AccountID: 2, Username: 'A2', WebsiteID: 1 },
   { AccountID: 3, Username: 'A3', WebsiteID: 1 },
   { AccountID: 4, Username: 'B1', WebsiteID: 2 },
   { AccountID: 5, Username: 'B2', WebsiteID: 2 },
   { AccountID: 6, Username: 'B3', WebsiteID: 2 },
   { AccountID: 7, Username: 'C1', WebsiteID: 3 },
   { AccountID: 8, Username: 'D1', WebsiteID: 4 },
   { AccountID: 9, Username: 'E1', WebsiteID: 5 },
   { AccountID: 10, Username: 'E2', WebsiteID: 5 }
];

var grid = $('#myGrid').dxDataGrid({
    dataSource: listAccount,
    columns: [
{
    dataField: 'ID'
},
{
    dataField: 'WebsiteID',
    caption: 'Website',
    lookup: {
        dataSource: websites,
        displayExpr: 'Website',
        valueExpr: 'WebsiteID',
    }
},
{
    dataField: 'AccountID',
    caption: 'Account',
    lookup: {
        dataSource: account,
        displayExpr: 'Username',
        valueExpr: 'AccountID',
    }
}],
    editing: {
        editMode: 'batch',
        editEnabled: true,
        insertEnabled: true
    }
}).dxDataGrid('instance');

On editing mode, is there any way when I select another website and the account only shows the account of selected website? Eg: When I choose website A, only account A1 & A2 display in the lookup column

To filter dxDataGrid data by a value you can use the filterRow option. More information here. — Sergey
@Sergey thanks for response but I don't think it work in this case, the [link]filterRow[link] seem to work only with dxdatagrid datasource, in this case I need datasource in lookup change immediately depend on the value I change in another column in the same row — S.A

Sergey Sergey · Accepted Answer · 2015-09-22T07:28:32

In your case I suggest you use the cellTemplate and editCellTemplate options. These options allow you to render the selectbox for the 'Website' column manually. Then, you will be able to handle value change of the WebsiteId using the onValueChanged option:

cellTemplate: function($cell, cellData){
    $cell.text('Website ' + cellData.data.Website);
},
editCellTemplate: function($cell, cellData){
    var $selectBox = $("<div>").dxSelectBox({
        dataSource: websites,
        displayExpr: 'Website',
        valueExpr: 'WebsiteID',
        value: cellData.data.WebsiteID,
        onValueChanged: function(){
            // filter your data here...
        }
    });

    $cell.append($selectBox);
}

The sample is here - http://jsfiddle.net/kb1681g0/2/

To filter data you can use the DataSource.filter() method.

Hope this information will helpful.

Lookup column display different value depend on value from another column in the same row inside dxdatagrid (Dev Extreme)

1 Answers