Hi.
I have (kind of) successfully tried to implement the spanning of rows in a Datagrid as you have described here.
Issue 1: My Datagrid uses an edit mode, similar to what is described in the first example here. So if I group some rows together, editing of a single row does not work anymore.
Issue 2: I have defined a special cell rendering for the field because I need a dropdown when editing. I have done that like this:
<Column
field="channel.label"
title="Label"
filter="text"
filterable={true}
cell={ChannelDropDownCell}
/>
The issue is, if I define the cellRender property on the Grid as in your "Spanning of rows" example, the render property of the column seems to take priority and the cellRender method I have attached to the Grid itself doesn't work anymore for that field, because the field doesn't seem to be added to the GridCellProps anymore.
Any idea how to get around this?
Thanks!
Greetings,
Bernd
1 Answer, 1 is accepted
Hello Bernd,
When a custom cell is defined, it will not be included in the cellRender unless the "render" method is not explicitly called within the custom rendering. Here is an example on how to call the render method manually so it can include the cell within the cellRender:
const CustomCell = (props) => {
const field = props.field || '';
const value = props.dataItem[field];
const navigationAttributes = useTableKeyboardNavigation(props.id);
let content = (
<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>
);
return props.render ? props.render.call(undefined, content, props) : content;
};I have bolder the relevant part.
As for the editing, since the cells will be merged, you will have access only to the first dataItem within the custom cell, so I am not sure how the actual update of multiple items will be handled (maybe you can search the matching values within the data and update all instances).
Regards,
Konstantin Dikov
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!