We have experienced issues with events getting hidden when we use `startTime` and `endTime` for the views. It happens at specific values for `startTime` and `endTime` that seem unrelated in any way.

Example:

Event:

  {
    TaskID: 120,
    OwnerID: 3,
    Title: 'Employee database update',
    Description: '',
    StartTimezone: null,
    Start: '2024-06-21T01:00:00.000Z',
    End: '2024-06-21T23:30:00.000Z',
    EndTimezone: null,
    RecurrenceRule: null,
    RecurrenceID: null,
    RecurrenceException: null,
    isAllDay: false,
  },

DayView:

      <DayView
        title="Two-Day-View"
        slotDuration={30}
        slotDivisions={1}
        showWorkHours={false}
        startTime={'12:30'}
        endTime={'15:15'}
        workDayStart={'08:00'}
        workDayEnd={'20:00'}
      />

In this case, setting `endTime` to '15:15' makes the event hidden while setting it to '15:16' makes it visible.

Here is a fork of the original demo showing the problem:

https://stackblitz.com/edit/react-cmdnxy?file=app%2Fapp.tsx

We're using version 5.15 of the scheduler, but it is present on the current version as well. How are we supposed to work around that issue and show all events within the given time range (no matter if they start before or after the set `startTime` and `endTime`)?

This doesn't work with the drilldown example adapted from the KendoReact example of the series graph because having a drilldown factory on each ChartSeriesItem means they can't interact with each other, you need it one layer higher. The only thing I can think to do is to use external variables in React state to track which drilldown you have entered and hide the other ChartSeriesItems

Drilldowns are created by using the props drilldownSeriesFactory and drilldownField on a ChartSeriesItem. When creating a series graph you can all your data and multiple categories under one <ChartSeriesItem /> component. When you want to create an area chart (or line chart) you need to have multiple ChartSeriesItem components, one per data series.

Is there a way to do this purely using KendoReact Charts?

Code below to add some context

<Chart drilldownState={drilldownState} onDrilldown={handleDrilldown}>
    <ChartTitle text="Baseline 06/2024" />
    <ChartCategoryAxis>
         <ChartCategoryAxisItem categories={categories} title={{ text: 'Months' }} baseUnitStep={"auto"} />
    </ChartCategoryAxis>
    <ChartSeries >
        {/* <ChartSeriesItem
                        type="area"
                        stack={true}
                        data={availabilityData}
                        name="Availability"
                        field="value"
                        drilldownField="type"
                        drilldownSeriesFactory={DrilldownByAvailabilitySeries}
           /> */}
          <ChartSeriesItem
                        type="area"
                        data={unavailabilityData}
                        name="Unavailability"
                        field="value"
                        drilldownField="type"
                        drilldownSeriesFactory={DrilldownByAvailabilitySeries}
           />
    </ChartSeries>
    <ChartLegend position="bottom" />
</Chart>

Hi, 

Like my title says imtrying to create a KendoReact Tooltip around a SvgIcon.

I tried these 3 options, but have not been successful:

Please advise.

Thanks,
Grant

Hello,

Is there a non hacky way to handle a column resizing to below the grid container's width? Basically, we want to cancel the resize event if the total width of the columns shrinks below the width. I came up with a hacky solution that sort of works, but I was wondering if there is a set way to do this?

Thanks!

Hello,

We are using the Find and Replace component from the Editor and we would like to have a supplementary feature.

When the "Find and Replace" dialog is already open, we would like to click on the "Find and Replace" button in the Editor toolbar to close it.

The goal would be to close and re-open the dialog even if the user has moved it outside the visible part of the screen.

We have looked for ways to achieve this, but it doesn't seem possible to customize the "Find and Replace" button.

Do you plan on implementing a way to customize the "Find and Replace" component in the future?

Regards

Hello,

I am looking for a library which would allow us to implement a drag and drop reordering of the rows of a virtualized list.

I would like to use the KendoReact Drag&Drop utility, but it seems that `useDraggable` needs a ref as its first argument.

And it seems that this ref should not be unmounted, otherwise it yields an error.

But, in virtualized lists such as `FixedSizeList` from React Window, the components will be automatically unmounted when they are outside the viewed area.

Is it possible to implement the Drag&Drop utility from KendoReact inside a virtualized list, or should we look for another Drag&Drop library which would support this use case?

Hello,

I am attempting to create a vertical menu with a custom style for the menu items. I have the following code with the output attached. As you can see the menuitems are not aligned. Any thoughts? 

const contentRender = (props: any) => {
    return (
        <div style={{margin:"0px 0px 5px 0px",
            padding: '0px 0pc 0px 0px !important',
            fontSize:"xx-small",
            textAlign:"center",
            justifyContent:"center"}}>
            <SvgIcon icon={props.item.svgIcon} size={"large"}/>
            <br/>
            <span>{props.item.text}</span>
        </div>
    );
};
 
<Menu vertical={true} itemRender={contentRender}>
    <MenuItem svgIcon={allIcon} text={"All"} />
    <MenuItem svgIcon={userIcon} text={"Me"} />
    <MenuItem svgIcon={folderIcon} text={"None"} />
    <MenuItem text={"Workflows"} svgIcon={aggregateFieldsIcon}/>
    <MenuItem text={"RFIs"} svgIcon={stickyNoteIcon}/>
    <MenuItem text={"Coordinat.."} svgIcon={clockIcon}/>
    <MenuItem text={"Observat.."} svgIcon={binocularsIcon}/>
    <MenuItem text={"Inspection"} svgIcon={clipboardIcon}/>
    <MenuItem text={"Punch"} svgIcon={pinIcon}/>
    <MenuItem text={"Incident"} svgIcon={groupCollectionIcon}/>
    <MenuItem text={"Correspnd.."} svgIcon={commentIcon}/>
</Menu>