I have need for a Captcha component for a public-facing form. Most of the Telerik products include a captcha component, but not KendoReact.

Can we expect this to be added at some point?

Hello,

I am using React Multiselect in my project. I need every item in the multiselect component selectable with checkboxes and multiselect itself filterable. It would be very nice if you add this features to Multiselect component as built in. There is a workaround which I share links below for this but we need to do all this stuff manually.

1. Checkboxes:

• https://stackblitz.com/edit/kendo-react-multiselect-checkboxes-moavl9?file=app%2Fmain.jsx

2. Filterable

• https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/filtering/#toc-basic-configuration

Thanks

Despite having a similar intention (typing and selecting), the components MultiSelect and ComboBox look and behave quite differently:

• The ComboBox has a button on the right side and only opens when this button is clicked or when the user types in the input field.
• The MultiSelect has no such button but opens when clicking inside the input field.

It would be great if the MultiSelect component also has a button on the right and only opens when the button is clicked or when the user starts typing in the input field.

In Kendo angular you can tell the tooltips to flip when they collide with the edge of the viewport:

https://stackblitz.com/edit/angular-gaezr2?file=app/app.component.ts

A problem with angular is it can't detect a collision in both directions. In the above example, the top tooltip only flips downwards but not to the right.

As for Kendo React there is less control. It seems to always want to "fit" with no option to flip when a collision happens. I have prepared 3 examples below. for position left, right and default:

https://stackblitz.com/edit/react-vfdvtk?file=app/main.jsx

Steps:

1. Create web component with shadow-root.

2. Attach all.css styles behide shadow root.

3. Add compoent with icon from WebComponentIcon font.

Result:

Icon are not displayed properly.

UPDATE: This is live code I prepared for you: https://stackblitz.com/edit/react-ts-dhhsaz?file=index.tsx

I get error:

 Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

But error appears to be inside KendoDrawer component. I can't figure out what is wrong. This is my component:

import React, { useState } from 'react';
import { withRouter, useLocation, useHistory } from 'react-router-dom';

import { Drawer, DrawerContent } from '@progress/kendo-react-layout';
import { Button } from '@progress/kendo-react-buttons';



export const SidebarDrawer = (props:any) => {

    const items = [
        { text: 'Povezivanje', icon: 'k-i-inbox', selected: true, route: '/povezivanje' },
        { separator: true },
        { text: 'Notifications', icon: 'k-i-bell', route: '/notifications' },
        { text: 'Calendar', icon: 'k-i-calendar', route: '/calendar' },
        { separator: true },
        { text: 'Attachments', icon: 'k-i-hyperlink-email', route: '/attachments' },
        { text: 'Favourites', icon: 'k-i-star-outline', route: '/favourites' }
    ];

    const [expanded, setExpanded] = React.useState(true);
    const [position, setPosition] = React.useState(true);
    const [selectedId, setSelectedId] = React.useState(items.findIndex(x => x.selected === true));

    let positionMode = position ? 'start' : 'end';

    const handleSelect = (ev:any) => {
        setSelectedId(ev.itemIndex);
        setExpanded(false);
    };

    const handleClick = () => { setExpanded(prevState => !prevState); };

    const handleChange = () => { setPosition(prevState => !prevState); };

    const drawerProps = {
        expanded: expanded,
        position: positionMode,
        mode: 'push',
        items: items.map(
            (item, index) => ({ ...item, selected: index === selectedId })),

        onSelect: handleSelect,
    }

    return (
        <Drawer {...drawerProps}>
            <DrawerContent>
                {props.children}
            </DrawerContent>
        </Drawer >
    );

};

export default withRouter(SidebarDrawer);

And this is how I use it inside App component:

import React, { useState } from 'react';
import { hot } from 'react-hot-loader';
import { Button } from '@progress/kendo-react-buttons'
import { Grid, GridColumn, GridDetailRow, GridToolbar } from '@progress/kendo-react-grid';
import '@progress/kendo-theme-bootstrap/dist/all.css';

import 'bootstrap/dist/css/bootstrap.min.css';
import { Drawer, DrawerContent } from '@progress/kendo-react-layout';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import urlConstants from 'ClientApp/constants/urlConstants'
import { Connecting } from '../containers/connecting/Connecting';
import SidebarDrawer from 'ClientApp/components/SidebarDrawer/SidebarDrawer';

export const App: React.FC = () => {


    return (
        <React.Fragment>
            <Router>
                <SidebarDrawer>
                    <Switch>
                        <Route exact={true} path="/" component={Connecting} />

                    </Switch>
                </SidebarDrawer>
            </Router>
        </React.Fragment>
            )
}

export default hot(module)(App);

Hi, 

I'm working on a grid which has an action cell with buttons, which of course i dont want to export, but when i try to pass a custom column configuration to the export it fallbacks to the grid's one.

I made further investigation on the kendo-react-private repository and i found out that effectively there's a preference for the grid columns rather than custom

more precisely on kendo-react-private>packages>excel>src>ExcelExport.tsx (line 201~206)

const columns = this.extractColumns(
            gridColumns ||
            externalColumns ||
            this.props.columns ||
            React.Children.toArray(children)
        );

this is the piece of code i was talking about.

as you can see if gridColumns has a value is preferred rather than externalColumns

it would be nice to have a property onto the grid column definition stating if that column should be exported or not (best case)

or just preferring externalColumns to gridColumns (base case)

Hi

Would it be possible to add an option/prop to the KendoReact spreadsheet component to make the whole workbook or specific sheets read-only, instead of specifying cell ranges?

This would make it easier when users need to view a file/spreadsheet without editing it.

Thanks

My team is using KendoReact Gantt to build a web app for manage/planning task in Scrum

It is nice to have feature which display and customizable the current time marker on Gantt.

Integrated tooltip to react data grid, but when I drag & drop column header to group it by column, It displays the tooltip text instead of column field title

Dear Telerik Support Team,

Our development team relies on Telerik Kendo DevCraft Ultimate, specifically the Kendo React components, for our projects. We have a suggestion that would greatly improve our developer experience.

When using MUI components, we appreciated the seamless integration with VSCode. Hovering over an MUI component name would display a tooltip with a brief description and a clickable link to the MUI API documentation. This feature allowed us to quickly access examples and API details.

MUI with VSCode

Unfortunately, this feature is absent in Kendo React. We lack a tooltip popup with a direct link to the online Kendo React API documentation. Consequently, it has become challenging for our developers to find examples and access component documentation without manual searches.

KendoReact with VSCode

We kindly request an enhanced API integration in Kendo React. Adding a tooltip popup with a brief description and clickable link to the online Kendo React API documentation would greatly streamline our workflow, saving us time and improving productivity.