Questions on KendoReact Forum

1 answer

766 views

Grid loses focus during inline editing with custom editor

i followed the example provided in the docs to replicate inline editing for my scenario.

However after clicking on edit button , for every keystroke the input loses focus.

I observed that After removing the below parameter code works fine:

dataItemKey={product id}

What is the use of this parameter and how does specifying it (uniquely or not) affects focus on the input text box while typing.

Please advise.

https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-custom/

General Discussions

Grid

answered on 23 Jun 2023

0 answers

1.6K+ views

Adding an empty value item to a DropDownList

Hi,

I am looking for guidance on the correct way to provide an empty option in a DropDownList bound to a collection of objects. It appears to work if you just use a 'null' defaultItem:

defaultItem={null}

which adds an empty item to the top of the list and returns a null value onChange. However, the documentation suggests that this property is supposed to be a placeholder and that the defaultItem property type must match the data type. Is there a better approach to adding an empty item to the list?

Kind regards,

David

DropDownList

asked on 22 Jun 2023

1 answer

117 views

[Solved] TreeList: Custom headerCell --> how to get columnMenu to show?

I can't seem to find the ColumnMenu component from the cellProps provided for the headerCell prop for a TreeList column. I would like to utilize a custom headerCell but also show the column menu.

TreeList

answered on 22 Jun 2023

1 answer

156 views

[Solved] How do I force date selection via the popup calendar for the datepicker control?

How do I force date selection via the popup calendar for the datepicker control?

We would like to prevent keyboard entry because it allows entering values before the set min date.

Thanks,

Adam

DatePicker

answered on 21 Jun 2023

1 answer

158 views

Tabbing through columns using tab key which are not fully visible and hidden behind the row menu area is not working

When a grid is having more columns which can't be fit in a single screen (Zoom 100%) and requires Horizontal scroll bar then Tabbing through columns using tab key which are not fully visible and hidden behind the row menu area is not working.

Grid

Menu

answered on 21 Jun 2023

2 answers

191 views

[Solved] Integrating numeric conversion with Kendo Form using FieldRenderProps

"I am using a Kendo form with FieldRenderProps, but I am facing an issue with the NumericTextBox action. Could you please provide some code to assist me? I have implemented a NumericTextBox for 'Kilometers' and would like to have the same setup for 'Miles'. The goal is to enter a value in Kilometers and have the corresponding Miles value automatically calculated and displayed in the Miles NumericTextBox. For instance, if I input 10 in Kilometers, the calculated Miles value should be 6.214 and displayed in the Miles NumericTextBox."

code link

https://stackblitz.com/edit/react-232pue-cjgnrl?file=app%2Fmain.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  Form,
  Field,
  FormElement,
  FormMultiSelect,
  FieldWrapper,
} from '@progress/kendo-react-form';
import {
  Label,
  Error,
  Hint,
  FloatingLabel,
} from '@progress/kendo-react-labels';
import { Button } from '@progress/kendo-react-buttons';
import { countries, employees, genders, sizes, equipment } from './data';
import {
  Input,
  MaskedTextBox,
  NumericTextBox,
  Checkbox,
  ColorPicker,
  Switch,
  RadioGroup,
  Slider,
  SliderLabel,
  RangeSlider,
  TextArea,
  Rating,
} from '@progress/kendo-react-inputs';
const FormNumericTextBox = (fieldRenderProps) => {
  const {
    validationMessage,
    touched,
    label,
    id,
    valid,
    disabled,
    hint,
    ...others
  } = fieldRenderProps;
  const showValidationMessage = touched && validationMessage;
  const showHint = !showValidationMessage && hint;
  const hintId = showHint ? `${id}_hint` : '';
  const errorId = showValidationMessage ? `${id}_error` : '';
  return (
    <FieldWrapper>
      <Label editorId={id} editorValid={valid} editorDisabled={disabled}>
        {label}
      </Label>
      <NumericTextBox
        ariaDescribedBy={`${hintId} ${errorId}`}
        valid={valid}
        id={id}
        disabled={disabled}
        {...others}
      />
      {showHint && <Hint id={hintId}>{hint}</Hint>}
      {showValidationMessage && <Error id={errorId}>{validationMessage}</Error>}
    </FieldWrapper>
  );
};
const App = () => {
  const handleSubmit = (dataItem) => alert(JSON.stringify(dataItem, null, 2));
  return (
    <Form
      onSubmit={handleSubmit}
      initialValues={{
        genderselected: genders,
      }}
      render={(formRenderProps) => (
        <FormElement
          style={{
            width: 400,
          }}
        >
          <Field
            id={'Kilometers'}
            name={'Kilometers'}
            label={'Kilometers'}
            component={FormNumericTextBox}
          />
          <Field
            id={'Miles:'}
            name={'Miles:'}
            label={'Miles:'}
            component={FormNumericTextBox}
          />
          <div className="k-form-buttons">
            <Button
              themeColor={'primary'}
              type={'submit'}
              disabled={!formRenderProps.allowSubmit}
            >
              Submit
            </Button>
            <Button onClick={formRenderProps.onFormReset}>Clear</Button>
          </div>
        </FormElement>
      )}
    />
  );
};
ReactDOM.render(<App />, document.querySelector('my-app'));

Form

answered on 20 Jun 2023

3 answers

527 views

Vite + SCSS + kendo-theme-fluent: Customizing theme

Hello.

I try to understand how to do a theme customization. I created a sample project on stackblitz to try to overload the fluent theme variables in a project created with Vite.js; SASS; and React.

My problem is that I can't get changing the primary variable to change the color of the button. If anyone will have the answer to this problem.

Thanks in advance.

Styling / Themes

answered on 20 Jun 2023

1 answer

137 views

[Solved] Customizing theme with Dart Sass results in compile error

Hello,

I'm using latest next.js framework, with Dart Sass 1.63.4. I've been trying to customize material theme, see:

Sample app

However, I'm encountering this error:

Syntax error: Selector "[hidden]" is not pure (pure selectors must contain at least one local class or id)

I've been following the documentation.

Styling / Themes

updated answer on 20 Jun 2023

1 answer

134 views

Chart component keyboard event support.

Hi All,

IS there any chance to add keyboard event support like tab stop for Chart component interaction events?

Or is there any demo to best practice of doing that?

Accessibility

Charts

answered on 20 Jun 2023

1 answer

105 views

KendoReact Charts Pattern Fill

Is there an out of the box, or an example of a customization, for adding pattern fills to Charts?

I know that custom svg treatments can be added via the ChartSeriesItem visual prop but I wasn't sure if that was the correct approach or if there was a simpler method.

I also want to understand if all charts can have pattern fills or if there are limitations.

We are doing an accessibility audit and adding patterns was suggested as an accessibility enhancement.

Thanks in advance.

Accessibility

Charts

answered on 19 Jun 2023