Telerik Forums
KendoReact Forum
1 answer
1 view
Are the card types broken? When I take a look at the demo page, all the types look the same: https://www.telerik.com/kendo-react-ui/components/layout/card/types/
Stefan
Telerik team
 answered on 23 Jul 2021
1 answer
5 views

Hi,

I am trying to set the tabindex property of a KendoReact form I am developing. The form uses a FieldSet and Fields for the form inputs. Most rendered controls seem to ignore the tabindex property of a field. Normal inputs seem to respect that. However, DatePicker, DropDownList, and AutoComplete seem to ignore the property and set tabindex=0 on the generated output regardless of the index I set.

I have created a stackblitz with a simplified version of the form to show the behavior: https://stackblitz.com/edit/react-ifxfxg?file=src%2FNavMenu.jsx

Using KendoReact v4.7.0 both locally and on stackblitz.

Stefan
Telerik team
 answered on 22 Jul 2021
1 answer
3 views

Is there any example of in-cell editing with sorting, filtering, and virtual scrolling? I can't get virtual scrolling to work with all of these features, but if there is an example I can follow to see where I might be going wrong, I'd love to check it out!

 

Thanks in advance!!

Stefan
Telerik team
 answered on 22 Jul 2021
1 answer
1 view

Hi,

Is it possible to open the "dropdown" for the AutoComplete component by default when entering the contol (giving it focus/clicking on it)?

So for example: in the samples of the Getting started of the AutoComplete (https://www.telerik.com/kendo-react-ui/components/dropdowns/autocomplete/) that you just click on the control and that it shows all countries instead of only showing those after you start typing?

Regards,

Pieter

Stefan
Telerik team
 answered on 22 Jul 2021
1 answer
1 view

It's also happening in the Kendo demo on this page: (first example) https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-inline/

 

Scroll down to the middle of the grid, click Remove on an item, and the grid will jump up to the top when the row is removed from sight

Stefan
Telerik team
 answered on 22 Jul 2021
1 answer
5 views

Hello. We tried adding the read-only and restrictions props to the numeric text box for Kendo React but this props are not available right now only for Kendo Angular. We need the read-only props in our implementation and also the restriction functionality(the auto correct) as provided for Kendo Angular in the following examples

https://stackblitz.com/run/?file=app/app.component.ts

https://www.telerik.com/kendo-angular-ui/components/inputs/numerictextbox/precision/.

Right now if we enter min={0} and then we enter a value through the keyboard it allow us to insert a negative value that resets to 0 after unfocus. We need to prevent the user from inserting negative numbers as per the functionality in the Kendo Angular. 

How can we achieve this?

Thank you.

Krissy
Telerik team
 answered on 21 Jul 2021
1 answer
3 views
Is this possible without setting up pagination, virtual scrolling, or infinite scrolling?
Stefan
Telerik team
 answered on 21 Jul 2021
1 answer
5 views

Hello!

I created a custom tool using the BackgroundColorTool tutorial and inside my onClick method, I would like to call the cleanFormatting.

How do I do that?


const onClick = (e) => {
        EditorUtils.formatBlockElements(view, "p", EditorToolsSettings);

        e.preventDefault();
    };

Stefan
Telerik team
 answered on 20 Jul 2021
1 answer
3 views

Every framework no matter how complete needs to be customizable
however React modules are inherently modifiable, the fact that kendo developers have used java script for building their components makes it very difficult to modify (or even understand) what's under the hood.

*Edit: Here is an screen shot of the contents in node_modules

Mohammad
Top achievements
Rank 1
 updated question on 20 Jul 2021
1 answer
8 views

Hello, 

I've an issue with DatePicker Component. I created a custom component based on DatePicker.

It's just a component with a fixed label (top, left, right or bottom) with sizing to create form more quickly

After lot of hours of search, no success, I'm forced to post a message on forum to resolve this issue. It's very strangely for me nay impossible without a fix. It's my opinion. 

See below or file in attachment for test and fixing of this issue

Thank you

Cyril REILER

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { withTranslation } from 'react-i18next';
import Proptypes from 'prop-types';
import { DatePicker } from "@progress/kendo-react-dateinputs";
//import { CustomWeekCell } from '../ExtendedClasses';
import moment from 'moment-timezone';

class MyDatePicker extends Component {
    static propTypes = {
        //required
        t: Proptypes.func.isRequired,
        name: Proptypes.string.isRequired,
        callback: Proptypes.func.isRequired,
        style: Proptypes.objectOf(Proptypes.string),
        //optional
        defaultValue: Proptypes.oneOfType([Proptypes.string, Proptypes.number]),
        disabled: Proptypes.bool,
        readOnly: Proptypes.bool,
        required: Proptypes.bool,
        width: Proptypes.number,
        tabIndex: Proptypes.number,
        //Extended by Telerik Component
        labelWidth: Proptypes.oneOfType([Proptypes.string, Proptypes.number]),
        labelHeight: Proptypes.oneOfType([Proptypes.string, Proptypes.number]),
        floatingLabel: Proptypes.string,
        fixedLabel: Proptypes.string,
        labelPosition: Proptypes.string,
        formatPlaceholder: Proptypes.objectOf(Proptypes.string),
        weekNumber: Proptypes.bool,
        format: Proptypes.string,
        value: Proptypes.string,
    }

    static defaultProps = {
        _datepicker: null,
        style: {},
        defaultValue: '',
        disabled: false,
        readOnly: false,
        required: false,
        width: 100,
        tabIndex: -1,
        //Extended by Telerik Component
        labelWidth: "auto",
        labelHeight: "auto",
        floatingLabel: '',
        fixedLabel: '',
        labelPosition: 'left',
        formatPlaceholder: { year: "    ", month: "  ", day: "  " },
        weekNumber: false,
        format: "dd/MM/yyyy",
        value: "",
    }

    /**
     * @constructor
     * @param {Object} props - props of the component
     * @description instantiate component and his state
     */
    constructor(props) {
        super(props);
        this.state = {
            value: props.defaultValue,
        };
    }

    /**
     * 
     */
    componentDidMount() {
        console.log("componentDidMount")
        const {
            value,
            defaultValue,
            format,
        } = this.props;

        console.log(this.props)
        this.setState({
            defaultValue: null,
        });
        this.setState({
            defaultValue: defaultValue,//no effect !!!
            value: value,//no effect !!!
        });
        console.log("value from props");
        console.log(value);

        console.log("value from state");
        console.log(this.state.value);

        console.log("defaultValue from props");
        console.log(defaultValue);

        console.log("defaultValue from state");
        console.log(this.sdefaultValue);

        var root = ReactDOM.findDOMNode(this._root);
        var input = root.querySelector('input');

        console.log("input from DOM");
        console.log(input);

        console.log("input value from DOM");
        console.log(input.value);

        if (input && defaultValue) {
            console.log("force setting manually")
            var s1 = moment(defaultValue, format).format("X");
            input.value = value;//no effect !!!
            input.ariaValuetext = "01/01/2021";//no effect !!!
            input.ariaValuenow = s1 + "000";//no effect !!!
            console.log("check after forcing")
            console.log(input) //no effect !!!
        }
    }

    /**
     * @param {Object} prevProps - the previous props of component
     * @description setDefaultValue if props changed
     */
    componentDidUpdate(prevProps) {
        console.log("componentDidUpdate")
        const {
            value,
            defaultValue,
        } = this.props;

        if (prevProps !== this.props) {
            this.setState({
                defaultValue: defaultValue,
                value: value,
            });
        }
    }

    /**
     * valudeChanged
     * @method
     * @param {Object} e - the event fired
     * @description fired when a value changed - check validators -
     * set the state of component - call callback to notify changed
     */
    onChange = (e) => {
        const {
            //callback,
            //name,
            readOnly,
        } = this.props;
        const value = e.value;
        if (readOnly) {
            return;
        }
        this.setState({
            value,
        });
        //callback({ name: name, value: value }, this, null);
    }

    /**
     * render
     * @description templates the component
     */
    render() {
        const {
            defaultValue,
            value,
        } = this.state;
        const {
            name,
            width,
            disabled,
            style,
            tabIndex,
            readOnly,
            //Extended by Telerik Component
            floatingLabel,
            fixedLabel,
            labelWidth,
            labelHeight,
            labelPosition,
            formatPlaceholder,
            weekNumber,
            format,
        } = this.props;
        const showFixedLabel = fixedLabel && labelPosition && !floatingLabel && (labelWidth || labelHeight);
        let display = "";
        let templateColumns = "";
        let templateRows = "";
        let w = labelWidth ? labelWidth : "auto";
        let h = labelHeight ? labelHeight : "auto";
        if (showFixedLabel) {
            display = "grid";
            switch (labelPosition) {
                case "top": templateRows = h + "px auto"; break;
                case "right": templateColumns = "auto" + w + "px"; break;
                case "bottom": templateRows = "auto" + h + "px"; break;
                case "left": templateColumns = w + "px auto"; break;
                default:
                    return;
            }
        }
        return (
            <div className="k-MyDatePicker-Container k-Theme-Palette-Primary"
                ref={(c) => this._root = c}
                style={{ ...style, display: `${display}`, width: `${w + 2}px`, height: `${h + 2}px`, gridTemplateColumns: `${templateColumns}`, gridTemplateRows: `${templateRows}` }}>
                {showFixedLabel &&
                    (<div className="k-MyDatePicker-Label" style={{ ...style, width: `${w}px`, height: `${h}px` }}>
                        {fixedLabel}
                    </div>)}
                <DatePicker style={{ ...style, width: `${width}px` }}
                    ref={(c) => this._datepicker = c}
                    defaultValue={defaultValue instanceof Date ? defaultValue : null}
                    className="k-MyDatePicker-DatePicker k-Theme-Palette-Secondary"
                    width={width}
                    formatPlaceholder={formatPlaceholder}
                    tabIndex={tabIndex}
                    label={floatingLabel}
                    name={name}
                    weekNumber={weekNumber}
                    disabled={disabled}
                    readonly={readOnly}
                    //weekCell={CustomWeekCell}
                    format={format}
                    onChange={this.onChange} />
            </div>
        )
    }
}

export { MyDatePicker };
const o = withTranslation()(MyDatePicker);
o.displayName = 'MyDatePicker';
export default o;


 

Stefan
Telerik team
 answered on 19 Jul 2021
Top users last month
Psyduck
Top achievements
Rank 4
Bronze
Iron
Iron
Om Pushkara deep
Top achievements
Rank 2
Iron
Iron
Iron
Valery
Top achievements
Rank 1
Iron
Peter
Top achievements
Rank 1
Veteran
Iron
George C.
Top achievements
Rank 2
Iron
Veteran