Is it possible to use GridColumn and the footerCell prop and have the footer row export in the Excel export?

I see this example, but it's utilizing the ExcelExportColumn, which doesn't have all of the extra things I want (footerCell, custom cell, header class name, filter, etc) - is there a workaround I'm missing?

Thank you!

Hi Team,

I am using Kendo Grid React. I want to disable weekend on my Datepicker. Please let me know the property to disable weekend on my Datepicker.

I am generating a bubble chart in my React app, but all items are the same color. Is there any way to have each category automatically show as a different color? I see the colorfield prop, but I don't want to have to manually generate colors, and the number of categories can vary.

Also I've set the legend visible: true, but the legend doesn't appear. Is it possible to have a legend on a bubble chart?

Hi.

I have setup this test page:

https://stackblitz.com/edit/react-gpfhk9?file=app/main.tsx

The page shows 2 issues:

1) I implemented an external button that should collapse the "Sub Content" pane to the bottom. But instead of collapsing the "Sub Content" pane by moving the divider to the bottom, the divider stays where it is and the "Sub Content" pane gets collapsed to the top.

2) When you just reload the page in its initial state and then click on the triangle button on the divider to collapse the "Sub Content" pane, it shows the same behavior which I described above. But if you just move the horizontal divider a bit up or down and then click the triangle, the divider moves to the bottom as expected.

Is this a bug or am I doing something wrong and can somehow implement a setting so that the behavior will work as expected?

Thanks!

Greetings,

Bernd

Hi,

We use a mix of standard HTML inputs and KendoReact controls in forms in our application. Using v4.10.0 of kendo-react control and kendo-theme-bootstrap packages, we were able to apply the Bootstrap form-control class to both standard HTML inputs and KendoReact controls with no issues. We were also able to apply the Bootstrap is-invalid class for custom validation requirements, again with no issues.

After upgrading to v5 of bootstrap, kendo-react control and kendo-theme-bootstrap packages, the form-control class breaks the appearance of KendoReact controls. Please see the following example modified from the KendoReact ComboBox Overview so that package versions can be easily modified. 

https://stackblitz.com/edit/react-mintjh?file=app/main.tsx

I have left the package at their v4 versions that we were using without issue. If you bump all the kendo-react control, kendo-theme-bootstrap and bootstrap packages to the latest v5 versions in package.json you can see that the controls no longer render properly.

We are committed to the Bootstrap form layout, and we have more standard HTML inputs than KendoReact controls. Can you please suggest classes we can use as equivalents to form-control and is-invalid for the KendoReact controls we use in our forms? Or some other recommended way of using KendoReact controls in HTML forms using Bootstrap styling and custom validation? I can't find any clear documentation on it.

Kind regards,

David

I'm having a strange formatting issue when exporting to PDF. I'm using column-count to divide text in a div into 2 columns. When I export to PDF, some of the text is pushed to the next page. There is plenty of space on the first page for all the text to fit.

I have put a sample of the issue out in StackBlitz that reproduces the formatting issue. I'm probably just overlooking something, but a little help would be much appreciated.

Thanks!

Edit on StackBlitz 

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