When creating a blocked period without subject in schedule control, "undefined" is displayed

Hello,

When creating a blocked period, if the optional field "subject" is not set, "undefined" is displayed in the period:
Image_6555_1744018122740

I took the stackblitz example of this section and just commented the line 31: https://stackblitz.com/edit/z7xoveeu?file=index.js

As a workaround, I just mapped the "subject" field and put " " as the value, but it would be great if nothing is displayed instead of "undefined".


3 Replies

SS Saritha Sankar Syncfusion Team April 8, 2025 08:11 AM UTC

Hi A,


Thanks for reaching out to us.


When the subject field is not set for a blocked period, the UI may display "undefined" by default. This is the expected behavior when the value is an empty string. However, there are two ways to handle this and avoid showing "undefined" in the interface:


  1. Set a space (" ") instead of an empty string for the subject field. This will ensure the field appears visually blank without displaying "undefined".
  2. Manually handle the rendering using the eventRendered event, which is especially helpful if you're working with multiple block events. You can use the following approach:


Index.js

eventRendered: (args) => {
    if (args.type === 'blockEvent') {
        if (args.data && args.data.TravelSummary && args.data.TravelSummary.trim() === "") {
            args.element.querySelector('.e-subject').textContent = " ";
        }
    }
};



Regards,

Saritha S.



A A April 10, 2025 11:20 AM UTC

Hi,

Thanks for your reply and the example provided, but I don't understand how "undefined" can be the default when an optional field is not set, it doesn't make any sense ! Also it was not the case in older versions.



SS Saritha Sankar Syncfusion Team April 11, 2025 09:04 AM UTC

Hi A,

If you would like to set a default value for the subject field, this can be achieved by using the default property in the subject configuration. Please refer to the example code below for your reference.

subject: { name: 'TravelSummary', default: " " }


Regards,

Saritha S.


Loader.
Up arrow icon