Hi,

How do I combine two separate grid tables in one PDF file and export them with one being on top of the other with some spacing between them? I'm trying to achieve this with GridPDFExport specifically.

I am currently working on a project that requires a React component with advanced chat bot functionality, and I would appreciate your guidance on how to implement it. The component should have the following capabilities:

• Initially display as a small icon.
• When the small icon is clicked, it should open a small chat window at the bottom corner of the screen.
• The small chat window should have the capability to be moved anywhere on the screen.
• The window should be able to expand to full screen by clicking a small icon on the chat box.
• The window should be able to open in a new tab or new browser window.
• Each message in the chat box should be able to be copied to the clipboard, and the alignment format of the messages should be changeable.

Hello, I am trying to customize each node in the Kendo UI React Treeview. So far my code looks like this:

    <TreeView
        className={"margin-top-15"}
        data={processTreeViewItems(contextualWorkspaceGroups, {
            //select: selectedLayer,
            //check: check,
            //expand: expandedWorkspace,
        })}
        focusIdField={"id"}
        draggable={false}
        expandIcons={false}
        item={customContextualLegendItemRenderer}
        onExpandChange={onLayerExpansionChanged}
        aria-multiselectable={true}
        onItemClick={OnLayerItemSelected}
        checkboxes={true}
        onCheckChange={onLayerVisibilityChanged}
    />
</div>

where the item template is defined as follows:

const customContextualLegendItemRenderer = ( props : any ) => {
    return (
        <div className={'contextualLegendItem'}>
            <SvgIcon className={"contextualLegendItemTypeIcon"} icon={aggregateFieldsIcon}/>
            <span className={"contextualLegendItemTypeText"}>{"Workflow"}</span>
            <span className={"contextualLegendItemText"}>{props.item.text}</span>
            <Label className={"contextualLegendItemStatusLabel"}>{props.item.status}</Label>
        </div>
    );
};

That seems to work, but I also need to control the checkbox's location and style. How do I do this?  

Hi,

just want to share that the new update to the Telerik site look cleaner and nice, but it does need some times to navigate the codes and look for the associated files.

We prefer to have keyboard up/down cursor correspond to navigating input focus up/down a row in the KendoReact Data Grid.

We are already successfully using custom GridColumn Cells to render inputs at all times in tandem with a Grid.onKeyDown handler that finds the next input to set focus.

(for anyone interested this only took a few lines of code to implement a dom navigation heuristic that finds the column index of the nearest TD via onKeyDown event.nativeEvent.target.closest("td") and then finds the corresponding td to that same column index in the next TR up or down, and then hits the first nested native html <input> found to call focus() -  this seems simple and durable to variances in nested components as long as there is a native input to be found, hence the need to render inputs at all times... which does run counter to the approach i saw represented in the KendoReact demos based on setting a particular dataitem's "inEdit" property which wasn't the look we were going for =)

The above cursor navigation is working but before it kicks in, inputs like the DateTimePicker are also taking a cursor up/down to change the date segment that currently has focus - and this doesn't seem to be optional behavior yet?

I believe the fundamental challenge to any dom "wrapper" approach is by the time an outer dom element receives onKeyDown it's too late for event.preventDefault or event.stopPropagation to hide it from the inner input element (the native kendoreact inputs in this case).

Hence the ask here to have an option to ignore that at on the individual KendoReact input components.

With previous KendoReact component builds (e.g. 8.2.0) we successfully proved "patch-package" various subcomponents of DateTimePicker, NumericTextBox and MultiSelect to prevent them from responding to up/down cursor events.

Of course patch-package approach is fragile to upgrades and sure enough recent need to take @progress/kendo-react-dateinputs@9.1.0-develop.6 to get into DateTimePicker formatPlaceholder bug fixes broke previous patches, highlighting need for more resilient fix.

I've attached the latest patch-package files to give precise reference to what keyboard events we're interested in disabling.

I'm assuming this is a feature request and happy to have it reallocated to a support ticket... but wanted to post it in open forums in case community might have alternative suggestions to achieve what we're looking for?

Maybe other approaches to what seems like it could be a general html nested component strategy pattern?

For instance, I'm hesitant to pursue any removeEventListener based approaches for fear of how that might conflict with how i vaguely understand react is continually recreating dom elements upon each render cycle, so i'd be open to encouragement in that direction if anyone has experience to share?

Also wondering if this falls into the realm of "accessibility" and maybe there's already ways to disable accessibility? (as negative as that sounds).

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>