Rank 1
Hi,
I'm trying to create some sort or state persistence without having to *ngFor the columns in markup and remap all columns attributes, because that way it's hard to use column templates etc...
To reach that I'm using the grid.reorderColumn() method to restore column order instead.
The issue with that is, when setting hidden columns visible `grid.columns[i].hidden = true` and immidiately reorder that column, the grid internal method updateColumnIndices() throws an error, because it doesn't get the newly visible column from expandColumnsWithSpan() and expandedColumns.indexOf(source) is -1.
TypeError: Cannot set property 'orderIndex' of undefined
at GridComponent.push../node_modules/@progress/kendo-angular-grid/dist/fesm5/index.js.GridComponent.updateColumnIndices (https://localhost:4201/vendor.js:196833:43)
As a quick an dirty hack I'm now restoring visibilty first and then using setTimeout to restore sortOrder. Which works "for now" but doesn't seem to be reliable.
Also, setting `grid.columns[i].hidden` doesn't fire columnVisibilityChange.
Am I missing something here? Any idea on how to solve that?
Why are there no methods like getOptions/setOptions as with the jQuery grid?
4 Answers, 1 is accepted
Rank 1
Hi Robert,
Indeed, the Kendo UI for Angular and Kendo UI for jQuery are based on two different technologies. Thus, their built-in functionality might also vary. As Kendo UI for Angular is a relatively new product we are still releasing new feature and enhancements for it. If the referenced getOptions/setOptions methods are required, could you log a new feature request item in our public Feedback Portal describing their desired functionality. That will help us to track the demand for such methods and based on the custom demand and eventually provide them in a future release of Kendo UI for Angular. Thank you in advance.
Indeed, at the moment we recommend using *ngFor to render the columns whenever it is needed to persist the state of the Grid. Such approach makes sure, that whenever the used columns array is modified by reference it will trigger Angular's change detection mechanism, which will cause the Grid to be re-rendered. The column templates can still be used within the *ngFor. For the purpose, they can be rendered for the required columns by using Angular's *ngIf directive.
About the use of setTimeout() or ngZone.onStable, it seems that one of these is required as the Grid hasn't finished re-rendering after its columns have been made visible. The field columns returns a QueryList of the current columns of the Grid. But it isn't documented to be used as an input property that allows to change the settings of the columns. That is why, using ngZone.onStable is a valid approach of achieving the end result.
Let me know in case I can provide any further information about this case. Thank you in advanace.
Regards,
Svetlin
Progress Telerik
Rank 1
Hi Svetlin,
thank you for your thorough answer.
I wasn't aware of the fact that Kendo UI for Angular and Kendo UI for jQuery are not sharing the same base.
Basing on your reply I believe we can keep our implementation as it's designed today. I'll keep in mind to give that *ngFor approach a second chance as soon as we have to add or change some functionality touching that topic.
I'll add that request to your feedback portal, as i believe it would be a great simplification and added value for your product.
Thanks again and keep up thegreat work,
Robert
Rank 1
Veteran
Then I invested sometime to figure out the solution , here's is the fix:
Change a little in ColumnReorderEvent find current index of column.
public onReorder(e: any): void {
/"
const reorderedColumn = this.grid2Settings.columnsConfig.splice(e.oldIndex, 1);
*/
let currentIndex:any=this.gridSettings.columnsConfig.findindex(col => col.field === e.column.field)
const reorderedColumn = this.grid2Settings.columnsConfig.splice(currentIndex, 1);
this.grid2Settings.columnsConfig.splice(e.newIndex, 0, ...reorderedColumn);
this.saveGrid2();
}
Hope it helps.