Resource Group DataBound event and then refreshing issue

[Attila]

Hi

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++) {
		trs[i].remove();
	}
	$(".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">
@(Html.Kendo().Scheduler<WebStaffScreen.Models.TaskViewModel>()
		.Name("staffCalender_scheduler")
		.DateHeaderTemplate("<span class='k-link k-nav-day'>#=kendo.toString(date, 'dd-MM-yyyy')#</span>")
		.Date(DateTime.Now)
		.AllDaySlot(false)
		.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)
			.Name("CitizenManagerName")
			.DataTextField("FullName")
			.DataValueField("ID")
			.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"))
)
</div>

 

Update:

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

 

[Eyup]

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?

 

Regards,
Eyup
Progress Telerik

[Attila]

I have added the sample project now.. please have a look and get back to me as soon as possible.

[Eyup]

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:
https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler/configuration/width

ColumnWidth:
https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler/configuration/views.columnwidth

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.