Questions on KendoReact Forum

1 answer

276 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

313 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

140 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.2K+ 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

236 views

[Solved] 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

125 views

[Solved] 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

1 answer

150 views

TimePicker focus next field

We are currently working on an app consisting of micro frontends using both React and Angular modules. We use Kendo for both but there's an inconsistency between the Angular and React app when it comes to the TimePicker component. In the Angular version, if the user completes the first section of the TimePicker where we have hours:minutes, after entering 2 characters for the hour field it automatically jumps to the next section without having to press the arrow button. In the React component, once the user completes the first 2 characters for the hours section, the focus doesn't switch to minutes until the user presses the arrow button to manually navigate there.

Is there any possibility to obtain the same functionality for React where the focus automatically changes?

So far I tried both using the reference of the TimePicker component to obtain this behavior and also the solution suggested for the JQuery version where it's recommended to use event listeners and simulate the button press with a dispatched event but none seemed to work.

TimePicker

answered on 29 May 2023

0 answers

288 views

How to load custom cell into dynamic grid column with custom component and its props?

Hi,

I am currently facing a challenge with implementing dynamic grid columns with custom cells, along with column lock functionality. I have attempted to address this issue by creating a separate file for the grid configuration, where I define all the column properties and provide template names.

Here is an excerpt from my "gridConfig.tsx" file:

let CommandCell = (props: GridCellProps) => <MyCommandCell {...props} deleteData={deleteData} edit={enterEdit} remove={remove} add={add} discard={discard} update={update} newId={newId} cancel={cancel} editField={editField} />
let CommandCell1 = (props: GridCellProps) => <DropDownConnection {...props} alldata1={dropDownDataConnection} keyField="id" textField="connectionName"/>

const columnDefinitions = [{

field: SELECTED_FIELD,
title: "",
width: "50px",
filterable: false,
headerSelectionValue:
data.findIndex((item) => !selectedState[idGetter(item)]) === -1,
selected: false,
show: true,
},
{
field: "id",
title: "ID",
filter: "numeric",
width: "200px",
template: ColumnMenuCheckboxFilter,
editable: false,
selected: false,
show: false,
},
{
field: "tenantId",
title: "Tenant Id",
filter: "numeric",
width: "200px",
template: ColumnMenuCheckboxFilter,
editable: false,
selected: false,
show: false,
},
{
field: "connectionId",
title: "Connection Id",
filter: "text",
width: "200px",
template: ColumnMenuCheckboxFilter,
editable: false,
cell: CommandCell1,
selected: false,
show: true,
}]

In the "GridComponent.tsx" file, I have utilized the column definitions as follows:

<Column field={SELECTED_FIELD} width="50px" headerSelectionValue={data.findIndex((item) => !selectedState[idGetter(item)]) === -1} filterable={false} />
{columnDefinitions.map((column, index) => column.show &&
<Column key={index} field={column.field} title={column.title} width={column?.width} cell= {column.cell}editable={column?.editable} />
)}
<Column title="Action Buttons" cell={CommandCell} width="200px" locked filterable={false} />

The issue I am encountering is related to passing props, as I am unable to include component code directly within the grid configuration. Could you please assist me in finding a solution to this problem?

Thank you very much in advance for your kind support!

Grid

asked on 29 May 2023

2 answers

305 views

DateTimePicker show date incorrect

Hi ,

Today is 3/08/2023. I tried to create 2 DateTimePicker controls as code below

const effDate2 = new Date( "2023-03-03");

consttoday = newDate(); 
 <div className="mb-3">
                  <Label> Effective Date </Label> 
                  <DatePicker name = 'effectiveDate' value ={effDate2} onChange={handleDatePickerChange} /> 
                  
                </div>
                <div className="mb-3">
                  <Label> Today  </Label> 
                  <DatePicker name = 'today' value ={today} onChange={handleDatePickerChange} /> 
                 
                </div>