Add parseFormats option to the KendoReact DateInputs (DateInput, DatePicker, DateTimePicker etc).

The option is expected to work as the parseFormats one available in Kendo UI:

https://docs.telerik.com/kendo-ui/api/javascript/ui/datepicker/configuration/parseformats

Request:

- provide a boolean property "virtualScrolling" on component GridColumnMenuCheckboxFilter which allows rendering a large list of filter options without delay

Discussion:

- https://www.telerik.com/forums/gridcolumnmenucheckboxfilter-virtual-scrolling

Use case:

- there are a lot of options to filter already in memory

- the filter dropdown has to open quickly (it opens slowly now, because there are so many options)

- after opening, the user sees a huge list (i.e. a long scrollbar)

- so he starts making the list of options smaller using the search input

Here's a screenshot with 100 options. 

Alternatives:

From a developer point of view I think a scrollable filter is the most convenient way to handle the problem.

An alternative would be to provide a handler whenever the user selects a combobox in the GridColumnMenuCheckboxFilter. Then we could cut the number of options after a threshold and an option / combobox labelled "show more". When this is clicked, the filter options are re-rendered, the lists gets longer - and the user will get annoyed and will making the list of options smaller using the search input.

An other alternative would be to have a possiblity to force the user right away to use the search box. Instead of showing the list of checkboxes a text would be shown: "1258 options. Please refine your search input." But this would be a more invasive option.

Create a custom view with only specific dates shown in the Scheduler.

For example, the Sheculder will only show the dates 02/02/2020, 02/10/2020 and 02/20/2020.

Hello,

I have a query regarding multiple cell paste and transpose paste

1. Multiple cell pastes:

Mouse selection of multiple cells after selecting, the contents present in the cells should get copied and while pasting it should get paste in multiple cells.
e.g i) column no 3 and 4 having value 200 and 56700 after selection of this  value gets copied while pasting into column no 3 and 4,250 and 3250 replace by copied value
      ii) column no 3 and 4 having value 200 and 56700 and next row value i,e 250and 3250 after selection of this  value gets copied while pasting into column no 5, so the           values 2400,98250,6750,34500 replace by copied values

2.Transpose Paste:

Mouse selection of two or more cells, then the contents present in that cells should get copied then after clicking on transpose paste the copied cell content get pasted vertically in multiple cells.

e.g column no 3 and 4 having value 200 and 56700 after selection of this  value gets copied while pasting into column no 3,250 and 300 replace by copied value

all cells should be editable

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

For example, the user goes to an URL where the query string is created initially with the toDataSourceRequestString method, we need a method that will parse that query string to the Grid data state object, so it can be applied to the Grid when the user returns to that URL.

Is it possible to add a target line to the ArcGauge?   I have attached a picture of what I would like to accomplish using the ArcGauge component.

Hello!

I use DateRangePicker to filter data in some period in the past.
Now, when I open DateRangePicker, it renders a calendar with current and future month. Therefore our users always have to click on the "left arrow" to select previous month.

Is it possible to open DateRangePicker with calendar, that renders previous and current month? I tried propfocusedDate, but it is not suitable in this case, because the component is "controlled" (it always has some value, by default it is current date).

It would be great, if you will add some settings to do this.

We use "@progress/kendo-react-dateinputs": "3.10.1"

How we use it:

<DateRange
  onChange={handleDateChange}
  value={selectedDates}
/>

Actual result: April and May month in view.

Expected result: March and April month in view. 

Thanks for your attention. I’m looking forward to your reply. 

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

Hi,

I'm seeing a bug in TreeList which seems to be related to how locked column positions are being set.  The issue I'm seeing is when I scroll to the right the columns either overlap of have a gap between them.  See image below.

I also created a demo that demonstrates this issue: https://stackblitz.com/edit/react-lwp4ua?file=app%2Fmain.jsx

Seeing this issue in:

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

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