В столбце поиска отображается другое значение, зависящее от значения из другого столбца в той же строке внутри dxdatagrid (Dev Extreme)

Question

Я использую dxdatagrid в библиотеке Dev Extreme

Есть ли в любом случае, что я могу отфильтровать источник данных столбца поиска сразу после изменения значения другого столбца поиска в той же строке внутри сетки данных

Я создал это демо, чтобы объяснить:

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');

В режиме редактирования, есть ли способ, когда я выбираю другой веб-сайт, и в учетной записи отображается только учетная запись выбранного веб-сайта? Например, при выборе веб-сайта A в столбце поиска отображаются только учетные записи A1 и A2.

Спасибо

Answer 1

В вашем случае я предлагаю вам использовать параметры cellTemplate и editCellTemplate. Эти параметры позволяют отображать поле выбора для столбца "Веб-сайт" вручную. Затем вы сможете обрабатывать изменение значения WebsiteId с помощью onValueChanged опция:

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);
}

Образец здесь - http://jsfiddle.net/kb1681g0/2/

Для фильтрации данных вы можете использовать метод DataSource.filter().

Надеюсь эта информация будет полезна.