Настройка списка пунктов меню столбца

В настоящее время я исследую SyncFusion grid syncfusion-ej2 для Angular 2 и нашел отличную функцию - включить меню столбцов, чтобы все элементы управления (сортировка, группировка, фильтр) были в одном месте.

Но этого недостаточно для моих нужд, и я ищу способы настроить список элементов в меню столбца, например Я хочу иметь возможность добавлять свои элементы с настраиваемыми действиями, чтобы реагировать на щелчок / выбор действий пользователя.

Например, я хочу добавить элемент, чтобы напрямую скрыть текущий столбец или закрепить этот столбец.

Подскажите, возможно ли это, и как это реализовать, если это возможно? Или мне надо создать нестандартный компонент для этих манипуляций?

Заранее спасибо.


typescript javascript angular syncfusion
person Alexandr    schedule 08.01.2018    source источник
comment
Вам следует выполнить обновление до версии 5. Версия 2 старше года и содержит много устаревших модулей.   -  person Lazar Ljubenović    schedule 08.01.2018
comment
Извините моя ошибка. Мы используем последнюю версию Angular. Но все же, можно ли таким образом манипулировать сеткой SyncFusion с помощью Angular 5?   -  person Alexandr    schedule 08.01.2018

Ответы (2)


arrow_upward
2
arrow_downward

Выпущен Essential JS 2 Grid v 15.4.24, и в него включено исправление проблемы «Запуск событий контекстного меню». Пожалуйста, найдите ниже рабочий образец плунжера.

columnMenuClick(args){
    if(args.item.id === 'gridclearsorting'){
        this.grid.clearSorting();
    }
}

Демо

В этом примере мы добавили параметр меню настраиваемого столбца, чтобы очистить сортировку по сетке.

person Ramdhas    schedule 10.01.2018

arrow_upward
1
arrow_downward

Что ж, ребята, я нашел решение своего вопроса в разделе документации TypeScript прямо здесь

К сожалению, сейчас это не работает, как показано в демо. Но они сказали, что эта проблема уже исправлена ​​, и выпуск будет сегодня, в январе. 10, 2018.

Вот рабочий пример версии TypeScript.

import { Grid, ColumnMenu, Sort, Page } from '@syncfusion/ej2-grids';
import { MenuEventArgs } from '@syncfusion/ej2-navigations';
import { data  } from './datasource.ts';

Grid.Inject(ColumnMenu, Page, Sort);
// The problem is in the base constant value
// columnMenuClick should have a value "columnMenuClick"
// but it has a value "contextMenuClick" like contextMenuClick constant for context menu
let grid: Grid = new Grid({
    dataSource: data,
    allowPaging: true,
    allowSorting: true,
    showColumnMenu: true,
    columnMenuItems:[{text:'Clear Sorting', id:'gridclearsorting'}],
    contextMenuClick: function(args: MenuEventArgs){
        if(args.item.id === 'gridclearsorting'){
            grid.clearSorting();
        }
    },
    sortSettings:{
        columns:[{direction: "ascending", field: "OrderID"}]
    },
    columns: [
        { field: 'OrderID', headerText: 'Order ID', width: 200, textAlign: 'right', showInColumnChooser: false },
        { field: 'Freight', width: 150, format: 'C2', textAlign: 'right', editType: 'numericedit' },
        { field: 'ShipName', headerText: 'Ship Name', width: 300 },
        { field: 'ShipCountry', headerText: 'Ship Country', visible: false, width: 200 },
        { field: 'ShipCity', headerText: 'Ship City', width: 200 }
    ]
});
grid.appendTo('#Grid');

Here is a working example of Angular 4 version. 

import { Component, OnInit, ViewChild } from '@angular/core';
import { SortService, ResizeService, GroupService, ColumnMenuService, PageService, FilterService } from '@syncfusion/ej2-ng-grids';
import { ContextMenuItem, GroupSettingsModel, FilterSettingsModel, EditSettingsModel, ColumnMenuItemModel } from '@syncfusion/ej2-ng-grids';
import { GridComponent } from '@syncfusion/ej2-ng-grids';
import { MenuEventArgs } from '@syncfusion/ej2-navigations';
import { data } from './data';

@Component({
    selector: 'control-content',
    templateUrl: 'columnmenu.html',

})
export class ColumnMenuComponent implements OnInit {
    public data: Object[];
    public groupOptions: GroupSettingsModel;
    public filterSettings: FilterSettingsModel;
    public columnMenuItems: ColumnMenuItemModel[];
    @ViewChild('grid')
    public grid: GridComponent;

    ngOnInit(): void {
        this.data = data.slice(0, 60);
        this.groupOptions = { showGroupedColumn: true };
        this.filterSettings = { type: 'checkbox' };
        this.columnMenuItems = [{text:'Clear Sorting', id:'gridclearsorting'}];
    }

    public columnMenuClick(args: MenuEventArgs): void {
    console.log('123');
      if(args.item.id === 'gridclearsorting'){
            this.grid.clearSorting();
        }
    }
}

person Alexandr    schedule 10.01.2018