Questions on KendoReact Forum

2 answers

67 views

JsonSchema support for KendoReact Form component

Hi.

Is there any way to use JsonSchema when creating a Form with the KendoReact Form component? Maybe something along the lines of react-jsonschema-form? If not, are there any plans to integrate this in the future or any ideas how this could be implemented using the existing KendoReact components?

In the end, we would like to be able to build our forms dynamically based on jsonSchema information. That is the main goal of this question.

Thanks,

Greetings,

Bernd

Form

Input

answered on 29 Jun 2023

0 answers

57 views

Grid lost the vertical line

as follow img: how should i fix it

Grid

Styling

asked on 29 Jun 2023

0 answers

62 views

Scheduler crashed

Here is my code, and it crashed.

import {
  AgendaView,
  DayView,
  MonthView,
  Scheduler,
  TimelineView,
  WeekView,
} from '@progress/kendo-react-scheduler';
import * as React from 'react';
import { useState } from 'react';
import { useQuery } from 'react-query';
import { useAppContext } from '../../AppContext';
import { getCalendarEvents } from './getCalendarEvents';

const workDayStart = '09:00';
const workDayEnd = '18:00';
export function Calendar() {
  const { accessToken } = useAppContext();
  const [isMonthView, setIsMonthView] = useState(false);
  const [selectedDate, setSelectedDate] = useState(new Date());

  const { data: events } = useQuery({
    queryKey: ['getCalendarEvents', { selectedDate, isMonthView, accessToken }],
    queryFn: getCalendarEvents,
    initialData: [],
    refetchOnWindowFocus: false,
  });

  const onDateChange = (e) => {
    setSelectedDate(e.value);
    console.log(e.value);
  };
  const onViewChange = (e) => {
    if (e.value === 'month') {
      setIsMonthView(true);
    } else {
      setIsMonthView(false);
    }
  };

  return (
    <Scheduler data={events} onDateChange={onDateChange} onViewChange={onViewChange}>
      <WeekView title='Week' workDayStart={workDayStart} workDayEnd={workDayEnd} />
      <AgendaView />
      <DayView workDayStart={workDayStart} workDayEnd={workDayEnd} />
      <TimelineView workDayStart={workDayStart} workDayEnd={workDayEnd} />
      <MonthView />
    </Scheduler>
  );
}

Scheduler

asked on 27 Jun 2023

2 answers

137 views

Grid takes over sibling elements with width property is set.

I am working with the KendoReact data grid for a SPA. The idea is that many elements on the page stay consistent, like a navigation bar and footer, and each 'page' is just different content being conditionally rendered inside of that frame.

In this screenshot a very basic diagram is shown color coding sort of how this is laid out. The root contains the constant elements like the left navbar or footer. And react-router switches the inner content around depending on the route chosen. For this page, a div exists to house a backdrop image (blue area). And another div provides a background for the pages elements (pink). Inside that div is titles, buttons, etc. and then a Kendo grid.

A basic layout for my markup is as follows:

<div className="flex flex-col w-screen h-screen fixed">
<div className="flex flex-grow overflow-hidden">
<LeftNavigationBar />
<TablePage> 
<div className="w-full h-full p-8 justify-center">
 <div className="h-full w-full overflow-y-auto flex flex-col">
<Grid>
</div>
</div>

</TablePage>
</div>
<Footer />
</div>

The issue I am having is with width sizing. My goal is that I can set some sort of minWidth property on them. I want them to proportionally size up to fit the component size, but once the window is small enough the columns reach their minsize, the grid will shrink and use horizontal scrolling instead.

I read through a few docs to get this working, but none of them were quite right. The first example on This page is almost exactly what I am looking for. And I tried implimenting this solution. The problem is with my navbar and other consistent elements. It looks like the column width setting causes the table to override the widths of everything else on the page.

This screenshot is a rough diagram representing what is happening. When I shrink the window it will actually start to overlap my other elements until the columns reach a minsize, and then the scrollbar is shown.

So my question boils down to how I may be able to implement my solution while keeping the width of my other persistent elements as a priority. Thank you for taking the time and let me know if I can clarify the question or send additional items to help.

Grid

Styling / Themes

updated answer on 27 Jun 2023

1 answer

102 views

Kendo React Scheduler Delete Item

Hi support team,

I am using React Scheduler. I was trying to delete event from Scheduler. I used onDataChange event as example in website. But When I delete, deleted array is empty and updated array returned with useless data. Please guide me how to fix it.

const handleDataChange = async ({
        created,
        updated,
        deleted,
      }: SchedulerDataChangeEvent) => {}

Scheduler

answered on 27 Jun 2023

1 answer

73 views

@progress/kendo-react-pdf

In kendo react pdf how to apply header for all pages. using <pdfExport>

PDF Processing

PDF Viewer

answered on 23 Jun 2023

1 answer

356 views

Grid loses focus during inline editing with custom editor

i followed the example provided in the docs to replicate inline editing for my scenario.

However after clicking on edit button , for every keystroke the input loses focus.

I observed that After removing the below parameter code works fine:

dataItemKey={product id}

What is the use of this parameter and how does specifying it (uniquely or not) affects focus on the input text box while typing.

Please advise.

https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-custom/

General Discussions

Grid

answered on 23 Jun 2023

0 answers

849 views

Adding an empty value item to a DropDownList

Hi,

I am looking for guidance on the correct way to provide an empty option in a DropDownList bound to a collection of objects. It appears to work if you just use a 'null' defaultItem:

defaultItem={null}

which adds an empty item to the top of the list and returns a null value onChange. However, the documentation suggests that this property is supposed to be a placeholder and that the defaultItem property type must match the data type. Is there a better approach to adding an empty item to the list?

Kind regards,

David

DropDownList

asked on 22 Jun 2023

1 answer

61 views

TreeList: Custom headerCell --> how to get columnMenu to show?

I can't seem to find the ColumnMenu component from the cellProps provided for the headerCell prop for a TreeList column. I would like to utilize a custom headerCell but also show the column menu.

TreeList