Questions on KendoReact Forum

2 answers

288 views

Grid takes over sibling elements with width property is set.

I am working with the KendoReact data grid for a SPA. The idea is that many elements on the page stay consistent, like a navigation bar and footer, and each 'page' is just different content being conditionally rendered inside of that frame.

In this screenshot a very basic diagram is shown color coding sort of how this is laid out. The root contains the constant elements like the left navbar or footer. And react-router switches the inner content around depending on the route chosen. For this page, a div exists to house a backdrop image (blue area). And another div provides a background for the pages elements (pink). Inside that div is titles, buttons, etc. and then a Kendo grid.

A basic layout for my markup is as follows:

<div className="flex flex-col w-screen h-screen fixed">
<div className="flex flex-grow overflow-hidden">
<LeftNavigationBar />
<TablePage> 
<div className="w-full h-full p-8 justify-center">
 <div className="h-full w-full overflow-y-auto flex flex-col">
<Grid>
</div>
</div>

</TablePage>
</div>
<Footer />
</div>

The issue I am having is with width sizing. My goal is that I can set some sort of minWidth property on them. I want them to proportionally size up to fit the component size, but once the window is small enough the columns reach their minsize, the grid will shrink and use horizontal scrolling instead.

I read through a few docs to get this working, but none of them were quite right. The first example on This page is almost exactly what I am looking for. And I tried implimenting this solution. The problem is with my navbar and other consistent elements. It looks like the column width setting causes the table to override the widths of everything else on the page.

This screenshot is a rough diagram representing what is happening. When I shrink the window it will actually start to overlap my other elements until the columns reach a minsize, and then the scrollbar is shown.

So my question boils down to how I may be able to implement my solution while keeping the width of my other persistent elements as a priority. Thank you for taking the time and let me know if I can clarify the question or send additional items to help.

Grid

Styling / Themes

updated answer on 27 Jun 2023

1 answer

193 views

Kendo React Scheduler Delete Item

Hi support team,

I am using React Scheduler. I was trying to delete event from Scheduler. I used onDataChange event as example in website. But When I delete, deleted array is empty and updated array returned with useless data. Please guide me how to fix it.

const handleDataChange = async ({
        created,
        updated,
        deleted,
      }: SchedulerDataChangeEvent) => {}

Scheduler

answered on 27 Jun 2023

1 answer

137 views

@progress/kendo-react-pdf

In kendo react pdf how to apply header for all pages. using <pdfExport>

PDF Processing

PDF Viewer

answered on 23 Jun 2023

1 answer

756 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

114 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

148 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

156 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

186 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

510 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