Telerik Forums
KendoReact Forum
1 answer
337 views

i need to display checkbox for each row. But only restrict to 1 selection at a time which is achieved through selection mode - single.

 

However there is checkbox displayed at header level as well which i dont want to display to user..how to achieve this ?

Konstantin Dikov
Telerik team
 updated answer on 04 Jul 2023
1 answer
306 views

I have a requirement to include a checkbox list field on a form--one field with N number of checkboxes. The value of the "field" would be a comma-delimited list of the checked values. The field can optionally be required, too, meaning at least one of the N checkboxes must be checked before the field is considered valid.  For example:

There isn't a CheckboxGroup equivalent to the RadioGroup (though people have asked about it). And the RadioGroup component doesn't seem to have a "checkbox mode."

Is there a decent way to build a checkbox list field using KendoReact? If so, how? I've toyed with the following options:

  • Using an array map function within the form to render a series of <Field ... component={Checkbox} /> instances.
    • This works, but validation is a challenge since each Field has its own validation message rather than the collective field having a singular validation message.
  • Building a custom field, <Field ... component={MyCheckboxList} />, where MyCheckboxList includes several Checkbox components. This is based on the Custom Components documentation. This seems incorrect since <Field /> is meant to hold one and only one form input field not several.

    I'd prefer not to hand-roll a checkbox list field without using KendoReact. I can't be the first KendoReact user to need a checkbox list on a form...right? 😀

    Konstantin Dikov
    Telerik team
     answered on 03 Jul 2023
    1 answer
    326 views
    Hello,

    I'm currently developing a feature in my project using the Kendo React TreeView component to display a large amount of nested data.

    However, I'm encountering performance issues due to the high volume of data I need to display. I'm curious to know whether Kendo React TreeView supports virtualization, or if there's an existing component that does?

    If this feature isn't available, could you provide any guidance or suggestions on how I might manually implement this?

    Best regards.
    Konstantin Dikov
    Telerik team
     answered on 03 Jul 2023
    1 answer
    110 views

    Hello,

    I have a React project, which uses "react-styleguidist": "13.0.0" to show various examples of the components, while kendo react grid 4.8.0 has been used. Using this version, the column resizer works as expected in the documentation page which contains several examples of Grid component.

    I am trying to upgrade Kendo React Grid and all its related packages to version 5.1.0. This is the latest version possible to use, without upgrading also the project to React 18.

    All functionalities seem to work as expected with version 5.1.0, except of column-resizer. It only works correctly in the 1st Grid example of the documentation page. In all other examples except of the 1st one, when I try to drag the column-resizer the column resizes correctly, but it also scrolls to the 1st grid example of the documentation page.

    Do you have any suggestions on what could be the root of the problem?

    Thank you.

    Vessy
    Telerik team
     answered on 30 Jun 2023
    2 answers
    99 views

    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

     

    Bernd
    Top achievements
    Rank 5
    Bronze
    Bronze
    Bronze
     answered on 29 Jun 2023
    0 answers
    85 views

    as follow img: how should i fix it

    Steve
    Top achievements
    Rank 1
    Iron
    Iron
     asked on 29 Jun 2023
    0 answers
    92 views

    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>
      );
    }
    

    Yiheng
    Top achievements
    Rank 2
    Iron
    Iron
    Iron
     asked on 27 Jun 2023
    2 answers
    216 views

    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.

    Hayden
    Top achievements
    Rank 1
    Iron
     updated answer on 27 Jun 2023
    1 answer
    161 views

    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) => {}
    Konstantin Dikov
    Telerik team
     answered on 27 Jun 2023
    1 answer
    111 views
    In kendo react pdf how to apply header for all pages. using  <pdfExport>
    Vessy
    Telerik team
     answered on 23 Jun 2023
    Narrow your results
    Selected tags
    Tags
    +? more
    Top users last month
    Rob
    Top achievements
    Rank 3
    Iron
    Iron
    Iron
    Atul
    Top achievements
    Rank 1
    Iron
    Iron
    Iron
    Alexander
    Top achievements
    Rank 1
    Veteran
    Iron
    Serkan
    Top achievements
    Rank 1
    Iron
    Shawn
    Top achievements
    Rank 1
    Iron
    Iron
    Want to show your ninja superpower to fellow developers?
    Top users last month
    Rob
    Top achievements
    Rank 3
    Iron
    Iron
    Iron
    Atul
    Top achievements
    Rank 1
    Iron
    Iron
    Iron
    Alexander
    Top achievements
    Rank 1
    Veteran
    Iron
    Serkan
    Top achievements
    Rank 1
    Iron
    Shawn
    Top achievements
    Rank 1
    Iron
    Iron
    Want to show your ninja superpower to fellow developers?
    Want to show your ninja superpower to fellow developers?