Declined
Last Updated: 20 Feb 2024 12:53 by ADMIN
Currently, if we don't have focusable elements in the Dialog, the focus is not trapped in the component and the user can interact with other elements on the page. It would be beneficial if the Dialog component trapped focus within itself even if no focusable elements are present.
Declined
Last Updated: 30 Jul 2023 09:07 by ADMIN
Created by: Matej
Comments: 1
Category: KendoReact
Type: Feature Request
0

I would like to use my custom component as the chat input. Is it possible to add new prop to chat component? Similar to DatePicker's "dateInput" prop.

Declined
Last Updated: 30 Jul 2023 09:01 by ADMIN
Created by: Andrew
Comments: 2
Category: KendoReact
Type: Feature Request
2

To Whom It May Concern,

 

I am requesting the Kendo team to implement a new feature of programmatically setting a Grid's page for the Kendo React Grid

This can be accomplished by having a listener for the Grid's state. For example, when the Grid's skip props is changed, the Grid's page will also change to the number of elements skipped.

Please consider implementing this feature.

Thank you.

 

Sincerely,

Andrew J. Yang

Keysight Technologies

Declined
Last Updated: 30 Jul 2023 05:47 by ADMIN
Created by: Sebastian
Comments: 3
Category: KendoReact
Type: Feature Request
0

Hi,

the current filter is great but a little bit difficult to use. I would like to see an inline filter like the following screenshot:

It is used by many applications. Just to name a few

 

* Gitlab (where the screenshot is from)
* Contentful (CMS)
* Google Cloud Console

Declined
Last Updated: 26 Jul 2023 13:52 by ADMIN
Created by: Janki
Comments: 1
Category: KendoReact
Type: Feature Request
1

Not only would I like control over the group order (like from this thread https://feedback.telerik.com/kendo-react-ui/1523636-need-to-be-able-to-have-more-control-over-the-order-of-groups-in-the-kendo-grid-sort-on-the-text-is-insufficient), it would be awesome if we could sort groups themselves.

I understand that the current set up sorts children within groups but not the groups themselves. However, sorting within and between groups is a bit more intuitive to the user when they see visually-grouped information and try to sort on it => most of our users expect the groups to get sorted as well.

Although I can write my own sorting functionality, it can get out of hand quickly with ascending/descending, numeric vs alphabetic columns, and multi-sort vs single sort, but KendoReact already has the capability to sort in these three ways with its non-grouped grid functionality.

Declined
Last Updated: 26 Jul 2023 11:29 by ADMIN
Created by: James
Comments: 2
Category: KendoReact
Type: Feature Request
0

Hi there,

I can see there is a column chooser component for the Angular Data Grid e.g. https://www.telerik.com/kendo-angular-ui/components/grid/columns/menu/#toc-column-chooser-item but there is not an equivalent for the React Data Grid (unless you code it yourself).

The DevExpress React Grid does have this feature https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/column-visibility/ so we were wondering if such a thing is planned React Data Grid?

Thanks very much,

James

Declined
Last Updated: 26 Jul 2023 07:37 by ADMIN

Hello,

Our team is using MobX-State-Tree (MST) and KendoReact TreeList control with virtual scrolling enabled. According to documentation MST model stores data as an observable array (https://mobx-state-tree.js.org/API/#array and https://mobx.js.org/api.html#observablearray).

The MST model’s field ‘tree’ is not a regular array, but a LegacyObservableArray.

From UI standpoint: 

  • initially all tree nodes are collapsed

  • user clicks on i.e. 3rd tree node

  • selection is not displayed on any tree node (3rd node expected to be selected)

  • user expands 1st tree node - selection is set on the 3rd tree node

The following warning appears in the browser console. 

Warning: Failed prop type: Invalid prop `data` of type `object` supplied to `TreeList`, expected `array`.

    in TreeList (created by wrappedComponent)

    in wrappedComponent (created by wrappedComponent)

    in div (created by wrappedComponent)

    in div (created by wrappedComponent)

    in wrappedComponent

Model is defined as:

const TreeViewModel = types

    .model('TreeViewModel', {

        selectedItemUUID: types.maybe(types.string),

        tree: types.optional(types.array(TreeNodeModel), []),

        isLoaded: types.maybe(types.optional(types.boolean, false)),

        treeTypes: types.optional(types.array(TreeNodeTypeModel), []),

    })

    .views((self) => ({

        get treeCollection(): any {      

            return self.tree;

        },

    }))

Component is defined as:

        return (<>

            {!viewModel.isLoaded && loadingPanel}

            <div className='treeListContainer' ref={stageCanvasRef}>

                {treeListContainerHeight && <TreeList

                    style={{ maxHeight: `${treeListContainerHeight}px`, overflow: 'auto', }}

                    data={viewModel.treeCollection}

                    expandField={expandField}

                    subItemsField={subItemsField}

                    columns={columns}

                    selectedField={selectedField}

                    rowHeight={40}

                    scrollable="virtual"

                />}

            </div>

        </>);

The following workaround allows converting an observable array to a regular array.

    .views((self) => ({

        get treeCollection(): any {      

            return JSON.parse(JSON.stringify(self.tree));    // or self.tree.slice()

        },

    }))

This solution affects performance due to array copy. 

Besides this TreeList uses an array copy. User’s selection and expanding don’t trigger related changes in the initial observable array in the model.

Related event handlers (i.e. onSelectionChange, onExpandChange) should be extended to make appropriate changes in the MST model.

Can you please extend KendoReact controls to support observable arrays?

Is there a better solution?


Declined
Last Updated: 26 Apr 2023 13:17 by ADMIN
Created by: Jan
Comments: 1
Category: KendoReact
Type: Feature Request
0

We would like to use Kendo React to build a micro frontend UI but we did not found any relevant information that this is currently supported.

The main issue we are facing is how it isolate Kendo theme styling between different micro frontends.

Let's say we have 2 micro frontends A and B:

- A is using Kendo v6.

- B is using Kendo v7 (or some other future/past version).

Both of them will include their global Kendo styles which will collide.

After some investigation, we came up with 2 possible approaches:

  1. Isolating micro frontends using shadow DOM. This is the most common technique but unfortunately not supported by Kendo React yet.
  2. Prepend custom class to all Kendo CSS selectors (for example ".microfronend-a .k-button" instead of just ".k-button").

We have experimented with the second approach and it seems like a way to go. It also required to append all popups to root DOM node of a micro frontend which can be done easily using PopupPropsContext.

But adding a class to all Kendo CSS selector is technically not a trivial task. It would be nice if Kendo supported this out of the box, for example by providing some SCSS configuration variable.

Declined
Last Updated: 20 Apr 2023 07:16 by ADMIN
Created by: Aaron
Comments: 0
Category: Rating
Type: Bug Report
1
Details in forum post: https://www.telerik.com/forums/rating-component-not-visible
Declined
Last Updated: 27 Mar 2023 10:48 by Agnieszka
Created by: Agnieszka
Comments: 2
Category: KendoReact
Type: Feature Request
0

Currently, there is a following signature of function "rowRender" passed to React Grid:

rowRender?: (row: React.ReactElement<HTMLTableRowElement>, props: GridRowProps) => React.ReactNode;

I managed to access something which I assume represents this index somehow by using "row._owner.index" although I'm not completely sure if that is always identical to the index of the row being rendered.

It would be very helpful if an index of a rendered row could be accessed as follows:

rowRender?: (row: React.ReactElement<HTMLTableRowElement>, props: GridRowProps, index: number) => React.ReactNode;

 

 

 
Declined
Last Updated: 25 Oct 2022 13:01 by ADMIN
Created by: Grant
Comments: 4
Category: KendoReact
Type: Bug Report
0

Hi Team, 

If you take a look at my demo, I have 2 scheduler events, and I've created a custom SchedulerItem that renders the background of one of them to be blue.

When dragging the items around, the dragItem mains the same color with a bit of opacity, cool.

When resizing, the orange (?) one works great, this is the default color theme. However when I resize the blue one, while resizing, the resizeItem is an opaque blue, but the SchedulerItem underneath reverts back to the original default color scheme thereby mixing the colors.

Please advise.

Thanks,
Grant

Declined
Last Updated: 18 Aug 2022 12:28 by ADMIN

Test Environment:

OS: Windows_11
Version: 21H2
OS Build: 22000.795

Browser: Version 103.0.1264.71 (Official Build) (64-bit)

Prerequisite steps:

1. Go to system settings.

2. Navigate to 'Accessibility' and activate it.

3. Navigate to 'Contrast theme' and activate it.

4. Select 'Desert/Aquatic' High Contrast theme in the combo box.

 

Repro Steps:

1. Open given URL https://canvasjs.com/docs/charts/chart-options/axisx/viewport-minimum/ in Edge.

2. Graph page will be open. 

3. Turn on High contrast theme. 

4. Verify that Graphs are not adapting high contrast Aquatic and Desert modes or not. 

 

Actual Behavior:

Graphs are not adapting high contrast Aquatic and Desert modes. They remain same as in normal mode.  

 

Expected Behavior:

 Graphs should adapt high contrast Aquatic and Desert modes as defined. All elements should adapt to respective modes properly. 

Declined
Last Updated: 29 Jun 2022 12:42 by ADMIN
Created by: Brent
Comments: 1
Category: KendoReact
Type: Feature Request
0

Any chance you could provide simple sample code (stackblitz ideally) demonstrating how to combine multiple PDFExport's into a single PDF file?

The need to combine comes from wanting page numbering to start at 1 within each individual pdf render.

Totally open to using the lower level exportPDF from the drawing library... perhaps there's a straightforward path to combining the individual DataURI's?  also open to using additional 3rd party npmjs libraries.

Declined
Last Updated: 31 Mar 2022 09:50 by ADMIN

There is an inconsistency with the DateRange picker in the way element focus is set when closing the date selection popup by mouse vs keyboard. When using the mouse to close the date range selection popup, element focus becomes lost/reset.

You can simulate this from the example page https://www.telerik.com/kendo-react-ui/components/dateinputs/daterangepicker/

Steps to simulate good behavior (this works correctly):

* click the 'from' input text element (causes the popup to open and the text input to have focus)
* press 'escape' to close the popup (the popup is closed, and the 'from' input element retains focus)
* press 'tab' (focus moves to the 'to' text input element)

Steps to simulate behavior that could be improved:

* click or tab into the 'from' input element (causes the popup to open and the text input to have focus)
* click (with the mouse) outside the popup to close it (the popup is closed, and focus appears to be lost.)
* press 'tab' (focus moves to the 'from' input element again because we are back at the beginning of the tab order list)

This input can lead you into a tab order loop if you mix pressing 'tab' to advance focus, and using the mouse to click to close the date selection popup.
Feature request: when clicking to close the popup, element focus should be retained in the 'from' or 'to' text input; whichever had focus before the popup close, the same as pressing 'escape' to close the popup.

Declined
Last Updated: 07 Jan 2022 12:22 by ADMIN

Hi there, 
Im use chart component, and  sometimes the tooltip on grid disappear, i dont know why, and if i put the same code on the telerik this bug doesnt happen, here is an exemplo with the same data 

import * as React from 'react'
import * as ReactDOM from 'react-dom'

import {
    Chart,
    ChartSeries,
    ChartSeriesItem,
    ChartCategoryAxis,
    ChartCategoryAxisItem,
    ChartTitle,
    ChartLegend,
    ChartTooltip,
    ChartValueAxis,
    ChartValueAxisItem
} from '@progress/kendo-react-charts';

import 'hammerjs';


	const valueAxis = [
		{
			name: "",
			format: "{0:n1}",
			font: "10px Roboto",
      
		},
	];


const seriesValues = [
		{
			type: "bar",
			toolTipFormat: "{0:n2}",
			title: "Teste 1",
			spacing: 1,
      data: [27869.8616],
		},
		{
			type: "bar",
			toolTipFormat: "{0:n2}",
			title: "Teste 2",
			spacing: 1,
      data: [13277.95],
		},
		{
			type: "bar",
			toolTipFormat: "{0:n2}",
			title: "Teste 3",
			spacing: 1,
      data: [95164.9968],
		},
		{
			type: "bar",
			toolTipFormat: "{0:n2}",
			title: "Teste 4",
			spacing: 1,
      data: [115579.184],
		},
    {
			type: "bar",
			toolTipFormat: "{0:n2}",
			title: "Teste 4",
			spacing: 1,
      data: [null],
		},
        {
			type: "bar",
			toolTipFormat: "{0:n2}",
			title: "Teste 4",
			spacing: 1,
      data: [616.7145289747288],
		},
	];

const ChartContainer = () => (
  <Chart>
      <ChartTooltip
    shared={true}
    />
 <ChartValueAxis>
    {valueAxis.map((e, idx) => (
      <ChartValueAxisItem
        key={idx}
        name={name}
        labels={{
          visible: e.visible !== undefined ? e.visible : true,
          format: e.format,
          rotation: "auto",
          font: e.font,
        }}
      />
    ))}
  </ChartValueAxis>
    <ChartSeries>
      {seriesValues.map((item, idx) => (
        <ChartSeriesItem
          key={idx}
          type={item.type}
          data={item.data}
          name={item.name}
          spacing={item.spacing}
          labels={{
            font: '10px',
            format: "{0:n2}"
          }}

                />))}
    </ChartSeries>
  </Chart>
);

ReactDOM.render(
  <ChartContainer />,
    document.querySelector('my-app')
);

 

I inspected the page and realized this, that div is the tooltip and thats working normally, k-animation-container-show class, top and left properties on style;

and this one, is the tooltip that doest appear in the screen, does not have all class and style, just doesnt show up, 

However, the component inside that div was rendered, as can you see

Im using this version

"@progress/kendo-react-charts""^3.18.0",

 

Declined
Last Updated: 15 Oct 2021 05:18 by ADMIN

Repro:

  1. Create a DateTimePicker.
  2. Use its value prop to programmatically control the value the control uses.
  3. Add clickable Button (or other means) to programmatically set the value to an invalid date (i.e. something like new Date("invalid!").
  4. Click the Button.  The date displayed becomes "NaN/NaN/NaN 12:NaN PM".  I suppose this is reasonable.
  5. Now, click the calendar popup icon on the right-hand side of the component.

Expected:

Displays a calendar popup, perhaps defaulting to the current date & time.

Actual:

Throws an exception visible in the JavaScript console.  Replaces the UI with an error message.

Proof-of-Concept:

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


import * as React from 'react';
import * as ReactDOM from 'react-dom';

import {
  DateTimePicker,
  DateTimePickerChangeEvent,
} from '@progress/kendo-react-dateinputs';
import { Button } from '@progress/kendo-react-buttons';

const App = () => {
  const [date, setDate] = React.useState(new Date());

  const handleChange = (event: DateTimePickerChangeEvent) => {
    setDate(event.value);
  };

  const handleClick = () => {
    setDate(new Date('invaild!'));
  };

  return (
    <React.Fragment>
      <div className="example-wrapper">
        <p>
          (use Alt+<code>↓</code> to open the date-time selector, <code>←</code>{' '}
          and <code>→</code> to navigate, <code>↑</code> to increment and{' '}
          <code>↓</code> to decrement the value)
        </p>
        <DateTimePicker onChange={handleChange} value={date} />
      </div>
      <Button onClick={handleClick}>
        Click me, then the calendar, to break the DateTimePicker.
      </Button>
      <div>{date?.toString()}</div>
    </React.Fragment>
  );
};

ReactDOM.render(<App />, document.querySelector('my-app'));
Important note: This POC code uses version 4.9.0 of kendo-react-buttons.  I do not know what that translates to in terms of the "version" dropdown.  I can't tell if "2021.1.119" is applicable here.
Declined
Last Updated: 26 Aug 2021 10:44 by ADMIN

Hi Team, 

I have found an issue in the Grid Component that I think needs some attention, see below.,

## Current behavior
My GridColumns are not styling correctly when i hide/show them based on an edit state (for example). Some that have no width restrictions will the shortened then not lengthed.

 

## Current Version

KendoReact 4.8.0

 

## Expected behavior
If I hide/show a GridColumn, its width should not affect other GridColumns, only the Grid overall.

 

## Minimal reproduction of the problem with instructions
Example: https://stackblitz.com/edit/react-ngpvuj?file=app%2Fmain.jsx

Instructions:
1. View how age is the only column visible with a width attr
2. Click "Switch Mode" and notice how 'Id' is not added, but a width of 80 is now applied to the 'lastname' column, the same width as age
3. Click "Switch Mode" back to view, and see how id is removed and a width of 60 is applied to the 'firstname' column.

 

## Investigation:
Some investigation in the DOPM revealed that the issue is centred around the <colgroup> of the Grid's <table>:
- step 2 does the following to the <col>s in the <colgroup>
  - add a new col to the beginning with a width, for the Id column
  - add a new col to the end with a width, for the Age column
  - DOES NOT clear the width of the col group that used to be the age column

- step 3
 - Simply removes the last <col> in the group. Does not affect hte attributes of the remaining <col>s

 

I hope this was informative and can be resolved soon.

Kind Regards,
Grant

Declined
Last Updated: 06 Aug 2021 10:23 by ADMIN
  1. Open the https://answers.microsoft.com/en-us/msoffice/ using valid credentials.
  2. open any related article.
  3. Navigate to 'Reply' button and invoke it.
  4. Navigate to 'ordered list' button and invoke it.
  5. Navigate to the edit region and type some ordered list items.
  6. Now, Navigate to the ordered list items and listen to Narrator announcement.

Actual Result:

On navigating to ordered list items with arrow keys, Narrator is only announcing first letters of the text and while navigating with 'caps-arrow' keys, Narrator is only announcing position details of the list items.

Note: this issue is not observed with nvda

Nvda version: 2020.2

 

Expected 
On navigating to ordered list items with 'arrow keys' or using 'caps-arrow' keys, Narrator should announce the whole text of the list item including position details.


User Impact 
Knowing how many items are in a list is extremely useful to assistive technology users as they can know if they should attempt to skip the list, navigate to the end, help them recall placement of certain items, or orient themselves within the list.  

Declined
Last Updated: 27 Apr 2021 10:44 by ADMIN
Created by: Aske Hippe
Comments: 1
Category: KendoReact
Type: Bug Report
0

The navigation sidebar smooth scroll animation doesn't work for the Calendar component.

Here is a codesandbox that showcases the issue: https://codesandbox.io/s/hopeful-river-sk4oc?fontsize=14&hidenavigation=1&theme=dark

Thanks in advance for fixing this :-)

 

Declined
Last Updated: 27 Apr 2021 10:42 by ADMIN
Created by: Aske Hippe
Comments: 1
Category: KendoReact
Type: Bug Report
0

Hi there!

I've written this component for a custom message input box for the Chat in Conversational UI for React:

import { ChatMessageBoxProps } from '@progress/kendo-react-conversational-ui'
import { FC } from 'react'

const CustomChatMessageBox: FC<ChatMessageBoxProps> = (props) => {
  return (
		<>
			<input
				type="text"
				name="message"
				className="h-full w-full text-base md:text-sm focus:outline-none"
			/>
			{props.sendButton}
		</>
  )
}

export default CustomChatMessageBox

I'm supplying this component to the `messageBox` prop of the Chat component. However, sending the message doesn't work; neither by pressing enter or pressing the send button. If I replace the input with props.messageInput, it works.

Any help in fixing this will be greatly appreciated!

Thank in advance :-)

1 2 3