I have a very weird behavior of the Scheduler Week view. As you can see on the screenshots the work hours on Sunday show a different timing as on the other days and the last row on the bottom only shows 6 columns instead of 7. And to make it even more weird: This only happens if the view is set to the current week. As soon as I navigate to a different week as the current one, it shows as expected.

Here is my setup of the scheduler itself:

<Scheduler
	data={calendarData}
	defaultDate={displayDate}
	height={calculateSchedulerHeight()}
	timezone="CET"
	slot={CustomSlot}
	onDataChange={handleDataChange}
	editable={{
		add: true,
		remove: false,
		drag: false,
		resize: false,
		select: false,
		edit: true,
	}}
	form={
		isColumnEmpty ? NewProfileForm : EditProfileForm
	}
	footer={(props) => <React.Fragment />}
	header={CustomSchedulerHeader}
	defaultView="month"
>
	<DayView
		slotDivisions={1}
		showWorkHours={false}
		workDayStart="06:00"
		workDayEnd="19:00"
		editItem={CalendarProfileItem}
	/>
	<WeekView
		// workWeekStart={Day.Monday}
		// workWeekEnd={Day.Friday}
		showWorkHours={false}
		workDayStart="06:00"
		workDayEnd="20:00"
		slotDivisions={1}
		editItem={CalendarProfileItem}
		currentTimeMarker={false}
		viewSlot={CustomSlot}
	/>
	<MonthView
		slot={CustomMonthSlot}
		itemsPerSlot={10}
		editItem={CalendarMonthItem}
		viewSlot={MonthSlot}
	/>
</Scheduler>

And here is the setup of my CustomSlot function, where I only add some different behavior on double click:

const CustomSlot = (props: SchedulerSlotProps) =>
	props.isAllDay ? (
		<SchedulerSlot
			{...props}
			style={{
				...props.style,
				backgroundColor: dropzoneColor,
				height: '35px',
			}}
		/>
	) : (
		<SchedulerSlot
			{...props}
			onDoubleClick={async (event) => {
				const eventColumn = event.target.props.col;
				const day = dateToWeekday(props.start);
				const emptyDay: boolean = isDayEmpty(props.start, day);
				setIsColumnEmpty(emptyDay);
				if (emptyDay === false) {
					const profileId = getProfileIdFromExceptions(
						props.start,
						day
					);
					if (profileId) {
						changeItem.current = {
							profile: profileId,
							column: eventColumn,
							startDate: props.start,
						};
						setSelectedProfile({ id: profileId, label: '' });
						setSelectedDay(eventColumn);
						setSelectedDate(props.start);
					}
				}
				props.onDoubleClick && props.onDoubleClick(event);
			}}
		/>
	);

So I guess nothing too weird here. There was even another issue because it showed a huge white area on the right of the Scheduler viewport and also showed the current time marker (both also only for the current week) but I could solve that by assigning the viewSlot and setting the CurrentTimeMarker to false.  If needed I can try setup something on StackBlitz but it's not so easy because my app is quite large... Any idea would be appreciated.

Please help me solve this case,

how to make a chart legend look like this ?

I'm using kendo react, and I'm having trouble customizing the legend to look like in the image, can someone help me?

Thank you 🙏

Hi team,

Just wanted to check if there are any props or attributes that can be used to change the number of visible items in the dropdown.

For example, I'm using a Kendo Multiselect (see below image for reference) and by default, it's showing me 7 items when I open the Region dropdown. It is possible to change this to 8 or 10 based on whatever input is given? Thanks!

Thanks!

I use a Datepicker with 'he' loclae. It works fine, but the week's days are displayed from left to right instead of right to left as expected.
I tried to add className = 'k-rtl' but it did not help.
Is there a way to change that?

Here is a demonstration of the problem:

https://stackblitz.com/edit/react-vkzwzo?file=app%2Fmain.jsx

Hi.

I notice that when I put value in the filter input and then remove it the operator is deleted also. Is there any way to prevent that?

video attached.

Thanks

Hi.

I'm trying to do a custom GridToolbar that will serve many data grids but it won't render, what is the problem and how I can do it?

stackblitz example

Thanks.

Hi,

I have a virtual scrolling in my grid, it's unknow total data because it depend which user is connected and if there is filter applied, so I just set total to 10000 , because I didn't find any solution to change the total depending on data loading.

So first issue is :

Is it possible to have virtual scrolling without knowing the total data length?

Another problem that I'm struggling with is virtual scrolling with Filtering, after applying a filter on the data I have empty rows in my grid (because now the data length is less than 10000- the total data decaled before).

So the big question is : Is that possible to have virtual scrolling with Filtering and unknow total data length?

I'm adding my code, if this is not possible so what you recommend me to do?

Thank you

Hey there,

I've been having a tough time getting infinite scrolling to work with sorting and filtering. Because the infinite scrolling splices out of the array of data, I've set up an "original data" state to hold all of the unmutated data. However, this is not working well because the scroll location when you unfilter the data is causing more items to be loaded. I'm sure I'm dealing with a bug on my end, but is there any example of infinite scrolling with sorting and filtering? With a simplified example, I might be able to see what I'm doing wrong on my end.

Thank you!
Janki

Hello, I would like to create my own icon component that includes a tooltip. I created a small sample project on stackblitz for this. Unfortunately, the icon and the tooltip don't work quite right in the example project, but that's not important for my question.

My goal would be for the two icon components to be displayed in a line next to each other by default. 

After executing, if I assign the style attribute <div style="display: inline-block"> to the div that wraps the span, it works the way I want it to. 

I'm assuming the tooltip behind the scenes creates this construct, which I can't directly access in the code via the <tooltip> tag. Is there a way to find out which CSS class one would need to access to enable the desired behavior.

I would be very happy about a solution proposal. Thanks in advance.