Questions on KendoReact Forum

1 answer

393 views

groupId and setExpandedState: Combining Grid group expansion and detail row expansion

I have a pretty involved Grid I'm building that involves both grouping and detail rows.

The documentation uses setExpandedState with an array of collapsedIds. This sets the 'expanded' field for everything in the grouped data. It even sets the 'expanded' field for the actual grid rows.

I would like to be able to toggle the detail row and hide it, but in order to do that, I have to create a 'groupId' property for each grid row entry so that setExpandedState doesn't assign 'expanded' as true.

Is there a different way to do this? It seems odd that I would have to set a 'groupId' property each grid row's data when it is not itself a group.

Just upgraded and tested with 5.14.0, but it happened in 5.13 as well.

Grid

answered on 08 Jun 2023

1 answer

110 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.3K+ 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

176 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

170 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

224 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

259 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

113 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.1K+ 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

169 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