Q:

From the last conversation through the webinar

jQuery Filter looks cool! What about Kendo React Filter?

Hi,

I created a solution using KendoReact Editor.

The editor is set to enable the creation of tables (EditorTools.InsertTable).

When the property 'defaultEditMode' is set to 'iframe',  the editor inserts a correct table with a width of 100% and visible cell borders.

If I set the 'defaultEditMode' to 'div' and insert a table the table has a width of some pixels and no borders are shown. In other words, the inserted table is not usable.

I need to set the editMode to 'div' because otherwise the editor doesn't adjust its look to the other parts of the page. The font is wrong etc.

How can I get the tables to work in 'div' mode?

 

Kind regards

  Christian 

When using the Editor tools from https://www.telerik.com/kendo-react-ui/components/editor/tools/, the hyperlink option is disabled until I type AND select the typed text in the editor. Because the hyperlink allows for a title and a link, I believe it should not be disabled.

Also, when adding the hyperlink and title, the title does not appear in the editor

For example:
I have an empty editor with no text.

I cannot click the hyperlink option - it is disabled. (Bug 1)

I type 'hey' into the editor and highlight it (select it).

I can now click on the hyperlink option.
I type in 'http://imstilloscar.com' for the Web Address.

I type in 'Oscar' for the title. (It does not matter if I click open in new window or not).

Click Insert.

The title 'Oscar' does not appear in the editor. (Bug 2)

The editor still contains the word 'hey' and links you to 'http://imstilloscar.com' 

Getting started page tuto - App.js should be App.jsx. When you use the latest version of VSCode - js deformates tags - in good old js, there are no tags. Just edit to jsx, and edit npm start command

Problem:

The DateTimePicker does not work in IE11 due to it's failure to fully support the shorthand syntax for flex (https://github.com/philipwalton/flexbugs#flexbug-4). In order for it to work in IE11 flex-basis needs a unit defined and therefore does not support calc() in this scenario.

Potential Fix:

If you break out flex-grow, flex-shrink and flex-basis then calc() can be used for flex-basis.

Hello Kendo React Team,

 

Here are a few bugs to address on the Kendo React Scheduler (3.6.0)...

 

Issue 1: November 3, 2019 Repeated on Week/Month Views

Visit https://www.telerik.com/kendo-react-ui/components/scheduler/views/month/ or https://www.telerik.com/kendo-react-ui/components/scheduler/views/week/, navigate to the first full week in November 2019. You will notice that 11/3 is repeated for Sunday/Monday. I'm wondering if this issue is related to daylight savings time. The calendar does not have a timezone configured (just uses the default UTC and my local timezone is PST).

 

Issue 2: Clicking an empty all day slot does nothing.

The onSlotClick callback should be fired when clicking on an all day event. I currently have to add an event listener using document.querySelectorAll("[data-slot-allday='true']"); to get the right behavior (definitely not ideal).

 

Issue 3: onItemDoubleClick and onSlotDoubleClick do not work on mobile devices.

My current solution to get everything to work on desktop and mobile is to use the onItemClick and onSlotClick and to not integrate useCallback with double clicking.

 

Suggested Improvements:

• The documentation is silent about onItemClick, onSlotClick, onItemDrop, etc. These are essential to extend the behavior of the scheduler. I had to dig through the node modules directory and look through the .ts files to figure out how to use these work.
• The mobile experience is awful. I miss the isMobile prop on the kendo-scheduler-react-wrapper. Whether you reintroduce that prop or add better css for smaller viewports, it would be greatly appreciated.

 

 

<Grid
                    style={{ height: '400px', width: '500px' }}
                    data={products}
                    reorderable
                >
                    <Column field="ProductID" title="ID" width="45px" locked />
                    <Column field="ProductName" title="Name" width="250px" />
                    <Column field="Category.CategoryName" title="CategoryName" />
                    <Column field="UnitPrice" title="Price" width="90px" />
                    <Column field="UnitsInStock" title="In stock" width="90px" />
                    <Column field="UnitsOnOrder" title="On order" width="90px" />
                    <Column field="Discontinued" width="120px" locked={true} />
                    <Column field="QuantityPerUnit" title="Additional details" width="250px" />
                </Grid>

How to select  cells in the KendoReact Grid, Not row selection

Whether the Treelist supports multi column headers ,Nest columns in the columns definition?

 

Like the Grid

https://www.telerik.com/kendo-react-ui/components/grid/columns/headers/

Hello

There was an error calling “ chart.surface.redraw() ” 

 

  onRender = (args,mapValues,stackedOrderBy) => {              
        const chart = args.target.chartInstance;      

        const valueAxis = chart.findAxisByName("valueAxis");
        const categoryAxis = chart.findAxisByName("categoryAxis");

        if (!chart) return;        

           let x= 1;
            if( stackedOrderBy!="Ascending")
                x=-1;

            let axis = categoryAxis.options;

            axis.categories = axis.categories.sort(function (a, b) {
                if (mapValues[a] < mapValues[b]) {
                return -1*x;
                }
                if (mapValues[a] > mapValues[b]) {
                return 1*x;
                }

                return 0;
            });


            chart.surface.redraw();

                           

Add render prop for the SplitButton.

This will allow changing the main button and also the button that opens the DropDownList.

When can I release the Spreadsheet in Kendo UI for React,not Wrapper

In the case of multiple columns headers, the column width of the KendoReact  TreeList  is invalid

 

 

Hi,

  we have a feature request as per description, value isn't changed when manually entering numbers in the field, it only changes when selecting a presented date. When manually entering date, value remains null so reset is actually changing null to null, not the entered value to null. Your colleague mentioned that the feature of exposing mask to be controlled would make it possible to clear the mask.
Please refer to this github issue for more detailed information, containing stackblitz example and gifs of an user case, as it was an ongoing discussion.
Please implement an option to properly reset partially entered dates.

https://github.com/telerik/kendo-react/issues/368

Hello,

I would like to make a general feedback after visiting KendoReact website for the first time. I'll expose a lot of wrongs, but keep in mind my goal is to give you insight for improvement, not to bash.

Context : I'm currently curating React UI frameworks for a new long term project within my company. I am a senior software architect seeking some general feelings about a the product (reliability and performance for example) but also very specific : easy layout management and very accomplished components such as Select.

 

Navigation

The documentation website ( https://www.telerik.com/kendo-react-ui/components ) is extraordinarily slow, this is very inconvenient when you're browsing to discover what the kit has to offer.

Accessing sub-section actually change the page, requiring a full reload, which again, is so slow I don't want to click on it. Seriously.
Take https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/ for example, to discover all the features, I have to trigger several page load. This is not gonna happen ; I'll leave this. I did leave this. It's the most wanted component for me in my research. I left.

Content

The documentation pages does not expose the available properties of the component, I have to visit every sublink and read every source to find out. This is not ok either. I'm looking for a framework to save time, and this is starting to seriously leech my time.

The source code of the given examples are real. I can copy paste into an empty file, and it will work. This is the good side of the coin. The bad side of the coin is it takes me an, abnormal amount of time to see how the component is structured. That's the only thing that interest me on the first look. If I want deeper understanding and knowledge, yes please provide with a link to stackblitz or whatever so I can play with it, but first I want to see what it looks like.

You use unconventional naming. Look around in the js world, how people call stuff :

A form select is a select, not a dropdown. Within your dropdown menu item you have multi-select but you have to find it first !
A grid is a css grid, not a DataTable.
You have in your menu : Forms, Dropdown Select, Inputs, Upload. All of that is Form. How am I supposed to know if I've seen all form features if everything is spread around ? You also have Chart, Gauge and Drawing.
PanelBar ? Never heard of it. Accordion ? That's my boy.

You also present features that don't belong here, like Excel Export or PDF Processing whereas some basic information are missing such as "does it work well with TypeScript ?" : https://www.telerik.com/kendo-react-ui/knowledge-base/?search=typescript .

 

Features

You have a lot of components, some are very accomplished (i.e. TreeList) and others are quite average, such as Select. Check this competitor component : https://blueprintjs.com/docs/#select. Real world usages. Maybe you can achieve the very same thing with KendoReact, but even if true, I feel you don't understand what I need.

Too few UI framework care about layouts, KendoReact unfortunately is no exception. Layout is not just a box next to another. Layout is ordering content and filtering content depending on the device, it's putting some text over an image, it's making a row of three blocks and make sure they have the same height regardless of their content, it's having a page section that is exactly the size of the visitor's screen ; UIKit is very good at this ( https://getuikit.com/docs/height ). But it's also Special States : empty state ( https://material.io/design/communication/empty-states.html#content ) or result state ( https://ant.design/components/result/ )

 

My overall feeling is the product is disconnected from the environment and dev culture I'm working in.

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...

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

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.

 

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.

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