[ANGULAR] renderer value is undefined when the columns and resources are loaded dynamically
Posted: Thu Oct 14, 2021 8:15 pm
by abisht
Hi Team,
Bases on a user input I am loading different columns, different resources and different events dynamically on the scheduler. But the resources for the newly defined columns are not rendering thought the column is getting displayed. I reproduced the issue in one the Angular examples where I am trying to add a 3rd column 'Age' and add additionalResources for it when user selects 3 from the dropdown. But the age column does not display the value.
{
text: 'Age',
hidden: true,
field : 'age',
width: 130,
renderer: ({ value }) => value
}
Also When I initialise the scheduler with columns =[ ] and then load the columns dynamically during ngAfterViewInit I am gettting an error
TypeError: Cannot read properties of null (reading 'querySelector')
Due to this I am initialising the columns array with a hidden column as below. Is there a better way to handle this.
{
text: '',
field: 'id',
hidden: true
}
Re: [ANGULAR] renderer value is undefined when the columns and resources are loaded dynamically
Posted: Fri Oct 15, 2021 9:11 am
by mats
Also When I initialise the scheduler with columns =[ ] and then load the columns dynamically during ngAfterViewInit I am gettting an error
This was fixed in 4.3.0, try updating!
Re: [ANGULAR] renderer value is undefined when the columns and resources are loaded dynamically
Posted: Fri Oct 15, 2021 9:25 am
by saki
The problem is that additionalResources have same ids as the originally loaded resources in which case they are updated, not added. Use these and they will be added:
Also, when running your code against 4.3.0 I do not need that hidden column but it works with columns: any[] = []
Re: [ANGULAR] renderer value is undefined when the columns and resources are loaded dynamically
Posted: Fri Oct 15, 2021 11:03 am
by abisht
In my actual scenario, the ids are different for the resources loaded. And also I am removing the resources before the adding the new ones with different ids as below.
All the data is updated correctly but the values for new added column (eg: age) cannot be found using
renderer : ({value}) => value;
or
renderer : ({record}) => record.age;
But I am able to access the value using renderer : ({record}) => record.data.age; or renderer : ({record}) => record.originalData.age;
Am i missing something here to access the value directly using
renderer : ({value}) => value;
Re: [ANGULAR] renderer value is undefined when the columns and resources are loaded dynamically
Posted: Fri Oct 15, 2021 11:54 am
by saki
Do you extend ResourceModel same way as EventModel is extended in lib/AppEventModel.ts? If not then do the same for resource model, add age to fields and then use it in AppConfig.ts:
Re: [ANGULAR] renderer value is undefined when the columns and resources are loaded dynamically
Posted: Sat Oct 16, 2021 8:17 am
by abisht
I tried both suggestions changing the ids to a new value and adding AppResourceModel with age column in the example as well. But they are not displaying the data. Could you let me know if there is anything missing from my side to make it work. Attached is the updated example to reproduce the issue.
this.scheduler.resourceStore.data is only displaying the initial resources with name and role even after resourceStore.removeAll() and resourceStore.add(this.additionalResources) with the age data added and role data removed. Also the items in this.scheduler.resources have the initially loaded columns resources (name and role) but the age resource is not on it.
this.scheduler.resources[0].name // returns value
this.scheduler.resources[0].role // returns undefined // could be due to the column being removed from resources
this.scheduler.resources[0].age // returns undefined; but age does not existing on resource item
After adding the data to resourceStore shouldn't resourceStore.data be updated with age along with resources[index].age for it to be used in renderer?
if (this.selectedValue == '3') {
columns[0].hidden = false;
columns[1].hidden = false;
columns[2].hidden = false;
this.scheduler.resourceStore.removeAll();
this.scheduler.eventStore.removeAll();
this.scheduler.columns.removeAll();
this.scheduler.columns.add(columns);
this.scheduler.resourceStore.add(this.additionalResources);
console.log(this.scheduler.resourceStore.data); // returns items with role and name but not age
console.log(this.scheduler.resources[0].role); // returns value;
console.log(this.scheduler.resources[0].age); // returns undefined;
this.scheduler.eventStore.add(this.additionalEvents);
}
Re: [ANGULAR] renderer value is undefined when the columns and resources are loaded dynamically
Posted: Sun Oct 17, 2021 8:50 pm
by saki
You have set type on additionalEvents but you haven't set any value, so the app crashes. You have: