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

Answer 1

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.