I have a scheduler set to month view, and I wanted to shade certain dates regardless of if there is an event on that day or not. I have the dates that need to be shaded ahead of time.
I created a class called previewDay which changes the background color, and I added code to the databound function that does this without issue, until I add 3 events
function kendoDateOnly(input) {
if (input == null) {
return "";
}
return kendo.parseDate(kendo.toString(input, 'd')).toLocaleDateString("en-US");
}
function preview_dataBound(e) {
var scheduler = $("#event-preview-scheduler").data("kendoScheduler");
var slots = $('.k-scheduler-content td');
for (var i = 0; i < slots.length; i += 1) {
var currentSlot = $(slots[i]); // Get current slotvar slotData = scheduler.slotByElement(currentSlot); // Get slot datavar startDate = kendoDateOnly(slotData.startDate); // Convert start date to M/d/yyyy formatif (_eventDates.includes(startDate)) {
currentSlot.addClass('previewDay'); // Add the previewDay class
} else {
currentSlot.removeClass('previewDay'); // Remove the previewDay class (probably don't need to do this)
currentSlot.addClass("k-other-month"); // Add the k-other-month class to gray out the other days
}
}
}
In my example, I need to shade July 3rd, July 4th, and July 5th.
I have an array called _eventDates which is ["7/3/2022", "7/4/2022", "7/5/2022"]
And with no events - this works exactly as expected
When I add 1-2 events, this continues to work
When I add a 3rd event, July 6th is shaded. It does not matter what combination I use when I use 2, it always shades correctly, once I add that 3rd, it throws it off.
In this particular case, all 3 events on each day have the same information
Start: 07/03/2022 00:00
End: 07/03/2022 01:00
Though when I pull the slotData
Which makes sense as it is a month view, so they'll expand to fill the day
However, in all cases, the slotData has a startDate of Tue Jul 05, and that is what I'm matching on
If I throw a console.log of the startDate before I add the class
console.log(startDate);
currentSlot.addClass('previewDay');
I get this
(it's weird I get 7/3 twice?)
But 7/6/2022 is never there
And finally, here is the html for that row with the extra day shaded
<tr style="height: 186px;">
<td class="previewDay"><span class="k-link k-nav-day">03</span></td>
<td class="previewDay"><span class="k-link k-nav-day">04</span></td>
<td class="previewDay"><span class="k-link k-nav-day">05</span></td>
<td class="previewDay"><span class="k-link k-nav-day">06</span></td>
<td class="k-other-month"><span class="k-link k-nav-day">07</span></td>
<td class="k-other-month"><span class="k-link k-nav-day">08</span></td>
<td class="k-other-month"><span class="k-link k-nav-day">09</span></td>
</tr>Can someone please help me out with what is going wrong here?
Hi team,
I found that since 2022 R2, the height of a multiselect varies when adding tags. From 30px height with no values to 32px height with one or more tags.
https://dojo.telerik.com/UVUSaSIn
As a result, there is a nasty pumping effect in the page.
Please advise,
Best regards,
Laurent.
Hi team,
I am in the process of changing my theme from less to sass. Since ever, I use the less default theme with some customizations, and I want to replace it with the sass classic main theme which is said to be its sass couterpart.
First, let me say that there are too many differences to state they are siblings!
In less theme, a widget has not a fixed font size and gently inherit from the body. In the sass theme, every widget has a font size of 14px. Why ? This is a big issue for me as kendo widgets must fit into a page whose font size is 13 by default but can be changed.
2 questions:
- is there a way to set default font-size to 13px for all widgets?
- do kendo widgets are able to gently take any font size? I mean without looking ugly.
thanx
Laurent.

Hello,
I am using a Kendo jquery editor in Angular, and I need to trigger a valueChange event for only when the user is entering and changing data, so that the document can be properly marked as dirty. However, I am finding that the editor is injecting attributes on its own to image tags in the data, and these attributes are then triggering a false valueChange. The attributes I have seen so far are:
These attributes are typically added when the image is clicked on, or right-clicked after selection. The blur event then causes a change event to trigger the valueChange.
Is it possible to suppress a valueChange when Kendo is adding these attributes? Can you please provide examples of how we might be able to avoid these change events?
Thanks for your help,
Bob
Hello,
I am trying to bind my treeview to a datasource provided by a controller function, using two examples provided by Telerik, on the web site and at the demos project. My goal is to use the script call from used in one demo with the controller data source used in the other, but I am not being able to do it.
This is the script code:
<script>
var serviceRoot = "https://demos.telerik.com/kendo-ui/service";
homogeneous = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: "api/Servicos/Employees",
dataType: "jsonp"
}
},
schema: {
model: {
id: "SetorId",
hasChildren: "hasChildren"
}
}
});
$("#treeview").kendoTreeView({
dataSource: homogeneous,
dataTextField: "Nome"
});
</script>
And this is the Controller code:
[Route("Employees")]
[HttpGet]
public JsonResult Employees()
{
var result = _unitOfWork.SetorSolicitante.GetAll();
{
var employees = from e in result
select new
{
id = e.SetorSolicitanteId,
Name = e.Nome,
hasChildren = (from q in _unitOfWork.SetorSolicitante.GetAll()
where (q.SetorPaiId == e.SetorSolicitanteId)
select q
).Count() > 0
};
return new JsonResult(employees.ToList());
}
}
My table references itself, where SetorPaiId indicates if the SetorId is a child of it.
Could I get some assistance on that issue?
Regards,
Alexandre
I'm using a dropdowntree editor on a grid column. The bound field is a list of objects.
Ex. I would not want 18' checked here, just the two children on the 2nd level:
Editor:
function equipmentEditor(container, options) {
let ds = new kendo.data.HierarchicalDataSource({
data: _equipmentTypes,
schema: {
model: {
children: "Items"
},
},
});
$("<input data-bind='value: EquipmentTypes'/>")
.attr("name", options.field)
.appendTo(container)
.kendoDropDownTree({
checkboxes: {
checkChildren: true
},
checkAll: true,
autoWidth: true,
dataTextField: "Description",
dataValueField: "Code",
dataSource: ds,
autoClose: false,
tagMode: "single",
});
_equipmentTypes data used in dataSource:
[
Posted object:
"EquipmentTypes": [
{
"Code": "17'",
"Description": "17'",
"Items": [
{
"Code": "T17.DUMP",
"Description": "17' Dump Trailer",
"Items": [],
"id": "",
"index": 0,
"checked": true,
"_level": 1,
"_tagUid": "b13353ee-cbd3-4226-8b4c-080d4ea775e4"
}
],
"index": 0,
"expanded": true,
"checked": true,
"_level": 0,
"_tagUid": "c0785273-c8bd-4a18-8598-de5d7ba6c16e"
},
{
"Code": "T17.DUMP",
"Description": "17' Dump Trailer",
"Items": [],
"id": "",
"index": 0,
"checked": true,
"_level": 1,
"_tagUid": "b13353ee-cbd3-4226-8b4c-080d4ea775e4"
}
],
Hi,
I am trying to build a dashboard with the tile layout and beside standard kendo ui charts and grids, I would like to have a couple of tiles with pre-built angularjs directive components.
How can I inject the angularjs component and make it bound to data in tilelayout controller?
Html renders from the template, but it is not reachable from the controller, as (I presume it is not bound directly).
Any help would be appreciated.
Thanks,
Vedad
I have a scheduler in month view - the events are extending beyond the day slow, starting with 2 pixels past slot, then 4, then 6, then 8 etc.
I've zoomed in and shown with a couple of lines on each one to show how each event is going further and further beyond bounds
Once I get a lot of data in the scheduler, this starts to look worse and worse. Any chance there is a fix for this?
Hi there,
I have integrated Telerik UI into our platform. It worked fine but recently when I try to edit my content in design mode the content is rendered in HTML mode not in text mode as it supposed to(see picture). Any idea as of why this is happening?
Best regards,
Gilles