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

Completed
Last Updated: 26 Jul 2023 13:58 by ADMIN

Hi,

Please see the following example of the dropdownlist with bootstrap theme applied:

https://stackblitz.com/edit/react-ejxe44?file=index.html

I have updated the bootstrap cdn to latest. Notice that bootstrap styling is applied to the dropdowns including focus shadowing.

Now please see the exact same example but with theme customisation using a custom scss file:

https://stackblitz.com/edit/react-tuq49c-g6ofwn?file=index.scss

Notice that bootstrap styling is no longer applied to the dropdowns, which do not have focus shadowing.

Kind regards,

David

Unplanned
Last Updated: 28 Jul 2023 11:31 by ADMIN
Created by: David
Comments: 3
Category: KendoReact
Type: Bug Report
1

Hi,

Please see the following example of the Upload component being used to transfer a single file to a byte array:

https://stackblitz.com/edit/react-u2kbu9?file=app/main.tsx

Notice that all packages are latest including react 18 but I have not switched to the new createRoot API, and as per react documentation "Until you switch to the new API, your app will behave as if it’s running React 17" - this warning can be seen in the console window. When you upload a file, the FileReader onprogress and onload events result in the file being successfully uploaded with 100% progress. You can see current state and new state of all events in the console window.

Now please see the exact same example but switched to the new createRoot API:

https://stackblitz.com/edit/react-y8fuya?file=app%2Fmain.tsx

Notice that the warning is no longer visible in the console window. When you upload a file, the FileReader onprogress and onload events result in the file being successfully uploaded but the file progress is overwritten. You can see current state and new state of all events in the console window - the new state from the onProgress event is lost, and the new state in the onStatusChange event reports zero progress.

I believe this is because of automatic batching in React 18.

Kind regards,

David

 

Unplanned
Last Updated: 28 Jul 2023 11:39 by ADMIN

Hi Team, 

There is some unexpected behavior when resizing events after switching the Scheduler to 'Show Full Day'. Take a look at my sandbox, you'll notice, its barely anything, let alone anything fancy.

Replicate:
1. Create a new event that starts at 8am.
2. Switch the view to 'Show Full Day'
3. Using the start time resize handle and drag it up, to start earlier. And you will notice the dragItem actually drags down, and when you release the handle, the event appears in the correct place

This will only happen on the first resize when switching to 'Show full day'. You can replicate it more by switching back and forth between full day and business hours.

Similar Scenarios include:
1. Placing the event to end at 8am, switching to business hours and back, then drag the end time down, the dragItem will be positioned to start at 8am, but say its 7am and you will see the rest.
2. Placing the event to overlap 8am, will yield both problems.

Again this only happens on the first resize after switching views, and I've only tested it in DayView, so it might affect WeekView as well. There appears to be no issue when events overlap the endWorkTime.

Thanks,
Grant

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: 26 Jul 2023 14:02 by ADMIN
Created by: Joca
Comments: 1
Category: KendoReact
Type: Bug Report
2

There is an issue with ComboBox remote virtualization.  This is reproducible on https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/filtering/#toc-filtering-with-remote-data-and-virtualization

Scroll slowly till almost the end of the list. Pay attention to the name: Paula Parente

Notice that the name keeps repeating after scrolling as the scroll goes back and forth. You'll need to scroll a few times more before the scroll continues to load

other items.

 


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: 26 Jul 2023 14:04 by ADMIN
Created by: Paul Wood
Comments: 1
Category: KendoReact
Type: Feature Request
0

After significant amounts of negative feedback we have now stopped using the KendoReact DatePicker as the calendar part of the control doesn't make it clear how to change the month/year. I am aware that you click on the {Month Year} label at the top, but this is obviously not intuitive at all based on the extensive user feedback (it took me a while to figure out the first time as well).

When you start using the control for older dates (e.g. Date of Birth), scrolling is just not feasible particularly on mobile and so users get incredibly frustrated as they just want to change the month/year in a more manual manner to go back in time significantly. Many other date picker controls use visual cues such as up/down carets next to the Month/Year to suggest it can be adjusted.

Please get your UX experts to look at improving this as it could be a really simple fix that would make a massive difference to users

Unplanned
Last Updated: 05 Jan 2024 07:36 by ADMIN

When a Taskboard column overflows vertically or the columns overflow horizontally, there is no way for the user to drag a task card in a position that is not visible at the start of the drag in one smooth motion and one has to resolve to multiple drag 'n' drops and subsequent manual scrolls. Ideally when a card is being dragged over the borders of the overflown container, it should automatically scroll to bring the invisible elements into the viewport. Video of current behaviour is attached below, together with the requested behaviour.

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