Need to set html content as data to datasource in Kendo Scheduler

[Varinder]

Hello team,

I have a requirement in Kendo Scheduler. I want to make some text bold in appointments displayed in the scheduler. Please refer highlighted area in the screenshot below. I tried to set datasource using HTML tags for that particular text but it is showing HTML as it is , because it is not appending HTML tag using append function of jquery.

I am using eventTemplate feature of the Scheduler.

Code Example of same is here

Please help!

 

 

 

Also, facing one more issue. When bind records of around 100 groups then it shows result like this.

 

I tried with some work around but still has few issues. Tried to set width of the columns using below code. It increase size but appointments size not increasing refer below.

var minColumnWidth = 200;
var columns = $(".k-scheduler-header .k-scheduler-table > tbody > tr:last-child > th").length;
var availableWidth = $("#Scheduler").width() - $(".k-scheduler-layout > tbody > tr > td:first-child").width() - parseInt($(".k-scheduler-header").css("padding-right")) - 1;
var width = Math.max(columns * minColumnWidth, availableWidth);
$(".k-scheduler-content .k-scheduler-table").width(width);
$(".k-scheduler-header .k-scheduler-table").width(width);

 

 

[Neli]

Hi Varinder,

When you need to display values as HTML you need to use the (#=#) syntax. You can read more in the article regarding Templates linked below:

- https://docs.telerik.com/kendo-ui/framework/templates/essentials

  <p>#: title#</p>

And linked here you will find the modified Dojo. 

 

Regarding the second issue you can try to set the width of the events using the k-event selector as in the example below:

 

$('.k-event').width(50)

 

Let me know in case you have additional questions.

Regards,
Neli
Progress Telerik

[Varinder]

Thanks for the help Neli, First issue fixed but second is still having problem.

The width of the event must be set proportion of the  column width. we can't fix width of column like 50px or something else. It causes two problem

1. If column width increases or decreases than event width will remain same. That will look odd.

2. If at particular time a group has more than one event like 2, 3, 4... that will not fit in that column. It goes out of its column. See below screenshot.

 

 

 

Also, one more issue with the plugin is when user double clicks in the empty area then events next to clicking area gets disappear. Please refer below screenshots.

I am using template for it. Template have subtitle in it but when I double click on white area it throws error Subtitle is not defined.

Working example is here

Please help!

 

 

 

 

[Neli]

Hi Varinder, 

I have just replied to the same issues in the other thread. - https://www.telerik.com/forums/kendo-scheduler-design-issues

I would suggest keeping the conversation in a single thread.

Regards,

Neli