Resource Group DataBound event and then refreshing issue

1 Answer 32 Views
Top achievements
Rank 1
Attila asked on 28 Jun 2021, 01:34 PM | edited on 05 Jul 2021, 10:43 AM


I have successfully found a way to make the resource horizontal grouping headers have a div with several elements inside, and custom styling. 

I need this to add a portrait of people, their names and an apartment name, for each of the resource group headers.

However if i have 16+ columns to show in the horizontal view, it gets squished together, so there isn't enough space to see the details.

SO, i set the widths of each of the headers to 200px, and add them together and add the width to the this.view().table[0] 's styles. This works for the headers.... However, the horizontal scrollbar doesn't appear, and the events dont match anymore. So when i call any "refresh", "rebind", "resize" etc. method, the site crashes because it creates an infinite loop. 

What can i do?

Js databound function:

function hideStaffTimeHeader() {
	var view = this.view();

	// remove the times header row
	var trs = view.timesHeader[0].children[0].children[0].children;
	for (var i = 1; i < trs.length; i++) {
	$(".k-scheduler-header-wrap > table > tbody > tr:eq(1)").hide();

	// attempt to set the width of each header and total width of entire table.
	var columns = view.table[0].children[0].children[0].children[1].children[0].children[0].children[0].children[0].children[0].children;
	var width = 0;
	for (var i = 0; i < columns.length; i++) {
		columns[i].style.width = "200px";
		width += 200;
	view.table[0].style.width = width + "px";


the mvc razor cshtml:

@model IList<WebStaffScreen.Models.TaskViewModel>
@using Kendo.Mvc.UI

<div id="sc_container">
		.DateHeaderTemplate("<span class='k-link k-nav-day'>#=kendo.toString(date, 'dd-MM-yyyy')#</span>")
		.Editable(e => e.TemplateName("StaffEditorPartialView"))
		.Views(v => v.DayView(d => d.Selected(true)))
		.Group(group => group.Resources("CitizenManagerName").Orientation(SchedulerGroupOrientation.Horizontal))
		.Resources(res => res.Add(m => m.CitizenManagerID)
			.DataSource(s => s.Read(r => r.Action("GetCitizenManagersInResidence", "StaffCalendar")))
		.DataSource(d => d.Model(m => m.Id(f => f.TaskID))
			.Read("Read", "StaffCalendar")
			.Create("Create", "StaffCalendar")
			.Update("Update", "StaffCalendar")
			.Destroy("Destroy", "StaffCalendar")
		.Events(e => e.DataBound("hideStaffTimeHeader"))



Heres a sample with the problem, and some Readme info in the Home/index page .. 


1 Answer, 1 is accepted

Sort by
Telerik team
answered on 01 Jul 2021, 12:01 PM

Hello Attila,


Thank you for writing to us.

This scenario is quite specific and we will need a runnable sample in order to provide precise and accurate solution.

Could you open a formal support ticket for 24 hours and send us a very basic runnable version of your project without dependencies?


Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at

Top achievements
Rank 1
commented on 05 Jul 2021, 10:44 AM

I have added the sample project now.. please have a look and get back to me as soon as possible.
Telerik team
commented on 08 Jul 2021, 09:34 AM

Thank you for the provided details. I've went through the custom javascript logic + the description in the Home/Index page.

I am afraid this kind of alteration the DOM header elements is very fragile and not supported. That's why, generally, the Scheduler has its own Width settings:


So one option is to try to leverage this columnwidth of the given view. If this is not suitable for your case, share with me a snapshot or drawing demonstrating the desired end result as an image and I will prepare a full fledged working MVC project and send it to you.
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question