Using Angular template-driven forms for CRUD operations in a Grid. The frozen column feature does not work on the current row

[techlandandyzhang]

"Using Angular template-driven forms for CRUD operations in a Grid. The frozen column feature does not work on the current row. Is there a solution?"

https://stackblitz.com/edit/angular-q3sdk9zm?file=src%2Fmain.ts,src%2Fapp.component.html

[Sivaranjani Rajasekaran]

Hi techlandandyzhang,

Greetings from Syncfusion support!

We have confirmed that the reported behavior is an issue from our side and have logged it as "Frozen Column Breaks During Template Form Editing". Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects(subject to technical feasibility and Product Development Life Cycle ) and will include the defect fix in our weekly patch release which will be rolled out on "February 04, 2024".

 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through the below link,

 

Feedback: https://www.syncfusion.com/feedback/64707/frozen-column-breaks-during-template-form-editing

 

Disclaimer: "Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization".

Regards,

Sivaranjani R.

[Sivaranjani Rajasekaran]

Hi techlandandyzhang,

Thank you for your patience and understanding!

In default inline editing mode, the Syncfusion Angular Grid dynamically generates rows and applies sticky positioning to frozen columns automatically. However, when using Angular template-driven forms with an edit template, the structure of the form varies based on the provided template. Since the template design is not predefined, the frozen columns do not automatically retain their sticky positioning in this scenario.

To achieve your requirement, we have implemented a solution at the sample level using the actionComplete event. This event triggers when editing begins, allowing us to manually adjust the frozen column positioning.

Implementation Details: 

We handle the actionComplete event as follows:

1. When edit mode is initiated (beginEdit or add), we retrieve all table cells (td.e-rowcell) in the edited row.
2. We fetch the column details using getColumns().
3. We iterate through the row cells and handle cases where cells have colspan attributes.
4. If the grid has frozen columns (isFrozenGrid()), we manually apply sticky positioning to the table cells inside the edit form.
5. We apply fixed column borders to maintain proper alignment.

Code Example : 

actionComplete(args: DialogEditEventArgs): void {

    if (args.requestType === 'beginEdit' || args.requestType === 'add') {

      const tdElement: any = [].slice.call(

        args.row.querySelectorAll('td.e-rowcell')

      );

      const cols: any = this.gridInstance.getColumns();

      let m: any = 0;

      let i: any = 0;

      const form: any = args.form;

      while (

        (this.gridInstance.isEdit && m < tdElement.length && i < cols.length) ||

        i < cols.length

      ) {

        const span: any =

          this.gridInstance.isEdit && tdElement[parseInt(m.toString(), 10)]

            ? tdElement[parseInt(m.toString(), 10)].getAttribute('colspan')

            : null;

        if (this.gridInstance.isFrozenGrid()) {

          const tdchild: any = form.querySelectorAll('td');

          if (cols[i].visible) {

            for (let i: number = 0; i < tdchild.length; i++) {

              addStickyColumnPosition(this.gridInstance, cols[i], tdchild[i]);

            }

          }

        }

        i = span ? i + parseInt(span, 10) : i + 1;

        m++;

      }

      addFixedColumnBorder(form.querySelectorAll('tr')[0]);

    }

  }

Sample Link : https://stackblitz.com/edit/angular-brxnhebt-xebfqyjk?file=src%2Fapp.component.ts

Documentation Link : https://ej2.syncfusion.com/angular/documentation/grid/editing/template-editing

API : https://ej2.syncfusion.com/angular/documentation/api/grid/#actioncomplete

Please get back to us if you need further assistance.

Regards,

Sivaranjani R.