Questions on KendoReact Forum

1 answer

104 views

Error to destructure useLocalization Hook

Hello guys,

I realized that it's not possible to destructure the useLocalization hook, when destructure, it causes an error. I made an example to demonstrate the problem.

const { toLanguageString } = useLocalization(); //THROW AN ERROR
const localization = useLocalization(); //NORMAL

xenodochial-dan-prqfvt - CodeSandbox

Is this actually expected or is it just a bug?

Thanks,

Gabriel.

General Discussions

answered on 08 Jun 2023

3 answers

2.2K+ views

Form Validation with Default Values

I am using @progress/kendo-react-form with @progress/kendo-react-inputs to create a form. I am using the form to edit existing data, and to add new records as well, populated from and saved to a db server.

To get the data for existing records to display, I am using defaultValue for each input. However, when trying to validate the form, validation only registers that the form element actually has data when it has been changed through user input.

So if I open a form and change one field, other fields that had not been changed, and which still show the defaultValue value, are considered invalid.

What is the best practice way to use form validation on a form used for editing existing data?

Here is a really simple example:

https://stackblitz.com/edit/react-5phafx

General Discussions

answered on 07 Jun 2023

1 answer

165 views

MultiColumnComboBox Columns misaligned if there isn't enough data for a scrollbar

As per the heading, all the demos on the KendoReact MultiColumnComboBox have a lot of hardcoded data which results in a scrollbar being rendered in the popup. If you only have a few items, then no scrollbar is rendered and the column headers are misaligned with the data rows:

https://stackblitz.com/edit/react-gwftb5?file=app%2Fmain.tsx

Kind regards,

David

ComboBox

answered on 02 Jun 2023

1 answer

162 views

Is it possible to show a Date in a MultiColumnComboBox?

As per the question, the documentation mentions nothing about the data types you can show in MultiColumnComboBox columns. If you modify any of the examples in the component documentation to include a Date field, the component blows up when you expand the ComboBox:

https://stackblitz.com/edit/react-biiakp?file=app%2Fmain.tsx

Is this a bug, or should the documentation state that you must format all data to primitive types for use in a MultiColumnComboBox?

Kind regards,

David

ComboBox

answered on 02 Jun 2023

1 answer

210 views

Re-mounting issue in kendo react grid with template while state update

Hi Team,

I have rendered the Kendo react grid component with template in below cases.

Template declared as nested react component (child1) of grid (parent1)
Template declared as react component (child2) outside of grid (parent2)

As per the react behavior, first case will remount for each state update and second case will not remount.

In Kendo, first case is working properly as per react behavior. But for second case the Kendo component is having re-mounting issues while state update of template.

I have attached a sample for reference below.

Kindly share suggestion to avoid full remounting of template while state updates.

Regards,

SuriyaKumar

Grid

answered on 02 Jun 2023

1 answer

253 views

Export checkbox selected rows to excel

Hi, I am new to using the component library. I would like to export checkbox selected rows to excel through the Datagrid component.

Here is the code that I am using,

import '@progress/kendo-theme-bootstrap/dist/all.css';
import {
  Grid,
  getSelectedState,
  GridToolbar,
  GridColumn,
} from "@progress/kendo-react-grid";
import { ExcelExport, ExcelExportColumn } from '@progress/kendo-react-excel-export';
import { getter } from "@progress/kendo-react-common";
import products from "./products.json";
import { useCallback, useRef, useState } from 'react';
 
const DATA_ITEM_KEY = "ProductID";
const SELECTED_FIELD = "selected";
const idGetter = getter(DATA_ITEM_KEY);
const EDIT_FIELD = "inEdit";
const App = () => {
  const [dataState, setDataState] = useState(
    products.map((dataItem) =>
      Object.assign(
        {
          selected: false,
        },
        dataItem
      )
    )
  );
 
  const [selectedState, setSelectedState] = useState({});
  const onSelectionChange = useCallback(
    (event) => {
      const newSelectedState = getSelectedState({
        event,
        selectedState: selectedState,
        dataItemKey: DATA_ITEM_KEY,
      });
      console.log(event.dataItems)
      setSelectedState(newSelectedState);
    },
    [selectedState]
  );
  const _grid = useRef();
  const _export = useRef(null);
  const excelExport = () => {
    if (_export.current !== null) {
      _export.current.save(products, _grid.current.columns);
    }
  };
  const onHeaderSelectionChange = useCallback((event) => {
    const checkboxElement = event.syntheticEvent.target;
    const checked = checkboxElement.checked;
    const newSelectedState = {};
    event.dataItems.forEach((item) => {
      newSelectedState[idGetter(item)] = checked;
    });
    setSelectedState(newSelectedState);
  }, []);
  console.log(selectedState)
  // console.log(_grid)
  // console.log(_export)
  return (
    <div>
    <ExcelExport  ref={_export}>
    
      <Grid
        data={dataState.map((item) => ({
          ...item,
          [SELECTED_FIELD]: selectedState[idGetter(item)],
        }))}
        style={{
          height: "400px",
        }}
        dataItemKey={DATA_ITEM_KEY}
        selectedField={SELECTED_FIELD}
        selectable={{
          enabled: true,
          drag: false,
          cell: false,
          mode: "multiple",
        }}
        onSelectionChange={onSelectionChange}
        onHeaderSelectionChange={onHeaderSelectionChange}
        ref={_grid}
      >
      <GridToolbar>
          <button
            title="Export Excel"
            className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary"
            onClick={excelExport}
          >
            Export to Excel
          </button>
        </GridToolbar>
        <GridColumn
          field={SELECTED_FIELD}
          width="50px"
          headerSelectionValue={
            dataState.findIndex((item) => !selectedState[idGetter(item)]) === -1
          }
        />
        <GridColumn field="ProductName" title="Product Name" width="300px" />
        <GridColumn field="UnitsInStock" title="Units In Stock" />
        <GridColumn field="UnitsOnOrder" title="Units On Order" />
        <GridColumn field="ReorderLevel" title="Reorder Level" />
      </Grid>
      </ExcelExport>
    </div>
  );
};
export default App

Excel Export

Grid

answered on 01 Jun 2023

0 answers

112 views

Seleted DrawerItem is not visible in windows high contrast theme.

Hi,

As the title, the seleted DrawerItem is not visible in windows high contrast theme.

I selected the last menu (Favourites) and there is nothing to indicate that.

Is there any plan to add some indicator?

Thanks!

Accessibility

Drawer

asked on 31 May 2023

9 answers

1.0K+ views

Grouping in export to excel in kendoReact

Hi,
I am using kendo React in my project. When I am doing grouping on grid and exporting as excel, grouping is not applied in Excel and is download with flat table.

I am sending grouped array in group property of ExcelExport butgrouping is not happening in export to excel.

</Excel Export>

Please let me know is it the expected behaviour for excel or is it an issue.

Thanks

Wrappers for React

answered on 30 May 2023

1 answer

156 views

Hide grouped grid columns automatically

Hi,

How to hide the grouped columns automatically in grid? After a column is grouped (by dragging and dropped into the drag and drop area), I want to hide the columns that have been grouped. See the attached screenshot.

My current approach is to set the column width to zero, resizable to false, minResizableWidth to zero. It works fine so far, but it feels like a hack.

Thanks,

Jie

Grid

answered on 30 May 2023

1 answer

100 views

Animate change in menu items

I have a Kendo Menu that has a custom menu item renderer. Its list of menu items is controlled by Redux, and the items in the list change from time to time. I was wondering if there was a way to animate the transition of menu items when the content changes. Adding an animation to the item renderer didn't seem to make a difference, and the content of the menu still changes without a transition.

Animation

Menu

answered on 29 May 2023