Questions on KendoReact Forum

1 answer

86 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

110 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

284 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

55 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

81 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

55 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

296 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

1 answer

62 views

Duplicate Problem in Inline edit Fields When Multiple Lines are Added

www.telerik.com
In inLine Edit Field when Adding new Line or create multiple lines with the add new button the input field is duplicating when editing one field. ie, You can now type on the different input and observe duplicates
But i needEvery single inputs here needs to be unique.

Editor

Grid

answered on 16 Jun 2023

1 answer

80 views

When the vertical scroll bar appears on the page, the horizontal scroll bar of Grid cannot be scrolled

Hi,

I have a problem when I use k-grid: When the vertical scroll bar appears on the page, the horizontal scroll bar of k-grid cannot be scrolled with the mouse, but can be scrolled with the touch pad

you can try in React (forked) - StackBlitz

Since my page also needs to display other information, if the height is set for the k-grid, the visible area of the table is too small and not easy to read, what should I do to solve the issue.

Thanks a lot for each help.

Grid

Styling