Пользовательский интерфейс Kendo для Angular - Kendo Grid - Меню столбцов - Выбор столбцов - PullRequest
Новая
       19

Пользовательский интерфейс Kendo для Angular - Kendo Grid - Меню столбцов - Выбор столбцов

0 голосов
/ 26 мая 2019

Kendo UI for Angular - Сетка - Меню столбцов - Выбор столбцов 

Angular v5.1.1 + Kendo Grid v3.14.2

ПОМОЩЬ, Моя Сетка работает красиво, пока я не попытаюсь добавить функцию меню столбцов / Выбор столбцов. Я хочу, чтобы пользователь мог выбирать столбцы в сетке, которые он отображает, с помощью меню, которое можно выбрать при наведении мыши.

Я испробовал оба варианта, предоставленных Telerik, неясно, какой должен быть правильный ответ ...

(1) [www.telerik.com/kendo-angular-ui/components/grid/api/ColumnChooserComponent/][1]
(2) [www.telerik.com/kendo-angular-ui/components/grid/columns/menu/][1]

app.component.html (template)

(1) 

        <kendo-grid [data]="view | async"
                    [pageSize]="pageSize"
                    [skip]="skipRecord"
                    [filterable]="true"
                    [pageable]="true"
                    (pageChange)="pageChange($event)"
                    [scrollable]="none"
                    [sortable]="true"
                    [sort]="sort"
                    (sortChange)="sortChange($event)">
            <ng-template kendoGridToolbarTemplate>
                <kendo-grid-column-chooser></kendo-grid-column-chooser>      
            </ng-template>

(1 ОШИБКА) консоль браузера во время выполнения: ошибка Uncaught: ошибки синтаксического анализа шаблона: kendo-grid-column-chooser не является известным элементом: 1. Если kendo-grid-column-chooser является угловым компонентом, то убедитесь, что он является частью этого модуля. 2. Если kendo-grid-column-chooser является веб-компонентом, добавьте CUSTOM_ELEMENTS_SCHEMA в @ NgModule.schemas этого компонента, чтобы подавить это сообщение.

- ИЛИ -

(2) 

<kendo-grid [data]="view | async"
                    [pageSize]="pageSize"
                    [skip]="skipRecord"
                    [filterable]="true"
                    [columnMenu]="{ columnChooser: true }"                  
                    [pageable]="true"
                    (pageChange)="pageChange($event)"
                    [scrollable]="none"
                    [sortable]="true"
                    [sort]="sort"
                    (sortChange)="sortChange($event)">

(2 ОШИБКА) консоль браузера во время выполнения: ошибка Uncaught: ошибки синтаксического анализа шаблона: Не могу связать с columnMenu, так как это не известное свойство кендо-сетки. 1. Если кендо-сетка является угловым компонентом и имеет входное значение columnMenu, то убедитесь, что оно является частью этого модуля. 2. Если kendo-grid является веб-компонентом, добавьте CUSTOM_ELEMENTS_SCHEMA в @ NgModule.schemas этого компонента, чтобы подавить это сообщение. 3. Чтобы разрешить любое свойство, добавьте NO_ERRORS_SCHEMA к @ NgModule.schemas этого компонента. 

* kendoGridExcelCommand works great later in template like below

            <ng-template kendoGridToolbarTemplate>
                <button kendoGridExcelCommand>Export to Excel</button>
            </ng-template>

Ожидаемый результат будет отображать меню package.json: 

** package.json

  "dependencies": {
    "@angular/animations": "^5.1.1",
    "@angular/common": "^5.1.1",
    "@angular/compiler": "^5.1.1",
    "@angular/compiler-cli": "^5.1.1",
    "@angular/core": "^5.1.1",
    "@angular/forms": "^5.1.1",
    "@angular/http": "^5.1.1",
    "@angular/platform-browser": "^5.1.1",
    "@angular/platform-browser-dynamic": "^5.1.1",
    "@angular/platform-server": "^5.1.1",
    "@angular/router": "^5.1.1",
    "@ngtools/webpack": "^1.9.1",
    "@progress/kendo-angular-buttons": "^4.0.0",
    "@progress/kendo-angular-dateinputs": "^2.2.0",
    "@progress/kendo-angular-dialog": "^3.4.0",
    "@progress/kendo-angular-dropdowns": "^2.1.0",
    "@progress/kendo-angular-excel-export": "^1.0.7",
    "@progress/kendo-angular-grid": "^3.0.0",
    "@progress/kendo-angular-inputs": "^2.2.0",
    "@progress/kendo-angular-intl": "^1.4.0",
    "@progress/kendo-angular-l10n": "^1.1.0",
    "@progress/kendo-angular-layout": "^3.1.0",
    "@progress/kendo-angular-popup": "^2.2.0",
    "@progress/kendo-angular-tooltip": "^0.4.0",
    "@progress/kendo-data-query": "^1.2.2",
    "@progress/kendo-drawing": "^1.5.2",
    "@progress/kendo-theme-default": "^2.47.0",

    "angular2-template-loader": "0.6.2",
    "applicationinsights-js": "^1.0.14",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^2.0.1",

    "jquery": "3.2.1",

    "rxjs": "^5.5.2",
    "typescript": "^2.5.3",

  },
...