Пользовательский фильтр AgGrid не создается до взаимодействия - PullRequest
Новая
       56

Пользовательский фильтр AgGrid не создается до взаимодействия

0 голосов
/ 14 февраля 2019

У меня есть пользовательский компонент фильтра для столбца в моей сетке.Я заметил, что компонент фильтра не создается, пока я не нажму на значок фильтра в заголовке столбца.Это означает, что данные не фильтруются в соответствии с моими настройками по умолчанию (например, отфильтровывать записи, где status == StatusEnum.Complete).

В качестве обходного пути я обнаружил, что могу получить экземпляр фильтра в событии onGridReady, вызвав api.getFilterInstance('status'), и это вызывает создание компонента фильтра и, следовательно, применение фильтрации по умолчанию.

Этот обходной путь кажется немного неуклюжим.Переменная filter не используется в событии onGridReady, которое вызывает предупреждения в IDE / сборке.Другой разработчик может прийти и удалить эту строку кода, думая, что в этом нет необходимости.

Есть ли лучший способ заставить мой пользовательский фильтр быть создан при создании сетки?Я использую AgGrid 17.1 и Angular 4.4.

Сетка настроена так: 

gridOptions: GridOptions = {
    enableFilter: true,
    onGridReady: (event) => {
        let filter = event.api.getFilterInstance("status"); // forces the filter component to be constructed
        let data = this.loadAsyncData();
        event.api.setRowData(data);
    },
    columnDefs: [
    ...
    {
        headerName: "Status",
        field: "status",
        filterFramework: MyCustomStatusFilterComponent,
        filterParams: {
            valueGetter: (obj) => { return obj.data.statusEnum; },
            hideCompleteByDefault: true,
            ...
        }
    },
    ....
    ]
}

Я настроил пример, который демонстрирует проблему .Обратите внимание на «взлом» в строке 63 из app.component.ts.

Ответы [ 2 ]

0 голосов
/ 23 февраля 2019

Основная проблема в том, что вы боретесь с тем, как компоненты фильтра работают по умолчанию.Компания ag-grid приложила значительные усилия для создания графического интерфейса фильтра по требованию (при нажатии на значок фильтра столбца).Это сделано для того, чтобы избежать снижения производительности из-за того, что 100 различных компонентов фильтра будут бессмысленно инициализироваться при запуске сетки (если у вас 100 столбцов).

Если вы хотите сохранить настройки фильтра (отфильтруйте «Завершено») внутри ваш пользовательский компонент фильтра, затем придерживайтесь того, что у вас есть.Я сомневаюсь, что есть лучший способ взлома.

Однако, что вы действительно должны сделать, это переместить условие фильтра в за пределы пользовательского компонента фильтра.Представьте, что у вас другая страница, где вы хотите использовать другую фильтрацию в столбце «Состояние» по умолчанию.Это будет сложно сделать с вашим текущим дизайном.

Ваш код должен выглядеть примерно так: 

onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    // hack to get default filtering
    //params.api.getFilterInstance('status');

    params.api.setRowData(this.rowData);

    // apply filter model
    // use same filter model that enterprise set filter uses, since your filter is similar
    params.api.setFilterModel({
        status: {
            filterType: 'customStatusFilter',
            values: ['New', 'Working on it'],
        },
    });

    params.api.sizeColumnsToFit();
}

Конечно, чтобы использовать это, вам придется существенно переписать свой пользовательский код.компонент фильтра.Я попытался сделать это, но это заняло слишком много времени, и я действительно не знаю Angular, поэтому я представляю свой ответ как есть.Ваша текущая реализация вызовет у вас много проблем, если вы попытаетесь использовать ее (или смешать с другими функциями ag-grid).

Возможно, эти ссылки помогут:

0 голосов
/ 23 февраля 2019

Прежде всего - это две независимые вещи, пользовательский фильтр и инициализация фильтра.

Я полагаю, вы смешали эти две фазы и пытаетесь достичь неожиданного результата.

Ваш пользовательский фильтрне должно содержать предопределенную логику cuz init произойдет только при первом касании вашего фильтра , вам нужно разделить свою логику, а затем в onGridReady вы можете выполнить setModel с необходимыми вещами.или продолжайте взламывать, как вы уже упоминали

...