Questions on KendoReact Forum

1 answer

200 views

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

Grid

answered on 22 Jul 2021

1 answer

506 views

Numeric text box read-only and restrictions.

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.

NumericTextBox

answered on 21 Jul 2021

1 answer

2.2K+ views

Freeze/Sticky/Fixed Grid Header Row

Is this possible without setting up pagination, virtual scrolling, or infinite scrolling?

Grid

answered on 21 Jul 2021

1 answer

113 views

Customized button + Calling CleanFormatting

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

Editor

answered on 20 Jul 2021

1 answer

156 views

why kendo uses js rather than jsx for it's modules

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

General Discussions

updated question on 20 Jul 2021

1 answer

1.2K+ views

DatePicker : Can't set value manually in componentDidMount event

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;

answered on 19 Jul 2021

0 answers

131 views

Error tooltip with good format in edit mode

Hello,

I've this issue in my project with my data grid toggle in edit mode :

Part of my package.json

    "@progress/kendo-data-query": "^1.5.5",
    "@progress/kendo-drawing": "^1.10.1",
    "@progress/kendo-licensing": "^1.1.4",
    "@progress/kendo-react-animation": "^4.7.0",
    "@progress/kendo-react-data-tools": "^4.7.0",
    "@progress/kendo-react-dateinputs": "^4.7.0",
    "@progress/kendo-react-dropdowns": "^4.7.0",
    "@progress/kendo-react-grid": "^4.7.0",
    "@progress/kendo-react-inputs": "^4.7.0",
    "@progress/kendo-react-intl": "^4.7.0",
    "@progress/kendo-react-layout": "^4.7.0",
    "@types/react-transition-group": "^4.4.1",

Parts of my render code :


<Grid filterable={false} pageable={true} sortable={false}
                                    data={dataSource}
                                    reorderable={true}
                                    onItemChange={this.itemChange}
                                    editField={"inEdit"}>
                                    <Column title="Ligne">
                                        <Column field="NoLig" width="50px" cell={this.cellFormat} />
                                        <Column field="FlagAnnul" width="50px" cell={this.cellFormat} />
                                        <Column field="Classification" width="64px" cell={this.cellFormat} />
                                    </Column>
</Grid>

function cellFormatting

    cellFormat = (props) => {
        const { dataItem } = props;
        const { dataBinding } = this.state;
        let value = props.dataItem[props.field];
        let editor = "";
        let max = 0;
        let min = 0;
        let maxLength = 0;
        let formatOptions = "";
        let valueDate = null;
        const index = dataBinding.dataScheme.findIndex((o) => o.Name === props.field);
        if (index > -1) {
            const scheme = dataBinding.dataScheme[index];
            editor = scheme.Type;
            switch (editor) {
                case "boolean":
                    break;
                case "text":
                    maxLength = scheme.MaxLength;
                    break;
                case "date":
                    valueDate = moment(value, 'DD/MM/YYYY').toDate();
                    break;
                case "int":
                    if (value)
                        value = parseInt(value);
                    min = parseInt(scheme.Min);
                    max = parseInt(scheme.Max);
                    formatOptions = "n0";
                    break;
                case "float":
                    if (value)
                        value = parseFloat(value);
                    min = parseFloat(scheme.Min);
                    max = parseFloat(scheme.Max);
                    formatOptions = "n" + scheme.Min.split(",")[1].length;
                    break;
            }
        }
        return (
            <td colSpan={props.colSpan}
                className={props.className}
                role="gridcell"
                aria-colindex={props.ariaColumnIndex}
                aria-selected={props.isSelected}
                expanded={props.expanded.toString()}
                data-grid-col-index={props.columnIndex}
                editor={editor}>
                {dataItem.inEdit ? (<>
                    {editor === "boolean" && (<Input />)}
                    {editor === "text" && (<Input field={props.field} maxLength={maxLength} defaultValue={value} onChange={(e, dataItem) => this.cellValueOnChange(e, props.dataItem)} />)}
                    {editor === "date" && (<DateInput field={props.field}
                        defaultValue={valueDate}
                        data-required-msg=""
                        validationMessage="" />)}
                    {(editor === "int" || editor === "float") && (<NumericTextBox field={props.field} max={max} min={min} format={formatOptions} defaultValue={value} onChange={(e, dataItem) => this.cellValueOnChange(e, props.dataItem)} />)}
                </>) : (value)}
            </td>)
        };

I tried add this 2 attributes in props of DateInput element but no success :

data-required-msg=""
validationMessage=""

I need hide this tooltip.

I've same issue this DatePicker too !!!

Do you know how resolve this issue, please ?

Thank you

Cyril REILER

updated question on 16 Jul 2021

1 answer

137 views

DatePicker : When user enter the date manually the value getting appended with the previous value.

Hi Team,

I'm facing below issue when manually enter the value in the datepicker.

Control : DatePicker

Step 1: Manually I'm trying to enter the data as 01/01/2021

Step 2: Now try to change the date (day) by entering "2". (Our Expectation is system should display the date as 02/01/2021 instead it is appending the date and displaying as 12/01/2021)

If this is a feature can you please suggest as any alternative way to stop that feature.

DatePicker

answered on 16 Jul 2021

1 answer

1.9K+ views

Capture "Shift + Tab" key pressed in textarea box

Hi Team,

I'm Trying to capture "Shift + Tab" key combination is pressed or not in textarea/Combobox control. unfortunately I'm able to get only the last key pressed that is "tab". But my requirement is I need to detect "Shift + Tab".

Wich event I should use to detect "Shift + Tab" key

Can anyone help me..

I'm using this in textarea and combobox.

ComboBox

TextArea

answered on 16 Jul 2021

2 answers

115 views

Grid In-Cell edit error

Hi,

I a have some troubles with the in cell editing feature for Grid.

With the doc example and the exact same code and data sample, I get a critical warning : React does not recognize the 'dataItem' prop on a DOM element...

Full message attached.

Any idea ?

Thanks !

Grid

answered on 15 Jul 2021