Transposition of columns encountered while editing grid in case of there were frozen columns.

[techlandandyzhang]

My grid columns are Dynamic add。

Transposition of columns encountered while editing grid in case of there were frozen columns.

https://stackblitz.com/edit/angular-ae4eds?file=app.component.html

[Ajith Govarthan]

Hi techlandandyzhang, 

Thanks for contacting Syncfusion support. 

Based on your query, you want to dynamically generate the edit template in your Grid application with frozen columns. By default, in our EJ2 Grid we suggest you generate static input elements for each fields to bind the data and ng name attributes properly. When you dynamically generate the template elements, the input element will not be available properly to apply the related actions. For your convenience we have attached the sample,  please refer them for your reference.  

Code Example: 

App.component.html 

<ng-template #editSettingsTemplate let-data> 

            <div ngForm #orderForm="ngForm"> 

                <table class="e-table e-inline-edit" cellspacing="0.25"> 

                    <colgroup> 

                            <col style="width: 120px;"> 

                            <col style="width: 120px;"> 

                            <col style="width: 120px;"> 

                            <col style="width: 130px;"> 

                            <col style="width: 150px;"> 

                    </colgroup> 

                    <tbody> 

                        <tr> 

                            <td style="text-align: right" class='e-rowcell'> 

                                <div class="e-input-group" [ngClass]= "{'e-disabled': !data.isAdd}"> 

                                    <input class="e-input e-field" [(ngModel)]="orderData.OrderID" required [attr.disabled]="!data.isAdd ? '' : null" name='OrderID' type="text" (focus)="focusIn($event.target)" 

                                        (blur)="focusOut($event.target)" #OrderID style="text-align: right"  /> 

                                </div> 

                            </td> 

                            <td class='e-rowcell'> 

                                <div class="e-input-group"> 

                                    <input class="e-input e-field" name='CustomerName' [(ngModel)]="orderData.CustomerName" required type="text" (focus)="focusIn($event.target)" 

                                        (blur)="focusOut($event.target)" #CustomerName /> 

                                </div> 

                            </td> 

                            <td style="text-align: right" class='e-rowcell'> 

                                <ejs-numerictextbox name="Freight" id="Freight" [(ngModel)]="orderData.Freight" floatLabelType='Never'></ejs-numerictextbox> 

                            </td> 

                            <td style="text-align: right" class='e-rowcell'> 

                                <ejs-datepicker id="OrderDate" name="OrderDate" required [(ngModel)]="orderData.OrderDate" floatLabelType='Never'></ejs-datepicker>                             

                            </td> 

                            <td class='e-rowcell'> 

                                <ejs-dropdownlist id="ShipCountry" name="ShipCountry" [(ngModel)]="orderData.ShipCountry" [dataSource]='shipCountryDistinctData' [fields]="{text: 'ShipCountry', value: 'ShipCountry' }" popupHeight='300px' floatLabelType='Never'></ejs-dropdownlist> 

                            </td> 

                        </tr> 

                    </tbody> 

                </table> 

            </div> 

        </ng-template> 

     

Sample-Link: https://stackblitz.com/edit/angular-ik7igh?file=app.component.html 

Please get back to us if you need further assistance. 

Regards, 

Ajith G. 

[techlandandyzhang]

There is no doubt on static-columns.

However, it is required to use dynamic columns for the project I’m working on.

So, is there any other solution that can figure out this problem?

[Ajith Govarthan]

Hi techlandandyzhan, 

Thanks for the update. 

Currently we are validating your dynamic edit template elements generation requirement at our end and we will update further details on 23^rd November 2021. 

Until then we appreciate your patience. 

Regards, 

Ajith G 

[Ajith Govarthan]

Hi techlandandyzhan,  

 

Sorry for the inconvenience. 

 

We have checked your sample and found that when you dynamically create edit template elements with frozen columns, the edit template elements are not append properly with frozen and movable content tables and validating the feasibility to use dynamic template elements with frozen columns. So, we will update further details on 26^th November 2021. 

 

Until then we appreciate your patience.  

 

Regards,  

Ajith G  

[Ajith Govarthan]

Hi techlandandyzhan,   

  

Sorry for the delayed response. 

As per your query, you want to generate edit template elements dynamically in your Grid application. So, we have checked your sample and found that you have rendered the col group and input elements dynamically in the edit template. By default, in our EJ2 Grid the Edit templates are appended asynchronous process and you have also tried to render the elements dynamically by iterating the column which also make delays in rendering the template. So, respective input elements will not be available when the Grid component try to append the element in the edit template forms and which throws errors. So, to render the edit template elements properly we suggest you render the elements statically instead of dynamically in your Grid application. For your convenience, we have attached the sample, please refer them for your reference. 

Sample Link: https://stackblitz.com/edit/angular-ik7igh-rzhfe9?file=app.component.html 

Please get back to us if you need further assistance. 

Regards, 

Ajith G.