Questions on KendoReact Forum

0 answers

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

97 views

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

119 views

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

135 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

169 views

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

466 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

108 views

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

115 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

87 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

3 answers

399 views

PDFExport German character

Hello,

I am using PDFExport, and in text there are also some German characters (Ü Ö Ä ).

When I open the created PDF, then the text is not right.

Example of created PDF:

I also tried this on StackBlitz and it is the same output.

Text example:

ÜÖÄLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis libero, lobortis ac rutrum quis, varius a velit. Donec lacus erat, cursus sed porta quis, adipiscing et ligula. Duis volutpat, sem pharetra accumsan pharetra, mi ligula cursus felis, ac aliquet leo diam eget risus. Integer facilisis, justo cursus venenatis vehicula, massa nisl tempor sem, in ullamcorper neque mauris in orci.

What can I dot that the text will be displayed correctly.

Thank, you, Matjaz Reberc

PDF Processing

answered on 18 Jun 2023