Providing edit params causes edit view load failure after page route navigation

[Brandon M]

Hey,

Running Angular 11.

Upon attempting to navigate away from the page, dropdown controls break, presumably due to the [edit] parameters provided to the column. 

this.regionParams = {

params: {

allowFiltering: true,

dataSource: new DataManager(this.regions),

fields: { text: 'name', value: 'id' },

query: new Query(),

actionComplete: () => false

}

};

<ejs-grid

[filterSettings]="filterOptions"

[allowFiltering]="true"

#grid

[searchSettings]="searchSettings"

[dataSource]="data"

[allowSorting]="true"

[sortSettings]="sortOptions"

[allowPaging]="true"

[pageSettings]="pageSettings"

[query]="query"

[editSettings]="editSettings"

[allowSelection]="true"

(actionComplete)="actionComplete($event)"

>

<e-columns>

<e-column field="Id" isPrimaryKey="true" [visible]="false"></e-column>

<e-column field="Name" [validationRules]="locationNameRules" headerText="Name"> </e-column>

<e-column

field="Active"

headedText="Active"

[edit]="activeParams"

editType="booleanedit"

displayAsCheckBox="true"

>

</e-column>

<e-column

field="Region.Name"

[visible]='false'

></e-column>

<e-column

field="RegionId"

[validationRules]="regionNameRules"

[valueAccessor]="valueAccess"

headerText="Region"

[edit]="regionParams"

editType="dropdownedit"

></e-column>

<e-column headerText="Action" width="100" [commands]="commands"></e-column>

</e-columns>

</ejs-grid>

The column in question seems to fail assuming that the regionParams object should be providing a fully qualified create, read, destroy, etc. functions. But in accordance with the documentation, I am providing a param. 

This issue seems to be a bug as the controls work as intended initially, but upon navigating away from the page and back to the page causes the issue.  (See video)

The error returned is: col.edit.create is not a function

Attachment: Bug_1b0b1e9f.zip

[Ajith Govarthan]

Hi Brandon, 

  

Thanks for contacting Syncfusion support. 

  

Query: This issue seems to be a bug as the controls work as intended initially, but upon navigating away from the page and back to the page causes the issue.  (See video) The error returned is: col.edit.create is not a function. 

  

Based on your attached code example and video demonstration, we have prepared sample and found everything works fine at our end. For your convenience we have attached the sample, please refer them for your reference. 

  

Code Example: 

App.component.html 

  

<span> <button (click)="showGridFirst()" >Grid1</button> 

<button (click)="showGridSecond()">Grid 2</button> <span> 

<div class="control-section"> 

  <div *ngIf="view1" class="col-lg-9"> 

  

  

    <ejs-grid #normalgrid id='Normalgrid' [dataSource]='data1' allowPaging='true' [pageSettings]='pageSettings' 

      [editSettings]='editSettings' [toolbar]='toolbar' (actionBegin)='actionBegin($event)'> 

      <e-columns> 

        <e-column field='OrderID' headerText='Order ID' width='140' [visible]="false"    textAlign='Right' isPrimaryKey='true' 

          [validationRules]='orderidrules'></e-column> 

        <e-column field='CustomerID' headerText='Customer ID' width='140' [validationRules]='customeridrules'> 

        </e-column> 

        <e-column field='Freight' headerText='Freight' width='140' format='C2' textAlign='Right' editType='numericedit' 

          [validationRules]='freightrules'></e-column> 

        <e-column field='OrderDate' headerText='Order Date' width='120' editType='datetimepickeredit' 

          [format]='formatoptions' textAlign='Right'></e-column> 

                  <e-column field='Verified'[type]="checkbox" editType="booleanedit" 

                                                displayAsCheckBox="true" width='140' > 

        </e-column> 

        <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' [edit]='shipCountryParams'> 

               

        </e-column> 

          <e-column headerText='Commands' width=120 [commands]='commands'></e-column> 

      </e-columns> 

    </ejs-grid> 

  </div> 

  

  <div *ngIf="view2" class=" col-lg-9"> 

  

  

    <ejs-grid grid id='grid' [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' 

      [editSettings]='editSettings' [toolbar]='toolbar' (actionBegin)='actionBegin($event)'> 

      <e-columns> 

        <e-column field='OrderID' headerText='Order ID' width='140' textAlign='Right' isPrimaryKey='true' 

          [validationRules]='orderidrules'></e-column> 

        <e-column field='CustomerID' headerText='Customer ID' width='140' [validationRules]='customeridrules'> 

        </e-column> 

        <e-column field='Freight' headerText='Freight' width='140' format='C2' textAlign='Right' editType='numericedit' 

          [validationRules]='freightrules'></e-column> 

        <e-column field='OrderDate' headerText='Order Date' width='120' editType='datetimepickeredit' 

          [format]='formatoptions' textAlign='Right'></e-column> 

        <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' [edit]='editparams'> 

        </e-column> 

      </e-columns> 

    </ejs-grid> 

  </div> 

  

  

  

</div> 

<style> 

  #typeddl { 

    min-width: 100px; 

  } 

</style> 

  

  

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

  

UG-Links: 

https://ej2.syncfusion.com/angular/documentation/grid/edit/#command-column 

  

https://ej2.syncfusion.com/angular/documentation/grid/edit/#cell-edit-type-and-its-params  

  

If you still face the issue, then please try to share the below details to find the root cause of the issue. 

  

1. Please try to reproduce the issue in the attached sample.

  

2. Share the complete Grid code example.

  

3. Have you used common grid definition for all your Grids?

  

4. Share the Syncfusion package version.

  

Regards, 

Ajith G. 

  

[Brandon M]

Hey,

Thanks for the reply- I have found the issue. 

I was setting the datasource like so:

this.organizationService.getLocations(1, -1).subscribe((x) => {

this.location = x.results;

this.locationParams = {

params: {

dataSource: new DataManager(this.location),

allowFiltering: true,

fields: { text: 'name', value: 'id' },

query: new Query(),

actionComplete: () => false

}

};

});

The issue seemed to be with the  dataSource: new DataManager(this.location), line.

I am not sure why, but on page refresh, this datasource set action was no longer working. The entirety this.location.params object that would be used to create the edit form was no longer set. 

The following, however, works.

this.locationParams = {

params: {

allowFiltering: true,

fields: { text: 'name', value: 'id' },

query: new Query(),

actionComplete: () => false

}

};

this.organizationService.getLocations(1, -1).subscribe((x) => {

this.location = x.results;

(this.locationParams.params as DropDownListModel).dataSource = new DataManager(this.location);

});

The data source load action coming from an entirely separate subscribable httpclient was required due to the structure of our application, but the conflicted with what the edit interface builder needed.

The fact that the load works on a page load but stops working upon route navigation still leads me to believe that this is a bug. I cannot identify the root cause of the bug but the fix I have listed above solves my issue. 

Thanks.

[Ajith Govarthan]

Hi Brandon, 

  

Thanks for the update. 

  

Query: I cannot identify the root cause of the bug but the fix I have listed above solves my issue. 

  

We are happy to hear that you have found the solution at your end to resolve the reported issue. 

 

In this we also suspect that when you navigate to other pages the dataSource bound to the dropdown component may be unavailable and you have fetched the dataSource again for the dropdown component to resolve the issue. 

  

Please get back to us if you need further assistance. 

  

Regards, 

Ajith G. 

  

[Jim Schein]

For what it's worth -- same problem here, just through React and in a functional component.  Ajith's suggestion that the dataSource was not available at initialization was exactly right, fixed that and no more error.

[Joseph Christ Nithin Issack]

Hi Jim,

   We are glad that your issue was resolved.