Question

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错误）运行时浏览器控制台：未捕获的错误：模板解析错误： kendo-grid-column-chooser不是一个已知元素： 1.如果kendo-grid-column-chooser是Angular组件，请验证它是否是此模块的一部分。 2.如果kendo-grid-column-chooser是Web组件，则将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错误）运行时浏览器控制台：未捕获的错误：模板解析错误：不能绑定到columnMenu，因为它不是kendo-grid的已知属性。 1.如果kendo-grid是Angular组件，并且具有columnMenu输入，则请验证它是否是此模块的一部分。 2.如果kendo-grid是Web组件，则将CUSTOM_ELEMENTS_SCHEMA添加到该组件的@ NgModule.schemas中以禁止显示此消息。 3.要允许任何属性，请在此组件的@ NgModule.schemas中添加NO_ERRORS_SCHEMA。

* 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",

  },

Kendo Angular用户界面-Kendo网格-列菜单-列选择器

Kendo UI for Angular-网格-列菜单-列选择器

0 个答案: