Pending Review
Last Updated: 08 Apr 2020 11:42 by Sandeep

Hi,

I need to implement two functionality for treelist control

1. Freezing of column and rows

2. Drag and Drop column and rows

Under Review
Last Updated: 06 Apr 2020 10:24 by ADMIN

Hi, 

Is it possible to define where the dropdown container (i.e. k-list-container) is appended in the DOM?

By default it is appended at the bottom of the body but I'd like to define where it is appended.

The reason why I need to do this is because I'm using the KendoReact components in a WebComponent (custom element) which is hosted in a shadow-dom for isolation.
The styles are also only loaded within the shadow-dom and are therfore not applied to content on the outside. 

The issue is that the kendo dropdown container is appended outside of the shadow-dom and the scope of the kendo styles.
The dropdownlist component is styled correctly but the dropdown part that is appended to body is not styled.

I've solved this with other components (i.e. modal window) by defining where I want the the container appended with the createPortal method in React.

ReactDOM.createPortal(
        <React.Fragment>
          <ModalOverlay />
          <ModalWrapper
            aria-modal
            aria-hidden
            tabIndex={-1}
            role="dialog"
            data-testid="modal-wrapper"
          >
            <ModalMain>
              <ModalContent>
                <ModalHeader>
                  <ModalHeaderTitle>{title}</ModalHeaderTitle>
                </ModalHeader>
                <ModalBody>{content}</ModalBody>
              </ModalContent>
            </ModalMain>
          </ModalWrapper>
        </React.Fragment>,
        document.getElementsByTagName('custom-element').length > 0
          ? document.getElementsByTagName('custom-element')[0].shadowRoot

          : document.body

)

 

Under Review
Last Updated: 06 Apr 2020 09:12 by ADMIN

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.


Under Review
Last Updated: 03 Apr 2020 08:04 by ADMIN

I'm trying out the KendoReact Conversational UI and there are two things that I would expect to exist in the API that I can't seem to find.

 

1. Unread indicator - I'd like to mark where the last unread message was but there doesn't seem to be a way to do that with the API.

2. Load more messages - I'd like to be able to only load a certain number of messages from the chat history on initial load and then load more messages as the user scrolls (or possibly have a "load more" button) but there doesn't seem to be any callback for that.

 

I already have ideas to work around both of these with the "messageTemplate" but I wanted to check if I might be missing something obvious first.

 

-- Erik Sandberg

Under Review
Last Updated: 02 Apr 2020 10:26 by ADMIN
Created by: Vlado
Comments: 11
Type: Bug Report
0

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);
Under Review
Last Updated: 01 Apr 2020 05:04 by ADMIN
Created by: Derek
Comments: 1
Type: Feature Request
1
I'm wondering if you have Kendo ReactJS 2D barcode component on the roadmap?  I see that there are wrappers, but would prefer a pure ReactJS solution.  I'd like to add my vote for addition of this component to the ReactJS suite.  Thanks.
Under Review
Last Updated: 31 Mar 2020 10:14 by ADMIN
Created by: Arvind
Comments: 3
Type: Feature Request
1

Is the Chunk upload for file is not there for react. I Could find the chunk upload option for Jquery and Angular but not for react.

Is it not available yet/ when can we expect that?

Unplanned
Last Updated: 30 Mar 2020 06:19 by ADMIN
Currently the GridColumn Component only supports width property.  It should also support minWidth and maxWidth properties for better responsive design.  https://www.telerik.com/kendo-react-ui/components/grid/api/GridColumnProps/
Completed
Last Updated: 26 Mar 2020 15:16 by ADMIN
Created by: Kirill
Comments: 6
Type: Feature Request
1

Existing implementation of Scheduler component has a very limited customization support. To cover some real use-cases we need:

  1. Conditionally hide Scheduler Header and Footer. This is possible with CSS, but still makes sense to have props for that.
  2. Customize tooltip content when hovering on the event. Currently tooltip is a one line text, but adding support of a larger popups on hover would allow to show additional info associated with that event. Please consider adding a prop to pass custom component for tooltip/popup rendering (similar to how Custom cells work in Kendo Grid)
  3. Customize event component. Is there a way to have multiline text in the event component? Currently it is way to limited to show custom content e.g. adding custom icons is impossible.
  4. All events in the same group have a same color when displaying. Please consider adding individual color support for each event. This would help to support error states for events.
  5. Custom onDelete/onDoubleClick handlers. We would like to have custom implementation of Delete confirmation and Edit form.

Please advise on how to overcome those limitations as a short term solution and consider adding more Scheduler customization abilities to your Roadmap.

Example of highly configurable Scheduler/Timeline component:  https://js.devexpress.com/Demos/WidgetsGallery/Demo/Scheduler/Timelines/React/Light/

Under Review
Last Updated: 25 Mar 2020 10:43 by ADMIN
It'd be nice if you could associate an icon with an Input component. For example, when making a search input - specify that you'd like the search icon to be before or after it. Inputs have their own unique set of padding, so it'd be nice if this could be specified right there with the component somehow.
Under Review
Last Updated: 23 Mar 2020 14:44 by ADMIN
Created by: prabu
Comments: 3
Type: Feature Request
1
 I have explore and created the kendo react  toolbar by referring the link https://stackblitz.com/run/?file=app%2Fmain.jsx  and i tried to resize the browser and the toolbar moves to multiple rows.But i expected the toolbar height is fixed and and it will be always single row like the syncfusion toolbar (https://ej2.syncfusion.com/react/documentation/toolbar/responsive-mode/)
Under Review
Last Updated: 12 Mar 2020 11:57 by ADMIN
Created by: SIGMA
Comments: 3
Type: Feature Request
1
Hello! Can you please add functionality to the choice of milliseconds in the DateTimePicker component?
Unplanned
Last Updated: 02 Mar 2020 12:49 by ADMIN
Created by: Rogelio
Comments: 3
Type: Feature Request
0

Currently, ComboBox generates a UUID and uses it as the input tag's id property (e.g. <input id="2e048165-6468-46c0-ba39-c47b12c7fcf2" />).

 

As a developer, I want to be able to set my own custom id so that I can set my own label tag as a sibling to the ComboBox component.

 

For example, I would like this to be possible:

<label for="hello">Hello World</label>
<ComboBox id="hello" />

 

There is a label prop offered on ComboBox which works fine but it does not let me specify the label tag with custom class names, styling, etc.

 

This new id prop should be optional and ComboBox can keep using the same technique it does when no id prop is passed to it.

 

Unplanned
Last Updated: 27 Feb 2020 09:41 by ADMIN
Add floating labels on the DatePicker and DateTimePicker.
Under Review
Last Updated: 27 Feb 2020 09:23 by ADMIN
Created by: Jon
Comments: 0
Type: Feature Request
2

Walkthrough component.

The component will allow the developer the create a step by step guide over the page.

This will highlight a collection of elements in a set order on the page with a tooltip showing the newly introduced feature.

Under Review
Last Updated: 27 Feb 2020 06:16 by ADMIN

When using the auto for tooltip position, I would like the option to prioritize the order.

[right, left, bottom, top] for example would mean that it would check if that area is available to display a tooltip, and if not, it'll move on to the next one in the list.

 

Is this an option? How will I go about creating this functionality if not?

Completed
Last Updated: 25 Feb 2020 11:44 by ADMIN
Created by: Justin
Comments: 5
Type: Feature Request
7

It would be great to have a TreeList component similar in appearance and behavior to the jQuery TreeList (https://demos.telerik.com/kendo-ui/treelist/index), but with the kind of support for virtual scrolling built into the native KendoReact Grid component.

A React wrapper exists for the jQuery TreeList, but it still doesn't play nicely with React, and in any case only supports paging for displaying large data sets, which is inherently not intuitive for displaying tree structures where parent / child hierarchies might span multiple pages.

My sense is this native component would basically be the Grid, but with support for hierarchical data, including drag-and-drop re-ordering of parent / child relationships.

Thanks for considering this feature.

Under Review
Last Updated: 25 Feb 2020 11:33 by ADMIN

I have a need for the 'Drop files here to upload' text to always be visible in the drop area of the KendoReact Upload component. Example of what I am talking about is in attached images.

 

Declined
Last Updated: 25 Feb 2020 09:19 by ADMIN

When using the tab strip, it'd be nice if there were an event that fired before the tab changed so that we could abort a tab chat. For example, if a tab has some input fields that allow a user to change some setting but they change the tab without hitting save or something. It'd be nice if I could pop up a modal and ask them to save before changing tab.

The function could just return true or false to allow the tab change, etc.

Under Review
Last Updated: 24 Feb 2020 13:00 by ADMIN
Created by: Luuk
Comments: 1
Type: Feature Request
1

Hey,

It would be great if the 'allDaySlot' property on the Scheduler component could be added to the Reactjs version. We would like to hide the all day slot on our scheduler but currently this isn't possible.

Kind regards,

1 2 3 4 5 6