Progress® KendoReact Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 05 Jun 2023 15:38 by ADMIN
David
Created on: 02 Jul 2021 11:07
Category: KendoReact
Type: Feature Request
5
KendoReact Easier Implementation Of Custom Grid Cells

Hi,

I would like to be able to specify a Grid Column template for the data without having to replicate the entire cell and its properties. Please see below for justification:

Consider the following example of KendoReact Grid Cell customisation: https://www.telerik.com/kendo-react-ui/components/grid/styling/#toc-adding-custom-cells

Following this approach results in the loss of a lot of properties from the grid cell compared with 'default' cells e.g.

<td colspan="1" class="" role="gridcell" aria-colindex="1" aria-selected="false" data-grid-col-index="0">Chai</td>
<td style="background-color: rgba(55, 180, 0, 0.32);">18 <span class="k-icon k-i-sort-asc-sm"></span></td>

These properties are important for many reasons including accessibility. There is another example of KendoReact Grid Cell customisation that preserves these properties here: https://www.telerik.com/kendo-react-ui/components/grid/cells/#toc-customization

e.g.

<td colspan="1" class="" role="gridcell" aria-colindex="4" aria-selected="false" data-grid-col-index="3">39</td>
<td colspan="1" role="gridcell" aria-colindex="5" aria-selected="false" data-grid-col-index="4" style="color: red;">false</td>

However, there is a considerable amount of code required to achieve this:

const CustomCell = (props) => {
  const field = props.field || "";
  const value = props.dataItem[field];
  const navigationAttributes = useTableKeyboardNavigation(props.id);
  return (
    <td
      style={{
        color: value ? props.myProp[0].color : props.myProp[1].color,
      }}
      colSpan={props.colSpan}
      role={"gridcell"}
      aria-colindex={props.ariaColumnIndex}
      aria-selected={props.isSelected}
      {...{
        [GRID_COL_INDEX_ATTRIBUTE]: props.columnIndex,
      }}
      {...navigationAttributes}
    >
      {value === null ? "" : props.dataItem[field].toString()}
    </td>
  );
};

I would like to be able to define a template for a cell without having to specify these properties every time.

Kind regards,

David

4 comments
ADMIN
Konstantin Dikov
Posted on: 05 Jun 2023 15:38

Hi David,

I was not able to find any information regarding the status of the item and why it was changed to "Completed", but as far as I am aware, the "cell" property was designed to replace the entire TD element. As for a "template" or "cellContent" option, I do find this request reasonable and I will talk with the team for a possibility for adding such option as a built-in feature in the GridColumn. 

As a temporary solution, I have created an ExtendedGridCell component that uses the default rendering, but replaces the content if such is passed to it:

const ProductCell = (props) => {
  let content = <span>{'> ' + props.dataItem[props.field]}</span>;
  return <ExtendedGridCell {...props} content={content} />;
};

 

Best Regards,
Konstantin Dikov
Progress Telerik

As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.
David
Posted on: 01 Jun 2023 01:17

Hi,

This item was marked as completed. Could you please point us towards the documentation describing how to specify a custom GridCell without having to replicate the entire cell and its properties?

Kind regards,

David

David
Posted on: 07 Jul 2021 04:34

Thanks Stefan,

That would be good, all we want to do is specify the children of the cell <td>.

Kind regards,
David

ADMIN
Stefan
Posted on: 02 Jul 2021 11:40

Hello, David,

Thank you for the details and the request.

We will monitor its popularity and discuss the available options.

We are also considering providing the internal component that has the default cell and allows only changing some props. This can be seen as an option in the Scheduler customization:

https://www.telerik.com/kendo-react-ui/components/scheduler/customization/items/

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Create an account Log In
View
Type
Status
Category