Premium support for our pure JavaScript UI components


Post 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
        }
        if (this.selectedValue == '3') {
            columns[0].hidden = false;
            columns[1].hidden = false;
            columns[2].hidden = false;
            this.scheduler.columns.removeAll();
            this.scheduler.columns.add(columns);
            this.scheduler.resourceStore.add(this.additionalResources);

    }

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
        }
Attachments
When user select value 3 from dropdown Age column is displayed but the data is not displayed.
When user select value 3 from dropdown Age column is displayed but the data is not displayed.
Screenshot 2021-10-14 at 11.34.48 PM.png (749.68 KiB) Viewed 1854 times
angular-8.zip
Issue reproduced in this code
(888.44 KiB) Downloaded 113 times

Post 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!


Post 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:

    additionalResources = [
        { "id": "aa", "name": "Arcady", "role": "Developer", "age": "27" },
        { "id": "ab", "name": "Dave", "role": "Sales", "age": "27" },
        { "id": "ac", "name": "Henrik", "role": "Sales", "age": "27" },
        { "id": "af", "name": "Celia", "role": "CEO", "age": "27" },
        { "id": "ag", "name": "Lee", "role": "CTO", "age": "27" },
        { "id": "ad", "name": "Madison", "role": "Developer", "age": "27" },
        { "id": "ae", "name": "Maxim", "role": "Developer", "age": "27" },
        { "id": "ah", "name": "Amit", "role": "Sales", "age": "27" },
        { "id": "ai", "name": "Kate", "role": "Developer", "age": "27" },
        { "id": "aj", "name": "Mark", "role": "Developer", "age": "27" },
        { "id": "ak", "name": "Emilia", "role": "Developer", "age": "27" }
    ];

Also, when running your code against 4.3.0 I do not need that hidden column but it works with columns: any[] = []


Post 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.

    this.scheduler.resourceStore.removeAll();
    this.scheduler.resourceStore.add(newResources);

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;

Post 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:

    resourceStore : {
        modelClass : AppResourceModel
    },

Post 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?

Changes made are below

    additionalResources = [
        { "id": "aa", "name": "Arcady", "age": "27" },
        { "id": "bb", "name": "Dave", "age": "27" },
        { "id": "cc", "name": "Henrik", "age": "27" }
    ];
    additionalEvents: [
        {
            "id"        : 1,
            "resourceId": "aa",
            "name"      : "Meeting #1",
            "desc"      : "Discuss new features",
            "startDate" : "2018-02-07 11:00",
            "endDate"   : "2018-02-07 14:00",
            "eventType" : "Meeting",
            "eventColor": "blue",
            "iconCls"   : "b-fa b-fa-calendar"
          },
          {
            "id"        : 2,
            "resourceId": "bb",
            "name"      : "Meeting #2",
            "desc"      : "Strategy meeting",
            "startDate" : "2018-02-07 12:00",
            "endDate"   : "2018-02-07 15:00",
            "eventType" : "Meeting",
            "eventColor": "blue",
            "iconCls"   : "b-fa b-fa-calendar"
          },
          {
            "id"        : 3,
            "resourceId": "cc",
            "name"      : "Meeting #3",
            "desc"      : "Emerging markets",
            "startDate" : "2018-02-07 13:00",
            "endDate"   : "2018-02-07 16:00",
            "eventType" : "Meeting",
            "eventColor": "blue",
            "iconCls"   : "b-fa b-fa-calendar"
          }
    ]
        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);
        }
Attachments
angular-8.zip
Updated example to load the resources dynamically based on a input
(889.07 KiB) Downloaded 118 times

Post by saki »

You have set type on additionalEvents but you haven't set any value, so the app crashes. You have:

    additionalEvents: [ // <===== notice the colon
        {
            "id"        : 1,
            "resourceId": "aa",
            "name"      : "Meeting #1",
            "desc"      : "Discuss new features",
            "startDate" : "2018-02-07 11:00",
            "endDate"   : "2018-02-07 14:00",
            "eventType" : "Meeting",
            "eventColor": "blue",
            "iconCls"   : "b-fa b-fa-calendar"
          },

but it should read:

    additionalEvents = [ // <===== notice the equal sign
        {
            "id"        : 1,
            "resourceId": "aa",
            "name"      : "Meeting #1",
            "desc"      : "Discuss new features",
            "startDate" : "2018-02-07 11:00",
            "endDate"   : "2018-02-07 14:00",
            "eventType" : "Meeting",
            "eventColor": "blue",
            "iconCls"   : "b-fa b-fa-calendar"
          },

Post by abisht »

Sorry for the typo. but still even with colon being corrected to '=' , I still don't the data for newly added age column displayed.

Attachments
Screenshot 2021-10-18 at 12.03.17 PM.png
Screenshot 2021-10-18 at 12.03.17 PM.png (173.35 KiB) Viewed 1745 times

Post by saki »

resourceStore must be defined on CrudManager, not on the scheduler itself (same is true for eventStore). The attached code works.

Attachments
angular-8.zip
(802.32 KiB) Downloaded 106 times

Post Reply