enablePersistence

[Mohamed]

When I enable persistence mode and refresh the page, my grid is not being rendered (I only see one line, see image). I also do not see any errors in my console. I just set the attribute

[enablePersistence]="true"

Grid:

[Vigneshwaran Sankar]

Hi Mohamed,

Greetings from Syncfusion support.

Based on the details provided, it seems you are encountering an issue with grid rendering after enabling the enablePersistence property. However, in our sample, this issue is not reproducible. To further investigate and provide a better solution, we kindly request the following details:

1. Please share your complete code sample to help us identify the issue you encountered.
   
   
2. Share your Syncfusion package version.
   
   
3. Please provide a issue reproducible sample or attempt to reproduce it using our shared sample.
   
   
4. It would be helpful if you could demonstrate the issue scenario in a video format for better understanding and analysis.

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

Please feel free to get back us for further assistance.

Regards,

Vigneshwaran Sankar.

[Mohamed]

I use dynamic grid rendering. I get column names from the backend and the settings for each column also. This works fine, but when enabling persistence, it breaks (see previous image).

    "@syncfusion/ej2-angular-grids": "^23.2.7",

    <div class="controlling-overview__grid" *ngIf="controllingState === NgDataState.Data">

      <div class="controlling-overview__action-buttons" >

        <app-copy-previous-period-dialog

          (copyEvent)="onCopyPreviousPeriod($event)"

          [periodDropdownData]="periodsDropdownItems"

        >

        </app-copy-previous-period-dialog>

      </div>

      <ng-container *ngIf="(controllingMainsColumnDefinitions$ | async) as controllingMainsGridSettigns">

        <ejs-grid #controllingGrid

        [dataSource]="(controllingMains$ | async)"

        [allowPaging]="true"

        [allowSorting]="true"

        [allowGrouping]="true"

        [allowFiltering]="true"

        [allowResizing]="true"

        [groupSettings]="groupOptions"

        [pageSettings]="pageSettings"

        [showColumnMenu]="true"

        [enableImmutableMode]="true"

        [frozenColumns]="controllingMainsGridSettigns.FrozenColumns"

        (dataBound)="autoFitColumns($event)"

       

        height='100%'

        width='100%'

        >

        <e-columns>

          <e-column *ngFor="let column of controllingMainsGridSettigns.Columns"

            [headerText]="column.HeaderText"

            [field]="column.Field"

            [textAlign]="column.TextAlign"

            [format]="column.Format"

            [visible]="column.Visible"

            [showInColumnChooser]="column.ShowInColumnChooser"

            >

            <e-stacked-columns *ngIf="column.IsStacked">

                <e-stacked-column *ngFor="let stackedColumn of column.StackedColumns"

                                  [field]="stackedColumn.Field"

                                  [headerText]="stackedColumn.HeaderText"

                                  [textAlign]="stackedColumn.TextAlign"

                                  [format]="stackedColumn.Format ?? stackedColumn.CustomFormat"

                                  >

                                  <ng-container *ngIf="stackedColumn.Clickable === true">

                                    <ng-template #template let-data>

                                      <span class="provision-cell" (click)="onOpenProvisionsOverview(data, stackedColumn.ProvisionColumnName)"> {{ data[stackedColumn.Field] | number : '1.2-2' }} </span>

                                    </ng-template>

                                  </ng-container>

                </e-stacked-column>

            </e-stacked-columns>

          </e-column>  

        </e-columns>

        <e-aggregates>

          <e-aggregate>

              <e-columns>

                  <e-column *ngFor="let column of controllingMainsGridSettigns.Aggregates" [field]="column" type='sum'>

                    <ng-template #groupFooterTemplate let-data>{{data.sum | number:'1.2-2'}}</ng-template>

                </e-column>

              </e-columns>

          </e-aggregate>

        </e-aggregates>

        </ejs-grid>

      </ng-container>

    </div>

[Vigneshwaran Sankar]

Hi Mohamed,

We checked your query "After enablePersistence property true grid not rendering". Based on your shared details we understand you are using ngFor to bind columns and stacked columns. We could not encounters the issue you are faced in package version 23.2.7. 

We have prepared a sample after enabling the enablePersistence property to "true," and the grid rendered properly from our side. We have attached our sample for further information. If you are still experiencing the same problem, please try to replicate the issue with our sample for further validation.

Please feel free to get back us for further assistance.

Regards,

Vigneshwaran Sankar.

Attachment: enablePesistence_710a8f06.zip