Hi,

I need to implement two functionality for treelist control

1. Freezing of column and rows

2. Drag and Drop column and rows

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.

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

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.

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.

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);

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?

Hello! Can you please add functionality to the choice of milliseconds in the DateTimePicker component?

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.

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.

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.

 

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,

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?

Hi,

I'm using the tabstrip control for a complex form for the user to fill out. I am trying to find a way to preload all contents of each tab in the tabstrip to ensure all the controls are rendered. This is required for my validations to work correctly.

I did not see any property on the Tab or TabStrip control to achieve this. Am I missing something?

Regards,

Ruud

Add the ability to customize the Filter component elements.

For example:

1) Customize the fields' DropDownList.

2) Customize the Add expression button. It could be used to open a Dialog with a list of expressions.

Create the KendoReact Media Player component.

Similar to the Kendo UI for jQuery component:

https://demos.telerik.com/kendo-ui/mediaplayer/index

We like to have an option on the component to overlap: true/false where the user can add appointments when the appointment overlaps with a previous, the user will see a message warning him of conflict data and time when he tries to Save on Add/Edit

I would like to request a new Kendo React Grid column editing option so that users can navigate editable columns using the keyboard. This feature should be similar to "navigatable" option from Kendo jQuery grid example - https://demos.telerik.com/kendo-ui/grid/editing

Thanks.

Currently, the onLegendItemHover can be used to detect mouseover event on a legend item.

Suggest adding an event mirroring the mouseout event.

 

Kendo UI for jQuery implements this

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/events/legenditemleave

When adding an item (or editing an item) - it would be great to have the ability to customise the UI - for the dialog box.

This is for a component being included in a Dynamics365 view - using the PowerApps Component Framework.

Even if we had a 'double click' event - and then I could re-direct to the specific page/entity for editing.

For now - the 'default' dialog for edit doesn't work for what we need...