Not able to move column that has ngTemplate and custom cell formatting or use of custom cell template

[amitmoondra]

@hanastasov

Description

Cannot Move column that has custom information i.e if used ngtemplate and igxCell to describe the cell data. its happening even in the example on your website. https://stackblitz.com/github/IgniteUI/igniteui-live-editing-samples/tree/master/angular-demos/grid/grid-moving-styled-sample

Try moving column Change and Change (%) => you wont be able to.

Please can you solve this ASAP or let me know if you need more information.

• igniteui-angular version: 11.0.12
• browser: google-chrome: Version 88.0.4324.104 (Official Build) (64-bit)

Steps to reproduce

https://stackblitz.com/github/IgniteUI/igniteui-live-editing-samples/tree/master/angular-demos/grid/grid-moving-styled-sample

Try moving column Change and Change (%) => you wont be able to.

[wnvko]

I am not able to reproduce this in Google Chrome latest version 88.0.4324.146 (Official Build) (64-bit). @amitmoondra can you try to update your browser and let us know if issue is reproducible in the latest Google Chrome?

[amitmoondra]

Please check the video on this link, i upgraded the version and you will see the issue this is i am sure a bug, please let me know what i need to do more https://drive.google.com/file/d/1BebYp0XN9DLln9IGYFH6r0kU3A6AuSRZ/view?usp=sharing

[hanastasov]

Hi @amitmoondra ,

Please check the information in #8129. Basically it is the same issue, and we assume the issue is a result of the way Angular resolves child queries. @rkaraivanov also suggested a template to workaround such issues. Please let us know if it helps.

[amitmoondra]

Hi @hanastasov , I will check the solution. Thanks

[amitmoondra]

@hanastasov, The solution is good, but is there a way we can add more properties to column object, so we can actually make use of those properties in templates, that is the work around. In current way a lot of things can be done, but in the workaround we cannot access all properties of column objects that are not not needed by igx-column but can be added to column and used while looping the column objects, I dont want to add more dynamic functions as that would significantly slow down the grid performance.

[hanastasov]

@hanastasov, The solution is good, but is there a way we can add more properties to column object, so we can actually make use of those properties in templates, that is the work around. In current way a lot of things can be done, but in the workaround we cannot access all properties of column objects that are not not needed by igx-column but can be added to column and used while looping the column objects, I dont want to add more dynamic functions as that would significantly slow down the grid performance.

Hi, you must be able to add any property, just like shown:

    <igx-column [field]="column.fieldKey" [header]="column.headerText" [dataType]="column.dataType"
          [headerTemplate]="headerTemplate" [cellTemplate]="cellTemplate" [movable]="column.movable"
          [pinned]="column.pinned">
    </igx-column>```

What other property would you like to add?

[amitmoondra]

some custom properties, that is just for our custom use as we customize the grid.

[hanastasov]

You will be able to set only what igxColumnComponen exposes as properties. DO you mean thta you have a wrapper around the grid or the column that you want to pass custom properies?

[amitmoondra]

have wrapper around columns exactly, in our case. so igx-column tag is within a loop as we create lots of columns depending upon users view/choice => so that actually facilitated to use more properties other than just igx-grid-column restrictive props. But now with this template way there is no way to do that same. I hope you understand now ?

[rkaraivanov]

@amitmoondra Sounds like you need a input to provide additional template context from the column... For example something along the lines of :

    <igx-column [templateContext]="contextObject">
        <ng-template igxCell let-cell="cell">
            {{ cell.column.contextObject.prop }}
        </ng-template>
    </igx-column>

Is this the use case you are targetting?

[amitmoondra]

@amitmoondra Sounds like you need a input to provide additional template context from the column... For example something along the lines of :

    <igx-column [templateContext]="contextObject">
        <ng-template igxCell let-cell="cell">
            {{ cell.column.contextObject.prop }}
        </ng-template>
    </igx-column>

Is this the use case you are targetting?

This is exactly what i was looking for, thanks, i think i will achieve any functionality using this particular way. Thank you, will comment here once this way works

[rkaraivanov]

@amitmoondra In that case, I suggest that we close this issue and open a new feature request as currently you cannot achieve this functionality

@radomirchev Should I open a new feature request for this or should I leave to you?

[amitmoondra]

Yeah please create one and mark it as high priority, this needs to be done, its very important, so that we can customize the grid to the maximum.

[radomirchev]

@rkaraivanov Please, create a new one. Thank you!

[rkaraivanov]

@amitmoondra I'm closing this issue. You can follow the feature request here