Hello Kendo Team,
I am using below given demo to save column show/hide for future use. But, it is not working for me.
I tried your demo in plunker, it is working fine there. but not working in my code.
https://www.telerik.com/kendo-angular-ui/components/grid/how-to/persist-state/#toc-handling-grid-events
My grid is given below.
<kendo-grid #grid id="gridInvoice" name="gridInvoice"
[kendoGridGroupBinding]="gridData"
[pageSize]="pageSize"
[scrollable]="'virtual'"
[sortable]="true"
[resizable]="true"
[reorderable]="true"
[filterable]="{filter:true}"
[columnMenu]="true"
[rowHeight]="35"
[height]="550"
[selectable]="selectableSettings"
[kendoGridSelectBy]="'itblarcharge_id'"
[selectedKeys]="mySelection"
[rowClass]="isDisabled"
[groupable]="true"
[height]="530"
[sortable]="{ allowUnsort: true, mode:'multiple' }"
[sort]="state.sort"
[filter]="state.filter"
[group]="state.group"
(columnReorder)="onReorder($event)"
(selectedKeysChange)="onSelectedKeysChange($event)"
(filterChange)="filterChange($event)"
(dataStateChange)="dataStateChange($event)"
(columnVisibilityChange)="onVisibilityChange($event)">
<ng-template kendoGridToolbarTemplate>
<button type="button" kendoGridExcelCommand icon="file-excel">Export to Excel</button>
<!-- <button class="k-button" (click)="saveGridSettings(grid)">Save current state</button> -->
</ng-template>
<ng-container *ngFor="let format of DataFormat">
<kendo-grid-column [field]="format.FieldName" [title]="format.ColumnHeader" [width]="150" [hidden]="format.IsHidden"
[format]="getFormat(format.ColumnFormat)">
<ng-template kendoGridFilterMenuTemplate let-column="column" let-filter="filter" let-filterService="filterService">
<multicheck-filter [isPrimitive]="true" [field]="column.field" [filterService]="filterService" [currentFilter]="filter" [data]="Checkprimitive(column.field,format.ColumnFormat)"></multicheck-filter>
</ng-template>
</kendo-grid-column>
</ng-container>
<kendo-grid-excel fileName="Products.xlsx" [fetchData]="allData"></kendo-grid-excel>
</kendo-grid>
My packages are given below.
{
"name": "mvcangular-project",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animation": "^4.0.0-beta.8",
"@angular/animations": "^5.2.0",
"@angular/cdk": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/material": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"@ng-bootstrap/ng-bootstrap": "^2.0.0",
"@progress/kendo-angular-buttons": "^4.1.1",
"@progress/kendo-angular-dateinputs": "^3.0.0",
"@progress/kendo-angular-dropdowns": "^2.1.0",
"@progress/kendo-angular-excel-export": "^1.0.7",
"@progress/kendo-angular-grid": "^3.3.0",
"@progress/kendo-angular-inputs": "^3.0.0",
"@progress/kendo-angular-intl": "^1.4.0",
"@progress/kendo-angular-l10n": "^1.2.0",
"@progress/kendo-data-query": "^1.3.0",
"@progress/kendo-drawing": "^1.5.5",
"@progress/kendo-theme-default": "^2.53.2",
"core-js": "^2.4.1",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"
},
"devDependencies": {
"@angular/cli": "~1.7.4",
"@angular/compiler-cli": "^5.2.10",
"@angular/language-service": "^5.2.0",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"jquery": "^3.3.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
}
Please help me in this,
6 Answers, 1 is accepted
There are no obvious issues with the provided markup and package versions.
Can you please describe in further details what are the issues that you are facing, as well as some more information about the component and service implementation?
Ideally, please send us a similar isolated runnable project where the issues can be observed so we can inspect it further, and try to provide the suggestions that are most suitable to the specific use case. Thank you in advance.
Regards,
Dimiter Topalov
Progress Telerik
Rank 1
Hi Dimiter,
My zip file will give you full project accept node_modules and e2e folder. And, the second file will give you data which I am binding to the grid using API. I took data from API, stringify It. then bound it for you to find the issue. You will need to convert the stringify data into JSON array and append it to see the issue.
I hope, I have given enough data. Please, help me with this.
Rank 1
Hello,
My attached zip file will give you my full project (src folder and others config files). The second file will give the data to use in binding to the grid. My API will not work for you. So, I have given my API data as Stringify. You have to convert it in JSON array to bind it.
Please, help me in solving the issue.
Rank 1
Hello,
My attached zip file will give you my full project (src folder and others config files). The second file will give the data to use in binding to the grid. My API will not work for you. So, I have given my API data as Stringify. You have to convert it in JSON array to bind it.
Please, help me in solving the issue.
Rank 1
Thank you for sending the sample application. The issue is caused by the fact that the Grid package version is locked to 3.3.0 in the package-lock.json file ( "@progress/kendo-angular-grid": "^3.3.0" syntax in the package.json file is correct and should install the latest Grid version upon npm install, but the package-lock.json file is preventing this).
The columnVisibilityChange event was added in the 3.5.0 version of the Grid package (which the package-lock.json file is preventing from installing).
To ensure that you are able to upgrade to the latest versions, please delete the package-lock.json file and the node_modules folder and run "npm install" again. Sometimes clearing the NPM cache is also necessary.
If you wish to keep some versions locked in the package-lock.json file, just update all Kendo UI packages' version.
The latest versions of our packages can be checked in the Changes Log sections of each package documentation as well as by running "npm view @progress/--package-name-- dist-tags":
I hope this helps.
Regards,
Dimiter Topalov
Progress Telerik