Timing issue

Question

The data is NOT binding properly when i use foreignKeyValue='name' foreignKeyField='id'If i use static data it works fine, but when the data is loading dynamically, it binds sometime and shows empty most of the timeWhat shd i do to avoid the issue, is this binding can be achieved programatically?And how to make a column readonly?

e-column> e-column> e-column> e-columns> ejs-grid>

Shalini Maragathavel · Answer

Hi Vin,

Greetings from Syncfusion Support.

Query#1:If i use static data it works fine, but when the data is loading dynamically it binds sometime and shows empty most of the time

Based on your query the data is not binding properly when the data loaded dynamically. To proceed with your query we need the following details,

1. Share the code example loading the data dynamically.

2. Is the foreignKey column values are not binded properly or all the column values are not binded properly?

3. Share the screenshot or video demonstration of the issue.

4. Have you faced any script error in the console page? If yes, share the screenshot and stackrace of an script error.

5. Syncfusion Package Version.

6. Share anyone record of data that you need to bind for the grid dynamically.

Note: For foreignKey column the values that you have defined in the mapping field names should be same, then only the required foreignKeyField’s foreignKeyValue value will be shown in that column.

Query#2: how to make a column readonly?

Based on your query we suspect that you want to disable(readonly – not editable) editing for particular column. You can achieve your requirement by defining allowEditing property as false in required column. Find the below code snippets for your reference.

<e-column field='CustomerID' headerText='Customer ID' [allowEditing]= 'false'

[validationRules]='customerIDRules' width=120></e-column>

Let us know if you have any concerns.

Regards,

Shalini M.

vin · Answer

There are no errors in console.Can we use templates to show dropdown in edit, how to do it when you have ID , Name The important thing to know here is, the accessDetails data is NOT available to bind to the Grid when on load(init)I am making one API call to get some data, based on the data i receive i need to make 2nd API call to get accessDetails data.The lookup data is available readily..accessDetails: Array(1)0:personageDetailId: 5personageName: "DALJIT SINGH"portfolioAccessId: 25roleId: 4lookup data {id: 1, name: "Global Administrator"} {id: 2, name: "Administrator"} {id: 3, name: "Procurement"} {id: 4, name: "Portfolio Manager"} {id: 5, name: "Read Only Access to Portfolio
When i add this lookup data as static in  init, it is always working!! but that data needs to come from API this.dataPortfolioAccessTypes = [{id: 1, name: "Global Administrator"},{id: 2, name: "Administrator"},{id: 3, name: "Procurement"},{id: 4, name: "Portfolio Manager"},{id: 5, name: "Read Only Access to Portfolio"}]see the working one Now not working one "@angular/animations": "~8.2.14",    "@angular/common": "~8.2.14",    "@angular/compiler": "~8.2.14",    "@angular/core": "~8.2.14",    "@angular/forms": "~8.2.14",    "@angular/platform-browser": "~8.2.14",    "@angular/platform-browser-dynamic": "~8.2.14",    "@angular/router": "~8.2.14",    "@syncfusion/ej2-angular-base": "^18.2.44",    "@syncfusion/ej2-angular-buttons": "^18.2.44",    "@syncfusion/ej2-angular-calendars": "^18.2.44",    "@syncfusion/ej2-angular-charts": "^18.2.46",    "@syncfusion/ej2-angular-diagrams": "^18.2.46",    "@syncfusion/ej2-angular-dropdowns": "^18.2.46",    "@syncfusion/ej2-angular-gantt": "^18.2.46",    "@syncfusion/ej2-angular-grids": "^18.2.46",    "@syncfusion/ej2-angular-heatmap": "^18.2.44",    "@syncfusion/ej2-angular-inputs": "^18.2.45",    "@syncfusion/ej2-angular-navigations": "^18.2.46",    "@syncfusion/ej2-angular-notifications": "^18.2.44",    "@syncfusion/ej2-angular-popups": "^18.2.46",    "@syncfusion/ej2-angular-richtexteditor": "^18.2.46",    "bootstrap": "^4.5.0",    "classlist.js": "^1.1.20150312",    "install": "^0.13.0",    "jquery": "^3.5.1",    "moment": "^2.27.0",    "ngx-moment": "^5.0.0",    "popper.js": "^1.16.1",    "rxjs": "~6.4.0",    "ts": "^0.2.2",    "tslib": "^1.13.0",    "xlsx": "^0.16.4",    "zone.js": "~0.9.1"

Shalini Maragathavel · Answer

Hi Vin, 

Thanks for the update. 

We checked the code examples and found that the accessDetails data are returned in an array format. By default the EJ2 Grid does not support array type value data.  

To display the array values in the Grid column we need to use valueAccessor API. The valueAccessor is used to access/manipulate the value of display data. The valueAccessor API is used for display purpose only (UI Changes), so we cannot perform Grid actions like Filtering, Searching, Grouping, Sorting, etc., to this column 

For more information please refer the below document, 

https://ej2.syncfusion.com/angular/documentation/grid/columns/#valueaccessor 

Based on your update we also suspect that you are adding the dataSource to the foreignKey column dynamically. If we made any changes to the Grid columns we need to call the refreshColumns method of EJ2 Grid. When we call the refreshColumns method the grid will be refreshed and data will be render properly. 

So, we suggest you to call the refreshColumns method once you define the dataSource for the foreignKey column. Please refer the below documentation for more information 

API Link: https://ej2.syncfusion.com/angular/documentation/api/grid/#refreshcolumns 

If still facing the issue, kindly share the following details that will be helpful for us to provide better solution. 
 
1) Share us a simple sample to replicate the problem. 
 
2) Video demonstration of the issue. 
  
Regards, 
Shalini M.

vin · Answer

This refresh is working.  But now the dropdown values wont show up in edit mode!!Any suggestions? this.grid.refreshColumns();But in edit mode the dropdown is empty

Shalini Maragathavel · Answer

Hi Vin,

Sorry for the late reply.

Based on your query you have mentioned that the dropdown values are not display in edit mode. To achieve your requirement we suggest you to use the celleditTemplate feature of EJ2 Grid.

The cellEditTemplate is used to add a custom component for the particular column by invoking the following functions,

· create - It is used to create the element at the time of initialization.

·

· write - It is used to create custom component or assign default value at the time of editing.

·

· read - It is used to read the value from the component at the time of save.

·

· destroy - It is used to destroy the component.

When we bind the dataSource dynamically to the foreignKey column the values will not be reflected in the edited dropdown. Using celleditTemplate feature we have added the dropdown component and defined the foreignKey dataSource to dropdown component to get the values.

Please refer the code example and sample

app.component.ts

public ngOnInit(): void {

this.data = orderDetails;

this.pageSettings = { pageCount: 5 };

this.filterSettings = { type: 'Menu' };

this.toolbarItems = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];

this.customerData = customerData;

this.editOptions = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' };

this.orderidrules = { required: true };

this.ddlData = DataUtil.distinct(customerData,'ContactName',true),

this.dpParams = {

create: () => {

this.elem = document.createElement('input');

return this.elem;

},

read: () => {

return this.dropDownListObj.value;

},

destroy: () => {

this.dropDownListObj.destroy();

},

write: (args) => {

this.dropDownListObj = new DropDownList({

dataSource:this.ddlData,

fields: {value:'CustomerID', text: 'ContactName' },

value:args.rowData[args.column.field],

});

this.dropDownListObj.appendTo(this.elem);

}

};

}

onClick() {

this.grid.getColumnByField('CustomerID').dataSource=customerData;

this.grid.refreshColumns();

}

app.component.html

<e-column field='CustomerID' headerText='Customer Name' width='150'

foreignKeyValue='ContactName' foreignKeyField='CustomerID' [edit]='dpParams' [validationRules]='orderidrules'></e-column>

Please refer the sample for more information.

Sample: https://stackblitz.com/edit/angular-mrk6ms-nxmrh2?file=app.component.ts

Please refer the documentation for more information.

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/edit/#cell-edit-template

Let us know if you have any concerns.

Regards,
Shalini M.