Questions on KendoReact Forum

1 answer

81 views

I'm trying to find a way to be able to wrap the text of a category label if it exceeds a certain character limit. For example,

"This really long category label"

would become

"This really
long category
label"

if it were limited to 15 characters per line. Is there a way to do this either with the default label or with a custom renderer?

Charts

answered on 08 Jun 2023

1 answer

201 views

How do I create a PDF export page template that has both header and footer?

I am creating the functionality to export some data in a PDF using Kendo react pdf generator. I see that with the pageTemplate prop I can pass in a component that is inserted to each page BEFORE the output is produced, this makes it useful to create headers, however I can't find a way to create footers for each page.

PDF Processing

answered on 08 Jun 2023

1 answer

355 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

99 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

158 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

159 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

203 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

244 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