Unplanned
Last Updated: 15 Nov 2022 11:33 by ADMIN
Unplanned
Last Updated: 02 Nov 2022 08:19 by ADMIN
Created by: Stéphane
Comments: 3
Category: KendoReact
Type: Feature Request
1

Hello,

There is a very serious bug in the Kendo React date picker component: the month of January is simply not displayed

The issue can be witnessed on your demo page:

 

https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/

Just open the picker and you'll see January is not there

Unplanned
Last Updated: 28 Oct 2022 07:30 by ADMIN
Created by: Rebecca
Comments: 7
Category: KendoReact
Type: Feature Request
0

Hello,

 

we are using kendo-react-pdf and I am trying to see if it can generate tagged PDFs to make it accessible.  Or can you tell me if there is another kendo pdf component that is capabable of creating these tags?

 

thanks so much,

 

Rebecca

Declined
Last Updated: 25 Oct 2022 13:01 by ADMIN
Created by: Grant
Comments: 4
Category: KendoReact
Type: Bug Report
0

Hi Team, 

If you take a look at my demo, I have 2 scheduler events, and I've created a custom SchedulerItem that renders the background of one of them to be blue.

When dragging the items around, the dragItem mains the same color with a bit of opacity, cool.

When resizing, the orange (?) one works great, this is the default color theme. However when I resize the blue one, while resizing, the resizeItem is an opaque blue, but the SchedulerItem underneath reverts back to the original default color scheme thereby mixing the colors.

Please advise.

Thanks,
Grant

Unplanned
Last Updated: 24 Oct 2022 16:30 by ADMIN
Created by: Pankaj
Comments: 1
Category: KendoReact
Type: Feature Request
0

I want the kendo tooltip should show on trend line points and when I move from that point it should not visible. it is visible when I am in the chart area and it hides when I leave the chart area, but I want it should hide when I leave the line point.

Unplanned
Last Updated: 24 Oct 2022 09:24 by ADMIN

The KendoReact `Upload` component displays a "file validation message" when an upload/save attempt fails, as can be seen in the following screenshot.

This message is provided by the `getFileValidationMessage()` method of the `UploadListSingleItem` class and is triggered when the passed parameter, `isUploadFailed` is `true`.

`isUploadFailed` is determined by the method `getFileStatus()` provided by the local-to-the-Upload-component utils file. This method is returning `isUploadFailed` as true only when the compared file status is set to `UploadFileStatus.UploadFailed`.

This is wonderful when uploading/saving - and it's great to show the user that something failed during the attempted upload/save.

I request similar functionality when performing file removal so we could similarly alert the user that the attempted removal of the file failed. Something similar to the below:

Unplanned
Last Updated: 24 Oct 2022 06:59 by ADMIN
Created by: kevin
Comments: 1
Category: KendoReact
Type: Feature Request
1

1) Drag a window to a tabstrip and drop the window on the tab area.
2) The window should dock into the tabstrip as extra tab.

 

Unplanned
Last Updated: 21 Oct 2022 13:44 by ADMIN
Created by: Grant
Comments: 1
Category: KendoReact
Type: Feature Request
6

Hi Team, 

This feature request follows on from my Forum post (https://www.telerik.com/forums/scheduler-support-to-multiple-slot-selection). 

It would be great if we had more control over slot selection, like:
 - Turn off selection;
 - Select multiple slots;
 - Being able to Access the selected slots to use as start and end date/time in EditSlot.

Kind Regards,
Grant

Unplanned
Last Updated: 20 Oct 2022 13:41 by ADMIN
Created by: Daniel
Comments: 1
Category: KendoReact
Type: Feature Request
0

Add a disabled property to ListBox and ListboxToolbar.

Listbox

  • onItemClick should be disabled.
  • onHover should be turned off.

ListBoxToolbar

  • All tool-buttons should be disabled.
  • onToolClick should be disabled.
Unplanned
Last Updated: 13 Oct 2022 08:57 by ADMIN
Created by: Rebecca
Comments: 1
Category: KendoReact
Type: Feature Request
0

It would be nice if ListView could have the option of actually being a list (ul, ol or dl) element.  In many cases, I believe this would be more semantically correct and it would help screen readers understand more about the content. My suggestion would to make this configurable if possible. I've seen some libraries allow you to pass in the element type so you can override / change the markup and I think this would be nice to have here (and possibly other places).

 

 

 

 

Unplanned
Last Updated: 04 Oct 2022 08:32 by ADMIN
Created by: Abhinav Mishra
Comments: 1
Category: KendoReact
Type: Feature Request
4

Hi Team,

We need a break (<br>) tag on pressing enter key instead of paragraph tag in React Editor. Currently break tag comes on pressing Shift + Enter keys. We want a mechanics to override default functionality of enter from paragraph to break tag.

Regards, 

Abhinav

Unplanned
Last Updated: 30 Sep 2022 06:35 by ADMIN
Created by: Oleksandr
Comments: 1
Category: KendoReact
Type: Feature Request
0

Hi,

I would like to request a feature for the hovering to show tooltip behaviour in Kendo React Charts.

Currently, the tooltip on hover behavior for most or almost all Kendo React Charts is that it shows the tooltip only if you hover directly on a point or bar. This means that upon hovering on tiny data representation like dots or bars will be very difficult for the user to show a tooltip for.

 

For example the following sandboxes:

Bar graph with small and large data: https://stackblitz.com/edit/react-xtmkdz?file=app%2Fmain.jsx

Line graph with small data dots and large data dots:  https://stackblitz.com/edit/react-wg75ag?file=app%2Fmain.jsx

In these sandboxes, hovering over the smallest bar is very difficult and is also the same for the line graph for tiny "marker" sizes.

 

I am requesting a feature where Kendo React Chart tooltip can:

  • Hovering anywhere in chart plot area will show a tooltip, not only on point.
  • Tooltip shown will the the nearest data to the point. Ie: on line graph would be closest point. On Bar graph will be nearest bar vertically.

 

I have seen this feature in other popular React Chart libraries like Recharts https://recharts.org/en-US

Bar chart:
https://recharts.org/en-US/examples/StackedBarChart

In this example, hovering anywhere inside that grey box area with mouse will show tooltip for that Page A:

For line charts in Recharts: https://recharts.org/en-US/examples/SimpleLineChart

 

Hovering at the drawn mouse location in this chart shows tooltip for the point below.

 

I am hoping Kendo React in the future supports this feature as the current implementation of the tooltip is very rigid and clunky.

 

 

Unplanned
Last Updated: 21 Sep 2022 10:59 by ADMIN
Created by: Ville
Comments: 2
Category: KendoReact
Type: Feature Request
13
Add an option to customize the filter input of the dropdowns, e.g. ability to include buttons in the search field, such as a clear field button.
Unplanned
Last Updated: 19 Sep 2022 16:39 by ADMIN
Created by: Marcu
Comments: 1
Category: KendoReact
Type: Bug Report
0

When I press on a day from the past the DatePicker automatically scrolls to the next/previous year. Please check the attached video. 

Is there any workaround for this issue ?

Unplanned
Last Updated: 09 Sep 2022 09:07 by ADMIN
Created by: Daniel
Comments: 1
Category: KendoReact
Type: Feature Request
0

Data-attribute is missing on a NumericTextbox. Add it in a similar way as for example TextInput and Checkbox.


import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  NumericTextBox,
  Checkbox,
  TextBox,
} from '@progress/kendo-react-inputs';

const App = () => {
  return (
    <div>
      <label>
        <TextBox data-test="5" />
      </label>
      <br />
      <label>
        <NumericTextBox data-test="5" />
      </label>
      <br />
      <label>
        <Checkbox data-test="5" />
      </label>
    </div>
  );
};

ReactDOM.render(<App />, document.querySelector('my-app'));

Unplanned
Last Updated: 09 Sep 2022 08:18 by ADMIN

Hi Team,

 

While browsing i came across a feature called social control+login+singup in 1 place. Does Kendo react has anything like below

 

import React, { useState } from 'react'
import { FloatingLabel, Form, FormControl, FormGroup, InputGroup } from 'react-bootstrap'
import { LinkContainer } from 'react-router-bootstrap';
import { Redirect, useHistory } from 'react-router';
import SignUp from './Signup';
import { SessionService } from "./../../services/Session.service";
import { GoogleLogin } from 'react-google-login';
import AppleLogin from 'react-apple-login';
import { GoogleLoginButton, AppleLoginButton } from 'react-social-login-buttons';
// Singleton for all Service / Classes
export const Injector = {
    session: new SessionService()
}
const onSuccess = (res) => {
    console.log('success:', res);
};
const onFailure = (err) => {
    console.log('failed:', err);
};
function Login({ state, setState }: any) {
    const { session } = state;
    const navigation = useHistory();
    const [globalState, setGlobalState] = useState(Injector);
    const [login, setLogin] = useState({
        emailId: '',
        password: ''
    });
    const updateLogin = (key, val) => {
        setLogin({ ...login, [key]: val })
    }
    const doLogin = async () => {
        if (login.emailId && login.password) {
            try {
                const user = await session.postLogin(login);
                session.user = user;
                setState({ ...state, session });
                const loginRedirect = sessionStorage.getItem(`redirect_after_login`);
                if (loginRedirect) {
                    sessionStorage.removeItem(`redirect_after_login`);
                    navigation.push(loginRedirect);
                }
                else navigation.push('/');
            } catch (e) {
                console.log(e);
                alert('Login Failed. Please try again');
            }
        } else alert('Please enter login details');
    }
    return (
        <>
            {session?.user && <Redirect to="/" />}
            <div className="mt-md-5">
                <div className="row">
                    <div className="col-md-7 ">
                        <h4 className="text-center">
                            {/* Login with Social  */} SignUp
                        </h4>
                        <br/>
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Converse about Stocks,Finance,Topics and get answers for your Finance Questions</p>
                        <SignUp state={globalState} setState={setGlobalState} />
                    </div>
                    <div className="col-md-5 border-md-start">
                        <h4 className="text-center">
                            Login
                        </h4>
                        <div className="m-5">
                            <FormGroup className="mb-3">
                                <FloatingLabel controlId="login-email" label="Email" className="mb-3">
                                    <Form.Control type="text" placeholder="Email" required
                                        onChange={(event) => updateLogin('emailId', event.target.value)}
                                    />
                                </FloatingLabel>
                            </FormGroup>
                            <FormGroup className="mb-3">
                                <FloatingLabel controlId="password" label="Password" className="mb-3">
                                    <Form.Control type="password" placeholder="Password" required
                                        onChange={(event) => updateLogin('password', event.target.value)}
                                    />
                                </FloatingLabel>
                            </FormGroup>
                        </div>
                        <div className="text-center">
                            <button className="btn btn-outline-primary" onClick={() => doLogin()}>
                                Login
                            </button>
                            </div>
                            <br />
                        <div className="row">
<p className="col-sm-5 offset-md-1">
                            <GoogleLogin
                                clientId={"254675741531-om2q76vi5b4llcnqif7btlf7hehh7o71.apps.googleusercontent.com"}
                                buttonText="Sign in with Google"
                                render={renderProps => (
                                    <GoogleLoginButton onClick={renderProps.onClick}>Google Signin</GoogleLoginButton>
                                )}
                                onSuccess={onSuccess}
                                onFailure={onFailure}
                                cookiePolicy={'single_host_origin'}
                                isSignedIn={true}
                            />
                            </p>
                            <p className="col-sm-5 offset-md-1">
                            {/* <AppleLogin clientId="com.react.apple.login" redirectURI="https://redirectUrl.com" /> */}
                            <AppleLogin
                                clientId="YOUR_CLIENT_ID"
                                redirectURI="YOUR_REDIRECT_URL"
                                render={renderProps => (
                                    <AppleLoginButton onClick={renderProps.onClick}>Apple Signin</AppleLoginButton>
                                )}
                            // usePopup={true}
                            // callback={this.appleResponse} // Catch the response
                            />
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}

exportdefaultLogin

 

 

and profile template like below:

// src/App.js
import React, { useState } from 'react';
import { Tabs, Tab } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
function Profile({ state, setState }) {
    const { session } = state;
    const saveDB = (event) => alert("Yoo please save");
    return (
        <div className="tab-wrapper">
            <div className='container-fluid' >
                <div className="row">
                    <div className="col-md-12">
                        <Tabs defaultActiveKey="profile">
                            <Tab eventKey="PersonalInformation" title="Personal Information">
                                <div className="tab-item-wrapper">
                                <br />
                                    <h5 style={{textAlign:'center'}}><i>Personal Information</i></h5>
                                    <br />
                                    <table className="table table-bordered table-striped mx-auto w-auto">
                                        <tbody>
                                            <tr>
                                                <th scope="row">Name</th>
                                                <th contenteditable="true">@Service Name</th>
                                            </tr>
                                            <tr>
                                                <th scope="row">Email</th>
                                                <th contenteditable="true">@Service</th>
                                            </tr><tr>
                                                <th scope="row">Phone No</th>
                                                <th contenteditable="true">@Service</th>
                                            </tr><tr>
                                                <th scope="row">Location</th>
                                                <th contenteditable="true">@Service</th>
                                            </tr><tr>
                                                <th scope="row">Trading Type &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
                                                <th contenteditable="true">@Service</th>
                                            </tr>
                                            <tr>
                                                <th scope="row">Trader Type</th>
                                                <th contenteditable="true">@Service</th>
                                            </tr>
                                            <tr>
                                                <th scope="row">Experience</th>
                                                <th contenteditable="true">@Service</th>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <p className='text-center'>You can click, modify personal information and Save  <br /> <br />
                                        <button type="button" id="saveInfo" onClick={saveDB}>Save</button>
                                    </p>
                                </div>
                            </Tab>
                            <Tab eventKey="YourPosts" title="YourPosts">
                                <div className="tab-item-wrapper">
                                    <h5 style={{textAlign:'center'}}>Your Posts</h5>
                                    <p>At vero eos et accusamus et iusto odio dignissimos</p>
                                </div>
                            </Tab>
                            <Tab eventKey="Notifications" title="Notifications">
                                <br />
                                <div className="tab-item-wrapper">
                                    <br />
                                    <h5 style={{textAlign:'center'}}><i>Enable Notifications of your choice</i></h5>
                                    <br/>
                                    <table className="table table-bordered table-striped mx-auto w-auto">
                                        <thead>
                                            <tr>
                                                <th scope="col"></th>
                                                <th scope="col">Push &nbsp;&nbsp;&nbsp;&nbsp;</th>
                                                <th scope="col">Email &nbsp;&nbsp;&nbsp;&nbsp;</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <th scope="row">Topic</th>
                                                <td>   <div className="form-check form-switch">
                                                    <input className="form-check-input" type="checkbox" role="switch" id="topicPushSwitch" />
                                                </div></td>
                                                <td>   <div className="form-check form-switch">
                                                    <input className="form-check-input" type="checkbox" role="switch" id="topicEmailSwitch" />
                                                </div></td>
                                            </tr>
                                            <tr>
                                                <th scope="row">Question</th>
                                                <td>                                  <div className="form-check form-switch">
                                                    <input className="form-check-input" type="checkbox" role="switch" id="questionPushSwitch" />
                                                </div>
                                                </td>
                                                <td>                                  <div className="form-check form-switch">
                                                    <input className="form-check-input" type="checkbox" role="switch" id="questionEmailSwitch" />
                                                </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th scope="row">Portfolio &nbsp;&nbsp;&nbsp;&nbsp;</th>
                                                <td> <div className="form-check form-switch">
                                                    <input className="form-check-input" type="checkbox" role="switch" id="portfolioPushSwitch" />
                                                </div></td>
                                                <td> <div className="form-check form-switch">
                                                    <input className="form-check-input" type="checkbox" role="switch" id="portfolioEmailSwitch" />
                                                </div></td>
                                            </tr>
                                            <tr>
                                                <th scope="row">Articles</th>
                                                <td> <div className="form-check form-switch">
                                                    <input className="form-check-input" type="checkbox" role="switch" id="articlesPushSwitch" />
                                                </div></td>
                                                <td> <div className="form-check form-switch">
                                                    <input className="form-check-input" type="checkbox" role="switch" id="articlesEmailSwitch" />
                                                </div></td>
                                            </tr>
                                        </tbody>
                                    </table>                            <br />
                                </div>
                            </Tab>
                            <Tab eventKey="Feedback" title="Feedback">
                                <div className="tab-item-wrapper">
                                    <br/>
                                    <div className='row'>
                                        <div className="col-md-9">
                                        <h5 style={{textAlign:'center'}}><i> Feedback Form</i></h5>
                                        </div>
                                        <div className="col-md-2">
                                            <h6><u><i>Suggest StockJabber</i>&nbsp;&nbsp;<i className="bi bi-share-fill"></i></u></h6>
                                        </div>
                                        <div className="col-md-1">
                                            <h6><u><i>RateUs</i>&nbsp;&nbsp; <i className="bi bi-stars"></i></u></h6>
                                        </div>
                                    </div>
                                    <br/>
                                    <p>Please provide your feedback. Your suggestions are valuable to us and we are working relentlessly to make
                                        better Pinstox for your needs. </p>
                                        <br/>
                                        <table className="table table-bordered table-striped mx-auto w-auto">
                                        <tbody>
                                            <tr>
                                                <th scope="row">Name</th>
                                                <th><input type="textbox"></input></th>
                                            </tr>
                                            <tr>
                                                <th scope="row">Feature</th>
                                                <th><input type="textbox"></input></th>
                                            </tr>
                                            <tr>
                                                <th scope="row">Feedback Type</th>
                                                <th>
                                                    <select>
                                                        <option defaultChecked>Select</option>
                                                        <option>Improvement</option>
                                                        <option>Complaint</option>
                                                        <option>Other</option>
                                                    </select>
                                                </th>
                                            </tr>
                                            <tr>
                                                <th scope="row">Details</th>
                                                <th><input type="textarea" style={{minWidth:"500px"}}></input></th>
                                            </tr>
                                        </tbody>
                                    </table>
                                       
                                </div>
                            </Tab>
                        </Tabs>
                    </div>
                </div>
            </div>
        </div>
    );
}
export default Profile;
Unplanned
Last Updated: 09 Sep 2022 05:46 by ADMIN
Created by: Oleksandr
Comments: 1
Category: KendoReact
Type: Feature Request
1

Hi,

I would like to request a feature for the Kendo React Chart Zoomable feature to be able to set a zoom level. 
For example, an exposed API function to set graph's current zoom level to exactly 50% or 25% that I can use with a button maybe.

Currently the API only supports setting "zoom rate", but I would like a set Zoom function, so maybe I can save the current zoom level upon load of the chart again.

Thanks!

Unplanned
Last Updated: 01 Sep 2022 08:38 by ADMIN

Dear Kendo,

 

I'm currently working on a data grid that has virtual scrolling enabled. When a user is scrolling fairly quickly, the screen will constantly flash white. See video in attachment.

I see this same behaviour in the example provided in the docs here: https://stackblitz.com/run/?file=app%2Fmain.jsx although it is slightly less noticeable.

What can we do to fix this?

Thanks in advance.

Kind regards,

Peter

Unplanned
Last Updated: 01 Sep 2022 06:01 by ADMIN

Hi,

I would like to be able to select all items from the treeview using a keyboard combination, I mean something like select an item +press and hold shift key and select another item and all items in between get selected.

I know there is a way to select all items using a button but the user does not want this approach.

Next image is the functionality that we want and we want to know if there is a way to achieve it

 

Need More Info
Last Updated: 29 Aug 2022 10:12 by ADMIN
Created by: eDAD
Comments: 4
Category: KendoReact
Type: Bug Report
0

Environment Details:
OS: Windows11 version 21H2 (OS build 22000.856)
Edge Browser version: 
104.0.1293.47

Repro steps:
1. Open Code Pen: https://codepen.io/m1mrt/pen/VwXjEzJ page in Edge Browser.2. Run Axe dev tools3. Observe an issue that select element has an accessible name.

Actual Result:Select element does not have an accessible name.

Expected Result:
All components need an accessible name, ideally using semantic elements and attributes. In rare cases, aria-label or aria-labelled by may be needed to alter the name.

Screenshot attachment: