I'm looking into Telerik (JQuery UI) documentation on the Scheduler component they offer. The dataSource bound to the scheduler has a resource of Meeting Room 101. As seen in this demo, the width of this is extensive and contains much white space that could contain additional features.

Currently, through-out the documentation, I can only see one way to add resource and attach them to others, that being:

resources: [
    {
        field: "roomId",
        name: "Rooms",
        dataSource: [
            { text: "Meeting Room 101", value: 1, color: "#2572c0" },
            { text: "Meeting Room 201", value: 2, color: "#f8a398" }
        ],
        title: "Room"
    },
    {
        field: "attendees",
        name: "Attendees",
        dataSource: [
            { text: "Alex", value: 1 },
            { text: "Bob", value: 2 },
            { text: "Charlie", value: 3 }
        ],
        multiple: true,
        title: "Attendees"
    }
]

Now, both the Meeting Room n and Alex/Bob/Charlie contains mass white space. Adding HTML into the text ie: { text: "Meeting Room 101 <div class='someExtraContent'></div>" } is not possible. In-fact, it results in something like this:

Where the HTML is escaped to text. Is it possible to utilise this whitespace without overriding Kendo? Ofc, the solution above is as it would yield horrible search results.

Can any advise on how I can utilise this whitespace with additional content?