Questions on KendoReact Forum

0 answers

184 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

DateInput

DatePicker

Grid

Input

Tooltip

updated question on 16 Jul 2021

1 answer

186 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

2.0K+ 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

148 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

1 answer

717 views

Combobox autoFocus={true} not working.

Hi Team,

I'm trying to auto Focus the combobox control but it is not working.

ComboBox

answered on 15 Jul 2021

1 answer

637 views

What's the correct way to Force Open Link in new Window in the Editor component?

I'm working with the Editor component (https://www.telerik.com/kendo-react-ui/components/editor/) .

If a user creates a link, I need to enforce all links open in a new window. By default it's a checkbox that isn't checked.

I haven't found a way to accomplish this yet. I'd like to either check and disable the checkbox or even not show it at all, but still have it enabled.

I also tried using the custom rendering (https://www.telerik.com/kendo-react-ui/components/editor/custom-rendering/) but it seems to all be tucked inside the content var.

Editor

answered on 12 Jul 2021

1 answer

240 views

Disable keyboard navigation in React Kendo Upload component

Hello,

I am trying to disable the keyboard navigation and actions inside the Upload component but it seems like there are no existing props that could allow me to achieve that.

I also tried to disable the keyboard using a reference with a event listener + stopPropagation but the upload's ref doesn't allow me to add a listener to it.

Do you have any ideas on how I can manage to do this?

Best regards,

Arnaud

Upload

answered on 12 Jul 2021

1 answer

861 views

Field with ComboBox component cannot set default value

Hi There,

I am using the Field with Combobox component, and I set allowCustom=true. And, the Component cannot get the Init{Edit DataGrid ROW value} value.

Here is code

Thank you,

<Form onSubmit={props.onSubmit} initialValues={props.item}
         render={formRenderProps => <FormElement>
              <fieldset className={"k-form-fieldset"}>
                <div className="mb-6">
                <Field component={ComboBox} name="prod_name" data={prodNameList} required={true} textField="name" 
                dataItemKey="value"  value={selectedName}
                 onChange={onChangeSelectedName} allowCustom={true} label={"Prod Name"}/>
                </div>
              </fieldset>
              <div className="k-form-buttons">
                <button type={"submit"} className="k-button k-primary" disabled={!formRenderProps.allowSubmit}>
                  Update
                </button>
                <button type={"submit"} className="k-button" onClick={props.cancelEdit}>
                  Cancel
                </button>
              </div>
            </FormElement>} />

ComboBox

Form

Grid

answered on 09 Jul 2021

1 answer

1.0K+ views

Text size not changing

Hi , there.

Recently i tried to use Kendo for React to create PDF document. But i faced with one issue, i cannot change font size of text.

No matter what properties i use, and what tags i am using it's always same size, even for <h1>

The wierdest thing that everything else working fine colors, margin, font colors, etc.

This is the example of code which i am using.

.title {
  font-size: 30pt !important;
  color: green;
  font-weight: bold;
}

return (
    <div>
      <PDFExport
        ref={pdfExportComponent}
        paperSize="A4"
        fileName='Dossiers Export'
      >
        <div style={{height: '2%', width: '100%', background:'#e6ecf0'}}>
         <p className = 'title'>styled</p>
        </div>
      </PDFExport>
    </div>
  );
})

Does anyone else faced with this issue. ?

answered on 09 Jul 2021

2 answers

814 views

DropDownList fails accessibility requirement WCAG 1.3.1

Hi,

The KendoReact DropDownList fails WCAG 1.3.1 when not expanded as per axe DevTools. This can be seen on the Getting Started page for the DropDownList https://www.telerik.com/kendo-react-ui/components/dropdowns/dropdownlist/

The issue is: "Ensures elements with an ARIA role that require child roles contain them" and the proposed resolution is "Required ARIA child role not present: option".

The HTML from the basic DropDownList on the Getting Started page is as follows:

<span role="listbox" tabindex="0" class="k-dropdown-wrap" aria-haspopup="true" aria-expanded="false" aria-owns="1aaf8d2f-7bcc-4876-82cf-6b8ec7bfb31f">
	<span class="k-input"></span>
	<span class="k-select">
		<span class="k-icon k-i-arrow-s"></span>
	</span>
	<select tabindex="-1" aria-hidden="true" style="opacity: 0; width: 1px; border: 0px; z-index: -1; position: absolute; left: 50%;">
		<option></option>
	</select>
</span>

It appears as if the issue is that the <option> is not a direct descendant of the <span> with the "listbox" role. The <span> has an aria-owns element which can be used to resolve this issue, but it contains a unique identifier that doesn't appear anywhere else on the page.

I have done two tests: I have shifted the role="listbox" attribute to the <select> and I have left the role on the outer <span> and added an id="unique-identifier" to the <option>. In both cases the issue is resolved. However, the issue may also be that when hidden the outer span shouldn't have role="listbox".

I believe this is a bug.

Kind regards,

David

DropDownList

answered on 08 Jul 2021