Hi, I'm having problems trying to render grouped columns:
I have this grid:
/**
* Renderiza una columna del grid.
*/
const renderColumn = useCallback(
(col: ColumnDef<T>, index: number) => (
<GridColumn
key={index}
field={col.field as string}
title={col.title}
width={col.width}
sortable={col.sortable}
filterable={col.filterable}
filter={enableFiltering ? col.filter : undefined}
cell={CustomCell}
resizable
/>
),
[enableFiltering]
);
/**
* Memoizar las columnas para evitar renderizados innecesarios.
*/
const renderedColumns = useMemo(() => {
if (columnsRowGrouped && !columns) {
return columnsRowGrouped.map((group, groupIndex) => (
<GridColumn key={groupIndex} title={group.title}>
{group.columns.map((col, colIndex) =>
renderColumn(col, colIndex)
)}
</GridColumn>
));
}
if (columns && !columnsRowGrouped) {
return columns.map((col, index) => renderColumn(col, index));
}
return null;
}, [columns, columnsRowGrouped, renderColumn]);
return (
<div
className={`${styles.telerik_generic_grid}`}
style={gridProps.style}
>
<LocalizationProvider language="es-ES">
<IntlProvider locale="es">
<ExcelExport
ref={_export}
data={Array.isArray(data) ? data : (data as DataResult).data || []}
fileName={exportFileName}
>
<Grid
id={id}
ref={grid}
className={`${gridProps.className || 'w-full'}`}
data={serverPaging ? data : localData.data}
total={serverPaging ? totalCount : localData.total}
pageable={enablePaging ? pageable : false}
sortable={enableSorting ? gridProps.sortable : false}
onSortChange={gridProps.onSortChange}
onPageChange={gridProps.onPageChange}
filterable={enableFiltering ? gridProps.filterable : false}
skip={dataState.skip}
take={dataState.take}
sort={dataState.sort}
resizable={gridProps.resizable}
style={{ width: '100%' }}
scrollable="scrollable"
onDataStateChange={handleDataStateChange}
onSelectionChange={gridProps.onSelectionChange}
{...gridProps}
>
{renderedColumns}
</Grid>
</ExcelExport>
</IntlProvider>
</LocalizationProvider>
</div>
);
}
with this data for example :
const sampleColumnsRowGrouped = [
{
title: "Grupo 1",
columns: [
{ field: "field1" as "field1", title: "Campo 1", width: "auto" },
{ field: "field2" as "field2", title: "Campo 2", width: "auto" },
],
},
{
title: "Grupo 2",
columns: [
{ field: "field3" as "field3", title: "Campo 3", width: "auto" },
{ field: "field4" as "field4", title: "Campo 4", width: "auto" },
],
},
];
const sampleData = [
{
field1: "Dato 1",
field2: "Dato 2",
field3: "Dato 3",
field4: "Dato 4",
},
];
da esta respuesta
y este html
<div class="telerik-generic-grid_telerik_generic_grid__tK_ST">
<div id="joins__grid_" style="width:100%" class="k-grid k-grid-md w-full" data-keyboardnavscope="true">
<div class="k-grid-aria-root" role="grid" aria-colcount="4" aria-rowcount="1" id="joins__grid_-role-element-id" aria-label="Table">
<div class="k-grid-header" role="presentation">
<div class="k-grid-header-wrap" style="border-width:0" role="presentation">
<table class="k-table k-grid-header-table k-table-md" role="presentation">
<colgroup>
<col width="NaNpx">
<col width="NaNpx">
<col width="NaNpx">
<col width="NaNpx">
</colgroup>
<thead class="k-table-thead" role="rowgroup" data-keyboardnavheader="true">
<tr class="k-table-row" style="touch-action:none" role="row" aria-rowindex="1">
<th aria-sort="none" aria-colindex="1" aria-selected="false" colspan="32" rowspan="1" role="columnheader" class="k-table-th k-header" style="left: 0px; right: 0px;">
<span class="k-cell-inner">
<span class="k-link !k-cursor-default">
<span class="k-column-title">Grupo 1</span>
</span>
</span>
<span class="k-column-resizer" style="touch-action:none" draggable="false"></span>
</th>
<th aria-sort="none" aria-colindex="33" aria-selected="false" colspan="32" rowspan="1" role="columnheader" class="k-table-th k-header" style="left: 0px; right: 0px;">
<span class="k-cell-inner">
<span class="k-link !k-cursor-default">
<span class="k-column-title">Grupo 2</span>
</span>
</span>
<span class="k-column-resizer" style="touch-action:none" draggable="false"></span>
</th>
</tr>
<tr class="k-table-row" style="touch-action:none" role="row" aria-rowindex="2">
<th aria-sort="none" aria-colindex="1" aria-selected="false" colspan="1" rowspan="1" role="columnheader" class="k-table-th k-header" style="left: 0px; right: 0px;">
<span class="k-cell-inner">
<span class="k-link !k-cursor-default">
<span class="k-column-title">Campo 1</span>
</span>
</span>
<span class="k-column-resizer" style="touch-action:none" draggable="false"></span>
</th>
<th aria-sort="none" aria-colindex="2" aria-selected="false" colspan="1" rowspan="1" role="columnheader" class="k-table-th k-header" style="left: 0px; right: 0px;">
<span class="k-cell-inner">
<span class="k-link !k-cursor-default">
<span class="k-column-title">Campo 2</span>
</span>
</span>
<span class="k-column-resizer" style="touch-action:none" draggable="false"></span>
</th>
<th aria-sort="none" aria-colindex="3" aria-selected="false" colspan="1" rowspan="1" role="columnheader" class="k-table-th k-header" style="left: 0px; right: 0px;">
<span class="k-cell-inner">
<span class="k-link !k-cursor-default">
<span class="k-column-title">Campo 3</span>
</span>
</span>
<span class="k-column-resizer" style="touch-action:none" draggable="false"></span>
</th>
<th aria-sort="none" aria-colindex="4" aria-selected="false" colspan="1" rowspan="1" role="columnheader" class="k-table-th k-header" style="left: 0px; right: 0px;">
<span class="k-cell-inner">
<span class="k-link !k-cursor-default">
<span class="k-column-title">Campo 4</span>
</span>
</span>
<span class="k-column-resizer" style="touch-action:none" draggable="false"></span>
</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="k-grid-container" role="presentation">
<div class="k-grid-content k-virtual-content" role="presentation">
<div class="k-grid-table-wrap" role="presentation">
<table class="k-table k-grid-table k-table-md" role="presentation">
<colgroup>
<col width="NaNpx">
<col width="NaNpx">
<col width="NaNpx">
<col width="NaNpx">
</colgroup>
<tbody class="k-table-tbody" role="rowgroup" data-keyboardnavbody="true">
<tr class="k-table-row k-master-row" role="row" aria-rowindex="3" absolute-row-index="0" data-grid-row-index="0">
<td>Dato 1</td>
<td>Dato 2</td>
<td>Dato 3</td>
<td>Dato 4</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="k-pager k-pager-md k-grid-pager" role="application" aria-roledescription="pager" aria-label="Page 1 of 1" tabindex="0">
<div class="k-pager-numbers-wrap">
<button title="Go to the first page" role="button" aria-disabled="true" tabindex="-1" class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button k-pager-nav k-pager-first k-disabled">
<span class="k-icon k-svg-icon k-svg-i-caret-alt-to-left k-button-icon" aria-hidden="true">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M352 384 160 256l192-128zM128 128v256h32V128z"></path>
</svg>
</span>
</button>
<button title="Go to the previous page" role="button" aria-disabled="true" tabindex="-1" class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button k-pager-nav k-disabled">
<span class="k-icon k-svg-icon k-svg-i-caret-alt-left k-button-icon" aria-hidden="true">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="m160 256 192-128v256z"></path>
</svg>
</span>
</button>
<select style="width:5em;margin:0px 1em;display:none" class="k-picker k-dropdown-list k-dropdown k-rounded-md k-picker-md">
<option selected="">1</option>
</select>
<div class="k-pager-numbers">
<button role="button" aria-label="Page 1" aria-current="true" tabindex="-1" class="k-button k-button-md k-button-flat k-button-flat-primary k-selected">
<span class="k-button-text">1</span>
</button>
</div>
<button title="Go to the next page" role="button" aria-disabled="true" tabindex="-1" class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button k-pager-nav k-disabled">
<span class="k-icon k-svg-icon k-svg-i-caret-alt-right k-button-icon" aria-hidden="true">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M352 256 160 384V128z"></path>
</svg>
</span>
</button>
<button title="Go to the last page" role="button" aria-disabled="true" tabindex="-1" class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button k-pager-nav k-pager-last k-disabled">
<span class="k-icon k-svg-icon k-svg-i-caret-alt-to-right k-button-icon" aria-hidden="true">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="m128 128 192 128-192 128zm224 256V128h-32v256z"></path>
</svg>
</span>
</button>
</div>
<span class="k-pager-sizes">
<span class="k-dropdownlist k-picker k-picker-md k-picker-solid k-rounded-md" tabindex="-1" role="combobox" aria-required="false" aria-haspopup="listbox" aria-expanded="false" aria-owns=":R1lqukq:-listbox-id" aria-label="Page size" aria-describedby=":R1lqukq:-accessibility-id" aria-controls=":R1lqukq:-listbox-id" id=":R1lqukq:">
<span id=":R1lqukq:-accessibility-id" class="k-input-inner">
<span class="k-input-value-text">10</span>
</span>
<button tabindex="-1" type="button" aria-label="select" class="k-button k-button-md k-button-solid k-button-solid-base k-icon-button k-input-button">
<span class="k-icon k-svg-icon k-svg-i-caret-alt-down k-button-icon" aria-hidden="true">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M256 352 128 160h256z"></path>
</svg>
</span>
</button>
<select tabindex="-1" aria-hidden="true" style="opacity:0;width:1px;border:0;z-index:-1;position:absolute;left:50%">
<option value="10"></option>
</select>
</span>
<span>items per page</span>
</span>
<span class="k-pager-info">1 - 1 of 1 items</span>
</div>
</div>
</div>If you see the colspan that it generates for the parent columns it is 32 and it should be 2 each.
If someone could help me, I've been trying for a while and nothing, thank you very much in advance
1 Answer, 1 is accepted
0
Hello, Fernando,
Thank you for the screenshot and code snippet provided. Can you clarify if the desired result is similar to our Multi-Column Headers example as this is what the screenshot suggests rather than Grouping? I created an example extracting the code from the snippet but the result from it differs from the screenshot since I did not provide any data for the `columns` object and did not use it in the rendering process:
Please check the above example and if needed provide further details about the desired result and if possible modify the example to reproduce the issue displayed in the picture.
Regards,
Yanko
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.