Variable editable columns

[Jay Bauer]

Hello, I've been working on tackling a problem for a little while and I can't seem to crack it. I have a grid component with 4 frozen columns on the left-hand side which are not editable. On the right side, unfrozen, I want to start with no columns with button on the page that would add in a new column on click. Each of these columns then individually needs to be able to be deleted as the user would like. These cells also need to be editable.

As I've attempted to do this, I've run into a lot of problems with grid refreshing and removing the data, the editable cells causing problems on the non-editable columns in the rest of the row by resetting templates, etc.

Is there an easier way to do this that I'm missing? I've gone through a few iterations of this process, I'll put a code sample here, I know this not the correct way to do it but hopefully it gives an idea of what I want.

<ejs-grid #grid [dataSource]="variables" [columns]="columns" [frozenColumns]="4" [editSettings]="editSettings" [allowSelection]="false" [enableHover]="false" (dataBound)="dataBound()" (actionBegin)="actionBegin($event)">

    <e-columns>

        <e-column width="50" [allowEditing]="false">

            <ng-template #template let-data>

                <context-menu class="model-menu" [menuItems]="menuItems" (menuItemSelect)="contextMenuSelect($event, data.id)"></context-menu>

            </ng-template>

        </e-column>

        <e-column field="specs" headerText="Specifications" width="300" [allowEditing]="false"></e-column>

        <e-column field="units" headerText="Units" width="100" [allowEditing]="false"></e-column>

        <e-column field="currentValue" headerText="Current Value" width="150" [allowEditing]="false"></e-column>

        <e-column *ngFor="let case of [].constructor(numCases); let i = index" headerText="Case {{i+1}}" width="80" editType="numericedit" [edit]="numericParams"></e-column>

    </e-columns>

</ejs-grid>

[Vinitha Balasubramanian]

Hi Jay,

Greetings from Syncfusion support.

Query : Variable editable columns.

We have analyzed your query, you want to perform editing action on the Grid component with non-editable frozen columns.

<e-column width="50" [allowEditing]="false">

            <ng-template #template let-data>

                <context-menu class="model-menu" [menuItems]="menuItems" (menuItemSelect)="contextMenuSelect($event, data.id)"></context-menu>

            </ng-template>

</e-column>

On your shared code snippet, you have not mention the filed property to the first column which you have been render data using ng-template.

We need to convey that edit action can be performed based on the field property of the Grid columns, without field property edit action cannot support on Grid component, so we suggest you declare the field property to the columns.

Also you want to add a column using button click for unfrozen columns.

<e-column *ngFor="let case of [].constructor(numCases); let i = index" headerText="Case {{i+1}}" width="80" editType="numericedit" [edit]="numericParams"></e-column>

In the above code snippet, you want to add a new unfrozen column using “ngFor” on external button click function.

If your requirement is to add new unfrozen columns using ngFor kindly share the below details to validate your query at our end.

• Please share the complete Grid code file and package.json file with us.
• Kindly share video demo of your exact requirement which will be more helpful to validate at our end.

Regards,

Vinitha Balasubramanian