This is a migrated thread and some comments may be shown as answers.

Setting column.hidden & reorder error

4 Answers 174 Views
Grid
This is a migrated thread and some comments may be shown as answers.
YAVEON-RRA
Top achievements
Rank 1
YAVEON-RRA asked on 13 Nov 2019, 09:24 AM

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

Sort by
0
YAVEON-RRA
Top achievements
Rank 1
answered on 13 Nov 2019, 12:00 PM
Update: replaced setTimeout with running when ngZone.onStable emits. But feels wrong still...
0
Svet
Telerik team
answered on 15 Nov 2019, 07:19 AM

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

Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
YAVEON-RRA
Top achievements
Rank 1
answered on 15 Nov 2019, 08:54 AM

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

0
Charanpreet
Top achievements
Rank 1
Veteran
answered on 08 Mar 2021, 02:56 AM
I am using KendoUi dynamic columns into grid using angular and found reorder did not work properly if there are hidden fields. Reorder even also gave wrong current index of field chose to reorder.

 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.

 
Tags
Grid
Asked by
YAVEON-RRA
Top achievements
Rank 1
Answers by
YAVEON-RRA
Top achievements
Rank 1
Svet
Telerik team
Charanpreet
Top achievements
Rank 1
Veteran
Share this question
or