Issue with custom Grid component and Grid Column Component in React column not rendering when passing props

[Akhilesh]

Hi Kendo Team,

I'm working on a React project where I want to create a common reusable component for the Kendo UI Grid so that if there are any changes in the grid properties or behavior, I only need to update them in one place—this way I avoid updating it across the entire project.

Here's an example of how I'm using the Grid:

<Grid
  data={orderBy(staffAuditData, sort).map((item) => ({
    ...item,
    [SELECTED_FIELD]: selectedState[idGetter(item)],
  }))}
  checkboxElement
  style={{
    height: staffAuditData.length > 0 ? "100%" : "250px",
  }}
  dataItemKey={DATA_ITEM_KEY}
  skip={page}
  take={pageSize}
  total={metaData.totalCount}
  onPageChange={pageChange}
  className="pagination-row-cus"
  pageable={{
    pageSizes: [10, 20, 30, 50, 100, 500],
  }}
  sort={sort}
  sortable={true}
  onSortChange={(e) => setSort(e.sort)}
  filterOperators={filterOperators}
  onDataStateChange={dataStateChange}
  onHeaderSelectionChange={onHeaderSelectionChange}
>
  <GridColumn title="Affected Staff" field="affectedStaffName" className="cursor-default" />
  <GridColumn title="Affected By" field="affectedByStaffName" className="cursor-default" />
  <GridColumn title="Section" field="affectedTable" className="cursor-default" />
  <GridColumn title="Action" field="actionName" className="cursor-default" />
  <GridColumn
    title="Date & Time"
    cell={(props) => {
      let date = props.dataItem.utcDateCreated;
      return (
        <td className="cursor-default">
          {moment.utc(date).local().format("M/D/YYYY")} at{" "}
          {moment.utc(date).local().format("hh:mm A")}
        </td>
      );
    }}
  />
</Grid>

import React, { useState } from "react";

import { Grid } from "@progress/kendo-react-grid";

const CommonGrid = ({ data, selectable = true, pageable = true, ...props }) => {

  const [selectedID, setSelectedID] = useState(null);

  const rowClick = (event) => {

    setSelectedID(event.dataItem.id);

  };

  return (

    <Grid

      data={data.map((item) => ({ ...item, selected: item.id === selectedID }))}

      //selectable={selectable}

      pageable={pageable}

      onRowClick={rowClick}

      style={{ width: "100%" }}

      {...props} // Pass any additional props (sorting, filtering, etc.)

    ></Grid>

  );

};

export default CommonGrid;

import React from "react";

import { GridColumn } from "@progress/kendo-react-grid";

const CommonGridColumn = ({ field, title, width, ...props }) => {

  return <GridColumn field={field} title={title} width={width} {...props} />;

}

export default CommonGridColumn;

So I created two common components:

• CommonGridComponent – which handles the Grid wrapper and works fine

• CommonGridColumn – which I'm trying to use to handle columns dynamically

However, when I pass props to CommonGridColumn, the column doesn't show up in the grid. The same column works when used directly with GridColumn. Is there a recommended way to create a wrapper for GridColumn so it behaves correctly?

Any advice or example on how to build a custom reusable GridColumn component would be really helpful.

Thank you!

[Stoyan]

Hello Akhilesh,

Thanks for the provided information.

From the code snippet below, I could see that when using the CommonGrid, the CommonGridColumn is not being passed down to the Grid component. Can you please double-check if this is the case?

If this is not the case, can I ask for a reproducible StackBlitz demo? This will help me understand the problem in the best possible way and provide you with the solution required. Thanks in advance.

I'm awaiting for your reply.

Regards,
Stoyan
Progress Telerik

[Akhilesh]

Hi Stoyan,

I’m working on creating a common reusable component for the Kendo React Grid in my project. I’ve built two components:

1. CustomGrid – a wrapper around the Kendo Grid component where I pass the data and configuration.

2. CustomGridColumn – a wrapper around the Kendo GridColumn component.

When I use CustomGrid with the regular GridColumn inside it, everything works perfectly.

However, when I try to replace GridColumn with my CustomGridColumn component, the columns do not render at all – it's like they're not recognized by the grid. I'm passing all the necessary props and structure correctly, but it's still not working.

Could you please help me understand what might be causing this issue? Is there a special requirement for column components to be recognized by the Grid?

Thanks in advance for your help!

[Stoyan]

Hi Akhilesh,

Thanks for the provided information.

I understand what the issue is, but I cannot see where it might be coming from. In these line of words, can I ask for a reporducible StackBlitz demo. This will help me debug the situation better and provide you the best possible solution.

I'm awaiting for your reply.

Regards,
Stoyan
Progress Telerik