Unplanned
Last Updated: 23 Sep 2022 13:26 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: 21 Sep 2022 10:59 by ADMIN
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
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
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

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

 

Unplanned
Last Updated: 29 Aug 2022 07:36 by ADMIN

We have the requirement to have a data grid with drag and drop configured to support auto scroll when the data grid has no fixed height set and overflow/scrollbar is enabled on the a parent element (div or body).

Full details as per support ticket 1571735.

Unplanned
Last Updated: 29 Aug 2022 07:26 by ADMIN
Created by: Oleksandr
Comments: 1
Type: Feature Request
0

Hi,

I would like to request a feature for the scatter line type chart for the crosshair line depending on axis to snap to points on the scatter chart. 
An example of this would be like showing X axis crosshair only and having on hover of mouse to snap to nearest dot. (not showing crosshair between points, but always on a point.)

The closest working example I can find of this on kendo react is the bar chart for crosshair tool tip first example https://www.telerik.com/kendo-react-ui/components/charts/chart/elements/crosshairs/ but after talking to support it does not support scatter line chart.

but only with category axis(X axis). 

The desired behavior would be the above but on a scatter line chart using separate axis y or x crosshair only and having them to snap to points instead of hovering between points. If you do hover between points, it should snap to nearest point to mouse cursor.

This sandbox has the behavior but only for a bar chart. https://stackblitz.com/edit/react-qnn9h4?file=app%2Fmain.jsx

 

 

Unplanned
Last Updated: 26 Aug 2022 10:57 by ADMIN
Created by: Daniel
Comments: 1
Type: Feature Request
0

We'd liked to have a wrapped loader similar to other third party loaders.

The code should be something like this:

<Loader show={props.isLoading} message={'loading'}>
  <SomeComponent />
</Loader>

Other solutions are also acceptable.  The requirement is that the loader is positioned above the main component without having it rerender or reposition.

Unplanned
Last Updated: 26 Aug 2022 06:27 by ADMIN

Set the default width of the MultiColumnComboBox columns based on the input width.

In order to position the Popup of the MultiColumnComboBox correctly, we need each column to have fixed width.

Currently, we are setting the default width to 200px for each column that has not width set from the options.

We can add a second option to take the width of the input, subtract the width of the columns with fixed width and divide the remaining space between the other columns.

Unplanned
Last Updated: 19 Aug 2022 11:08 by ADMIN

Just as a first note, the documentation on how to write a custom `messagesMap` function for use in the `Pager` component is extremely vague. Without access to the KendoReact source code, it would have been near impossible.

First request: on the `GridProps` API page, the `pager` prop is defined as being the type "null" or `ComponentType<PagerProps>`. Please convert the text "ComponentType<PagerProps>" into a link to the `PagerProps` page. This will greatly aid in quickly linking to the appropriate documentation.

Second request (and the bulk of the feature request): please make (at least) the pager-related constants and default messages (string templates) available to consuming components. As of v5.4.0 of `@progress/kendo-react-data-tools`, the constants are exported from {kendo-react-private}/packages/datatools/src/messages/index.ts and they are consumed within the `Pager` (and subcomponents), but are not re-exported.

Not having access to the pager-related constants (`pagerInfo`, `pagerFirstPage`, `pagerPreviousPage`, `pagerNextPage`, `pagerLastPage`, `pagerItemPerPage`, `pagerPage`, `pagerOf` and `pagerTotalPages`) means it's a complete shot in the dark at how to write an override function to supply as the `messagesMap` prop. Not only that, but without access to the pager-related default messages (string templates) and given the way the `Pager`'s `render` method is written, we are unable to change just one or just a couple messages; we have to address all nine.

Right now in v5.4.0, the way the `Pager`'s `render` method is written, it simply checks to see if `messagesMap` is non-null (lines 214 through 223 of Pager.tsx, lines 38-43 of PagerInput.tsx and lines 36 and 37 of PagerPageSizes.tsx). This means that if we pass in a custom function for `messagesMap`, the custom function will be used to evaluate the message/string-template for `pagerFirstPage`, `pagerPreviousPage`, `pagerNextPage`, `pagerLastPage`, `pagerInfo`, `pagerPage`, `pagerOf`, `pagerTotalPages` and `pagerItemPerPage` (just in those three, aforementioned files). This means that we have to somehow know that `pagerInfo`, for example, will come through to the custom function as the string "pager.info" or that `pagerPage` will come through as "pager.page" so that the custom function knows which `messageKey` it's being passed so it can send out the object with the appropriate message/string-template as the object's `defaultMessage` property.

Instead, if the pager-related constants and default messages were exposed, we could very easily write a custom `messagesMap` function that could address any number of the nine default messages.

As an example, the Telerik/Kendo default string template for `pagerInfo` is "{0} - {1} of {2} items" that could be better scoped to the type of data the grid shows. Let's say the grid displays products and we'd like the pager to show "Displaying products 5 - 10 of 302" in the bottom right. If the pager-related constants and messages were exposed, this becomes a very simple task while not disturbing all other Telerik/Kendo default messages:

import React from 'react';
import { Grid, GridColumn, GridNoRecords, GridColumnMenuFilter } from '@progress/kendo-react-grid';
import { pagerInfo, pagerOf, messages as defaultPagerMessages, Pager } from '@progress/kendo-react-data-tools';

export default function MyComponent() {
    const customMessagesMap = messageKey  => {
        switch (messageKey) {
            case pagerInfo: return { messageKey, defaultMessage: 'Displaying products {0} - {1} of {2}' };
            default: return { messageKey, defaultMessage: defaultPagerMessages[messageKey] };
        }
    };

    const CustomPager = () => (
        <Pager
            skip={...}
            take={...}
            total={...}
            buttonCount={...}
            type="numeric"
            info={true}
            pageSizes={[...]}
            messagesMap={customMessagesMap}
    );

    return (
        <div className='my-component'>
            <Grid data={[...]} pager={CustomPager}>
                <GridColumn ... />
            </Grid>
        </div>
    );
};
The ability to override the string-templates used by the Grid Pager has been made very easy, and is well-documented, in the other Kendo frameworks (UI for jQuery, UI for Angular and UI for ASP.NET MVC). We're struggling to understand why it seems to be such a "black box" in KendoReact.
Unplanned
Last Updated: 19 Aug 2022 07:32 by ADMIN
Hi, currently component Pager (https://www.telerik.com/kendo-react-ui/components/datatools/pager/) doesn't allow to display text before dropdown.

Pager now:

What i want to achieve:

Will you consider supporting such an option in the future? 
Unplanned
Last Updated: 18 Aug 2022 16:17 by ADMIN

Allow the Grid to update its data without remounting the whole component, so the current selection of the filtering menu would be persisted.

We have scenarios where the data is constantly updating the filter selection is lost if the Grid is updated before pressing the `Filter` button.

 

Unplanned
Last Updated: 16 Aug 2022 09:17 by ADMIN
the ExternalDropZone component can only drag and drop files, but people usually think it's also clickable. 
Unplanned
Last Updated: 12 Aug 2022 08:33 by ADMIN

Hello,

I would like this feature https://docs.telerik.com/kendo-ui/knowledge-base/add-event-programatically?_ga=2.240140043.929456162.1660247660-2049658922.1660247660 to be available in KendoReact.

1. I need to be able to open the "create a new appointment dialog" from the scheduler programmatically.
2. Additionally, opening an existing event programmatically would also be a requirement.

The use case for #2 is so I can open an event directly from a link (e.g. use query params with an eventId, load it into the scheduler, and then open the edit dialog; all programmatically).

 

Thanks!

Unplanned
Last Updated: 11 Aug 2022 08:37 by ADMIN
Created by: Ryan
Comments: 1
Type: Feature Request
1
The Filter component does not contain a disabled prop like most other input-related components. I'm trying to disable sections of a form page and I can disable everything, using the existing disabled prop on various input component, except for the Filter component.
Unplanned
Last Updated: 11 Aug 2022 08:18 by ADMIN

Currently when viewing the scheduler timeline view on tablet/mobile, in order to scroll the timeline back and forward you need to drag on an empty part of timeline. If the drag is started on an event then you are unable to scroll.

Would it be possible to make it so that if editing was disabled that dragging an event would scroll the timeline?

Unplanned
Last Updated: 11 Aug 2022 08:14 by ADMIN
Created by: Revanth
Comments: 1
Type: Feature Request
0

scroll pagination is available in ListView but item selection is not there and in other side item selection is available in ListBox but scroll pagination is not availed, 

we have mostly very common and frequent requirement user can select a item from a big data list, where we need pagination to improve component performance.

this only we can achieve only if ListBox supports scroll pagination

1 2 3 4 5 6