Unplanned
Last Updated: 25 May 2022 11:17 by ADMIN
Created by: Kyle
Comments: 1
Type: Feature Request
0

As it happens, none of the existing ways of setting icons in the Button component work with either of the icon libraries we are using, which are:

  1. Google Material Symbols, which uses ligatures to select icons rather than class names.
  2. Material Design Icons via @mdi/react and @mdi/js, which renders programmatically generated inline SVGs.  These icons technically can be downloaded as finished SVGs for use with the imageUrl property, but only a single icon at a time, which is significantly less convenient than having access to the entire library at once when using the @mdi packages.

Rather than try to separately add specific support for these (and a thousand other) icon strategies, however, you could add support for both (and a thousand others) at once by just having something like an iconJsx property.  It would accept JSX.Element, and whatever it is given gets rendered inside the span.k-button-icon.k-icon.

So you could do something like this...

<h1>How will you attack?</h1>
{/* Google Material Symbols */}
<Button iconJsx={<span className="material-symbols-outlined">local_fire_department</span>}>Fire Breath</Button>
{/* @mdi/react + @mdi/js */}
<Button iconJsx={<Icon path={mdiKabaddi} />}>Target Weak Spot</Button>
{/* A poop emoji */}
<Button iconJsx={<span role="img" aria-label="poop">💩</span>}>Bio Weapon</Button>

To get something like this...

<h1>How will you attack?</h1>
<button class="k-button k-button-md k-button-rectangle k-button-solid k-button-solid-base k-rounded-md">
  <span role="presentation" class="k-button-icon k-icon">
    <span class="material-symbols-outlined">local_fire_department</span>
  </span>
  <span class="k-button-text">Fire Breath</span>
</button>
<button class="k-button k-button-md k-button-rectangle k-button-solid k-button-solid-base k-rounded-md">
  <span role="presentation" class="k-button-icon k-icon">
    <svg viewBox="0 0 24 24">
      <path d="M11.2 10.6C12.2 11.6 13.4 12.1 14.8 12.1L14.9 14.2C13 14.2 11.3 13.5 9.8 12.1L9.1 11.4L6.8 13.8L9 15.9V21.9H7V16.7L5.7 15.5V17.7L1.5 22L.1 20.6L3.7 17L2.5 13.5C2.3 12.9 2.6 12.4 3.1 12L6.4 8.7C6.8 8.2 7.3 8 7.8 8C8.3 8 8.6 8.1 8.9 8.3L11.2 10.6M24 11.9H22V8.5L20.2 7.8L21.1 12.2L22.1 17.4L23 21.8H20.9L19.1 13.8L17 15.8V21.8H15V14.3L17.1 12.3L16.5 9.3C15.9 9.9 15.2 10.5 14.4 10.9C13.5 10.8 12.6 10.4 11.9 9.7C13.5 9.4 14.6 8.6 15.3 7.4L16.3 5.8C16.9 4.8 17.8 4.5 18.9 5L24 7.2V11.9M11.4 4.4C12.5 4.4 13.4 5.3 13.4 6.4C13.4 7.5 12.5 8.4 11.4 8.4C10.3 8.4 9.4 7.5 9.4 6.4C9.4 5.3 10.3 4.4 11.4 4.4M16.5 .3C17.6 .3 18.5 1.2 18.5 2.3C18.5 3.4 17.6 4.3 16.5 4.3C15.4 4.3 14.5 3.4 14.5 2.3C14.5 1.2 15.4 .3 16.5 .3Z" style="fill: currentcolor;"></path>
    </svg>
  </span>
  <span class="k-button-text">Target Weak Spot</span>
</button>
<button class="k-button k-button-md k-button-rectangle k-button-solid k-button-solid-base k-rounded-md">
  <span role="presentation" class="k-button-icon k-icon">
    <span role="img" aria-label="poop">💩</span>
  </span>
  <span class="k-button-text">Bio Weapon</span>
</button>

Unplanned
Last Updated: 25 May 2022 11:16 by ADMIN
Created by: RainMaker
Comments: 1
Type: Feature Request
0

We currently keep an image library for our customers where we allow them to upload images for use in the editor. Our existing implementation uses something called tinymce and MoxieManager. I see that the jQuery implementation has something similar, but it is not included in the react toolset. 

 

Can we get the ImageBrowser / FileBrowser part of the jQuery Kendo ported over to the react version?

 

I have attached an image for example.

Under Review
Last Updated: 25 May 2022 05:09 by ADMIN
Planned
Last Updated: 24 May 2022 14:15 by ADMIN
I've already submitted this to the GitHub issues - https://github.com/telerik/kendo-react/issues/1297

Submitting here as it is an important regression with React 18 breaking all popup animations.
Under Review
Last Updated: 20 May 2022 08:33 by ADMIN

In our unit tests, we sometimes want to be able to use the ByTestId methods of the React Testing Library to find bits of DOM created by a Kendo component.  However, setting a data-testid attribute (or really any data- attribute) on a Kendo component does not always result in the attribute appearing anywhere in the final DOM.

To demonstrate, below is a test suite (also included in the zip) where I tried putting a data-testid attribute on the Kendo components Input, TextArea, Checkbox, Slider, SliderLabel, MultiSelect, and DatePicker, then checked if the attribute appeared in the rendered DOM.  The tests for Input, TextArea, and Checkbox are successful.  The ones for Slider, SliderLabel, MultiSelect, and DatePicker are not.

import { render, screen } from '@testing-library/react';
import { Input, TextArea, Checkbox, Slider, SliderLabel } from '@progress/kendo-react-inputs';
import { MultiSelect } from '@progress/kendo-react-dropdowns';
import { DatePicker } from '@progress/kendo-react-dateinputs';

// SUCCEEDS
describe('Kendo Input', () => {
    it('supports data attributes', () => {
        render(
            <Input data-testid="the-input" />
        );

        const input = screen.queryByTestId('the-input');
        expect(input).toBeTruthy();
    });
});

// SUCCEEDS
describe('Kendo TextArea', () => {
    it('supports data attributes', () => {
        render(
            <TextArea data-testid="the-text-area" />
        );

        const textarea = screen.queryByTestId('the-text-area');
        expect(textarea).toBeTruthy();
    });
});

// SUCCEEDS
describe('Kendo Checkbox', () => {
    it('supports data attributes', () => {
        render(
            <Checkbox label={"Chad"} data-testid="the-checkbox" />
        );

        const checkbox = screen.queryByTestId('the-checkbox');
        expect(checkbox).toBeTruthy();
    });
});

// FAILS
describe('Kendo Slider & SliderLabel', () => {
    it('supports data attributes', () => {
        render(
            <Slider min={1} max={2} data-testid="slider-root">
                <SliderLabel position={1} data-testid="slider-label-1">One Fish</SliderLabel>
                <SliderLabel position={2} data-testid="slider-label-2">Two Fish</SliderLabel>
            </Slider>
        );

        const sliderRoot = screen.queryByTestId('slider-root');
        const sliderLabel1 = screen.queryByTestId('slider-label-1');
        const sliderLabel2 = screen.queryByTestId('slider-label-2');

        // test them all at once so we can know the full scope of our failure/success
        expect({
            sliderRoot,
            sliderLabel1,
            sliderLabel2
        }).toMatchObject({
            sliderRoot:   expect.anything(), // don't be null or undefined
            sliderLabel1: expect.anything(), // don't be null or undefined
            sliderLabel2: expect.anything()  // don't be null or undefined
        });
    });
});

// FAILS
describe('Kendo MultiSelect', () => {
    it('supports data attributes', () => {
        render(
            <MultiSelect data-testid="the-multi-select" />
        );

        const multiselect = screen.queryByTestId('the-multi-select');
        expect(multiselect).toBeTruthy();
    });
});

// FAILS
describe('Kendo DatePicker', () => {
    it('supports data attributes', () => {
        render(
            <DatePicker data-testid="the-date-picker" />
        );

        const datepicker = screen.queryByTestId('the-date-picker');
        expect(datepicker).toBeTruthy();
    });
});
While it is theoretically possible the problem is limited to just Slider, SliderLabel, MultiSelect, and DatePicker, I highly doubt it.
Unplanned
Last Updated: 18 May 2022 08:00 by ADMIN

If you show a Grid with no rows, the Kendo Grid displays a `k-grid-norecords` row. The generated HTML for this is:

<tr class="k-grid-norecords" aria-rowindex="2"><td colspan="5">No records available</td></tr>

If you run Axe accessibility checks (axe-core 4.4.1) against this, it reports:

Impact: critical
Elements must only use allowed ARIA attributes
ARIA attribute is not allowed: aria-rowindex="2"

It seems that according to Axe, this <tr> element should have `role="row"` to make it compliant.

Normal data rows, where there is data, do include `role="row"`. Only the 'no records' row seems to be missing it. Can this role be added?

Unplanned
Last Updated: 17 May 2022 16:59 by ADMIN
Created by: Andrew
Comments: 1
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

Under Review
Last Updated: 17 May 2022 13:08 by Kate

A little thing, but users remember position of UI elements more than anything else. The filter buttons on the grid by default are not in the same place though for all filter types.

It would be preferable if the filter buttons were all on the same side, regardless of the filter type (e.g., some types put it on the left, while others put it on the right). Pictures below for context.

 

 

Won't Fix
Last Updated: 12 May 2022 11:58 by ADMIN
Created by: Joel Parker Henderson
Comments: 12
Type: Bug Report
0
On this page: https://www.telerik.com/kendo-react-ui/getting-started/

The yarn example says...

```sh
yarn create react-app my-app
```

... which is old syntax and should not be used because of bugs.

Solution: update that line to use yarn download-and-execute (dlx) like this:

```sh
yarn dlx create-react-app my-app
```

Unplanned
Last Updated: 12 May 2022 08:29 by ADMIN
Created by: Louise
Comments: 1
Type: Feature Request
0

Currently the MultiSelectTree Component doesn't have Virtualization therefore is unable to provide infinite scrolling.

Please can this be added.

 

Thank you,

Unplanned
Last Updated: 11 May 2022 16:27 by ADMIN
Created by: Rebecca
Comments: 1
Type: Feature Request
1

The footer cell is not accessible. I cant be navigated with the keyboard and isn't read out by the screen reader.  Ideally, we would have all the attributes that the header and content cells have to make this work in the same way.

Unplanned
Last Updated: 11 May 2022 13:48 by ADMIN

The React Dropdown and Multiselect components are difficult to use in a <Form> because they return an object instead of the value that would be part of a form.

Maybe there is already a way to handle it, but the docs for the MultiSelect do not include any way to map the value Object to just the primitive, and the Form docs have no example with a MultiSelect.

In my experience, when loading and saving data to/from an API, they very rarely take objects with an ID and Text properties. They usually expect just the primitive values (IDs) of the selected items. The Angular MultiSelect control has a `valuePrimitive` attribute that can be used to control this behavior. The React version does not seem to support this use case at all, or it is hard to find in the docs if it does exist.

Example code: https://stackblitz.com/edit/react-xroafa?file=app/main.jsx

Essentially, it would have been nice if you could do:

<MultiSelect data={[ { id: 1, text: 'One' }, { id: 2, text: 'Two' }, ]} value={[2]} // just a primitive value, not an object

onChange={(value) => /* value should just be the `id`s not the objects */ } />

Which would enable MultiSelect to be usable in a <Form>. Since the <Field> component does not allow overriding the `value` or `onChange` events, mapping these primitives to object form is frustrating and a bunch of extra code.

In the Angular version this is easily achievable, with an example in the docs: https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/value-binding/#toc-primitive-values-from-object-fields

Won't Fix
Last Updated: 10 May 2022 14:27 by Jeff

Set up a TimePicker with a `min` and `max`. For example

            min={new Date(0, 0, 0, 0, 0)}
            max={new Date(0, 0, 0, 5, 0)}

Click on the text input to focus the 'hours' portion.

Roll the mouse scrollwheel up/down to change the hours.

You can 'scroll' past 5:00 and set the time to anything above the max.

You can also use the keyboard to enter any number outside the min/max.

Is this the expected behavior? Do we always have to add our own validation to check the min/max ourselves?

Completed
Last Updated: 09 May 2022 12:38 by ADMIN

Hello,

Please allow the Form component to submit even if it's not marked as modified internally. I am trying to use the Form within a Stepper workflow, and the Form can have default values based on what they submitted in the previous Step. If they return to the Step with the Form on it, though, and those initial values are not changed while displaying the Form, then the Form internally is not marked as modified, therefor the submit event never fires.

It'd be nice if we could have a boolean to tell the Form if we care to block submission based on modified or not.

Thank you

Under Review
Last Updated: 09 May 2022 10:10 by ADMIN

The feature request:

Kendo react scheduler: in a week/work week view if an event created with start time at 01:00 and ends at 23:00 for example and displayed only working hours:

the event will not visible until we enable all days hours visible:

The issue is described here:

https://www.telerik.com/forums/kendo-react-scheduler-issue-event-is-not-visible-if-start-date-outside-of-working-hours-range

 

Unplanned
Last Updated: 09 May 2022 09:36 by ADMIN

Hi Team,

I am facing one challenge to create a Calendar view with multiple date selection with multiple colors.

Please suggest and share class component references to achieve the same.

Please refer attached video or do let me know if you have any questions.

Thanks.

Unplanned
Last Updated: 08 May 2022 16:19 by ADMIN
Created by: Fabian
Comments: 9
Type: Feature Request
4

Hello

I'm using the menu component version 4.13

I'd like to change the style of the active menu item but could not find any examples. Here's one of my menu items

            <MenuItem text="Location Lookup" cssClass={"nav-item nav-link"} data={{ route: "/locations" }}></MenuItem>

i'm following your example to do the routing

function onSelect(event) {
  history.push(event.item.data.route);
}

I'm using react router dom.

Do you have an example for how to change the css of the active menu item?

Thank you.

Fabian

 

Unplanned
Last Updated: 04 May 2022 08:48 by ADMIN

Hello Support Team,

We are migrating our ASP MVC application to React JS and need your help in scheduler time-line view. In ASP MVC you provided the functionality to render the custom template for Resource Title or we can say for the user name. But we are unable to implement the same functionality in react js, and this is the important module of our application. Our application client strictly say he needs 100% same application as it is in ASP MVC version.

We request you to please add this feature to the Scheduler in the coming updates & this would be useful to the other users also.

Thank You.

Need More Info
Last Updated: 27 Apr 2022 08:30 by ADMIN
Created by: Joel Parker Henderson
Comments: 3
Type: Bug Report
0
## Missing kendo-react-popup

On this page: https://www.telerik.com/kendo-react-ui/getting-started/

On this section: "Add a KendoReact Data Grid"

When I launch the app as usual:

```sh
yarn start
```

Then the browser page includes this error:

```
Compiled with problems:

ERROR in ./.yarn/__virtual__/@progress-kendo-react-data-tools-virtual-df92d36fcf/0/cache/@progress-kendo-react-data-tools-npm-5.2.0-8d098f65a0-5d68752aaa.zip/node_modules/@progress/kendo-react-data-tools/dist/es/columnmenu/ColumnMenuFilterForm.js 19:0-55

Module not found: Error: @progress/kendo-react-data-tools tried to access @progress/kendo-react-buttons (a peer dependency) but it isn't provided by your application; this makes the require call ambiguous and unsound.

Required package: @progress/kendo-react-buttons
Required by: @progress/kendo-react-data-tools@virtual:79c9c696d5f1e6f4dd730946c0d2912611551a498926b146bcbdd9d142588c5f4c2333469b63e7a9a2bdd1f0f1313d0d70b72cc8dbcafcc20e21e6b9790f6068#npm:5.2.0 (via /Users/joel/git/joelparkerhenderson/demo/demo-react-kendo/.yarn/__virtual__/@progress-kendo-react-data-tools-virtual-df92d36fcf/0/cache/@progress-kendo-react-data-tools-npm-5.2.0-8d098f65a0-5d68752aaa.zip/node_modules/@progress/kendo-react-data-tools/dist/es/columnmenu/)
Ancestor breaking the chain: demo-react-kendo@workspace:.



```

The solution that works for me...

Add the package:

```sh
yarn add @progress/kendo-react-popup
````

Edit `src/App.js` and add this line:

```js
import '@progress/kendo-react-popup';
```

Under Review
Last Updated: 26 Apr 2022 08:32 by ADMIN
Created by: James
Comments: 1
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

1 2 3 4 5 6