Code sandbox which reproduces the error: pensive-galileo-ksx7nr - CodeSandbox (you need to click to expand a row, then you will have an inner grid, try to click on items inside and see how outer grid selection changes)
I have a Grid and in details row I have another grid (detailRow={MyCoponentWithAnotherGrid}). When I click on the row within the inner grid, also the outer grid fires the event onSelectionChange. It is normal but inside the event for this outer grid, I have info that the even was fired for the outer grid but the endRowIndex property of the event shows that the item clicked had index from the inner grid. Because of that, when I use
getSelectedState({
event,
selectedState: selectedState,
dataItemKey: DATA_ITEM_KEY,
});
It returns me the new selection which selects the item under the same index as in the inner grid... but this event is in the outer grid. So If i have a grid like this:
- Item 1 - Item 1.1 - Item 1.2 -Item 2
Hello,
I'm having trouble with KendoReact Grid data. The data is in a complex JSON format, and I'm not sure how to properly display it on the grid. The JSON data changes dynamically, so I can't predetermine its structure for the return for this format.
<GridColumn field="ProductID" title="ID" width="40px" />
<GridColumn field="ProductName" title="Name" width="250px" />
<GridColumn field="Category.CategoryName" title="CategoryName" />
<GridColumn field="UnitPrice" title="Price" />
<GridColumn field="UnitsInStock" title="In stock" />
I'm using the Map
function to dynamically show the data, but it's leading to multiple instances of data being displayed as [object, object]
Can you offer some guidance on how to address this problem?
this is my code link.
https://stackblitz.com/edit/react-v7tmhx?file=app%2Fproducts.json,app%2Fmain.jsx
Hi.
I get a weird warning when I use a simple DataGrid component:
[webpack-dev-server] WARNING in ../../node_modules/@progress/kendo-react-grid/dist/es/Grid.js 857:8-18 export 'updateLeft' (imported as 'updateLeft') was not found in '@progress/kendo-react-data-tools' (possible exports: BooleanFilter, BooleanFilterCell, ColumnDefaultProps, ColumnMenuBooleanColumn, ColumnMenuBooleanFilter, ColumnMenuDateColumn, ColumnMenuDateFilter, ColumnMenuFilterForm, ColumnMenuFilterLogic, ColumnMenuForm, ColumnMenuItem, ColumnMenuNumericColumn, ColumnMenuNumericFilter, ColumnMenuOperators, ColumnMenuTextColumn, ColumnMenuTextFilter, ColumnResize, CommonDragLogic, DateFilter, DateFilterCell, DragClue, DropClue, EnumFilter, Expression, FILTER_ROW_CLASS, FOCUSABLE_ELEMENTS, Filter, FilterRow, Group, Header, HeaderCell, HeaderRow, HeaderSelectionCell, HeaderThElement, KEYBOARD_NAV_DATA_BODY, KEYBOARD_NAV_DATA_HEADER, KEYBOARD_NAV_DATA_ID, KEYBOARD_NAV_DATA_LEVEL, KEYBOARD_NAV_DATA_SCOPE, KEYBOARD_NAV_DATA_ZONE, KEYBOARD_NAV_FILTER_COL_SUFFIX, NumericFilter, NumericFilterCell, Operators, Pager, TABBABLE_ELEMENTS, TABLE_COL_INDEX_ATTRIBUTE, TABLE_PREVENT_SELECTION_ELEMENT, TABLE_ROW_INDEX_ATTRIBUTE, TableKeyboardNavigationContext, TableSelection, TextFilter, TextFilterCell, closestTagName, createFilterComponent, filterBy, getColumnIndex, getGroupIds, getIndex, getOffset, getRowIndex, getSelectedState, getSelectedStateFromKeyDown, getSelectionOptions, isRtl, mapColumns, normalize, orderBy, readColumns, relativeContextElement, setExpandedState, setGroupIds, setSelectedState, stringOperator, tableColumnsVirtualization, tableKeyboardNavigation, tableKeyboardNavigationBodyAttributes, tableKeyboardNavigationHeaderAttributes, tableKeyboardNavigationScopeAttributes, tableKeyboardNavigationTools, unaryOperator, useTableKeyboardNavigation)
My Grid just looks like this:
<Grid data={data} pageable={true}>
<Column title="Modul" field="id" />
<Column title="Typ" field="type" />
<Column title="Aktion" cell={ActionCell} />
</Grid>
So there is nothing special in it. The ActionCell just includes a few buttons inside of a <td></td>
I'm using version 5.16.1
Greetings,
Bernd
const handleTaskBoardChange = React.useCallback((event) => {
if (event.type === "task") {
setTaskData(event.data);
// Get new order of moved item
var allItemsAtDroppedStatus = event.data.filter(x => { return x.status === event.item.status });
var newOrder = allItemsAtDroppedStatus.findIndex(x => { return x.id === event.item.id }) + 1;
var data = { id: event.item.id, previousCampaignProjectStageType: event.previousItem.status, newCampaignProjectStageType: event.item.status, order: newOrder, };
updateCampaignTaskBoardStage(data)
.then((response) => {
loadTaskBoardData();
})
.catch((response) => {
});
}
}, []);
const createSlots = (
startDate: Date,
endDate: Date,
durationMinutes: number,
ogSlot: Slot
) => {
const slots = [] as Slot[];
debugger;
const currentSlot = dayjs(startDate);
const endDateTime = dayjs(endDate);
let slt = currentSlot;
let index = 0;
while (slt.isBefore(endDateTime)) {
let nextSlotStart = slt.add(durationMinutes, 'minute');
slots.push({
start: slt.toDate(),
end: nextSlotStart.toDate(),
group: ogSlot.group,
index: index,
} as Slot);
slt = nextSlotStart;
index++;
}
return slots;
};
const customSchedulerItem = (props: SchedulerItemProps) => {
var s = { ...props };
let customSlots = createSlots(
props.start,
props.end,
60 * 6,
props.slots[0]
);
return (
<Tooltip openDelay={100} position="bottom" anchorElement="pointer">
<SchedulerItem
{...props}
slots={customSlots}
style={{
...s.style,
textAlign: 'start',
}}
/>
</Tooltip>
);
};
const data = () => [
{
key: "1",
item_one: "Item_One One",
item_two: "Item_Two Two",
item_three: 5,
item_four_one: "Item_Four_One 1",
item_four_two: "Item_Four_Two 2",
item_four_three: "Item_Four_Three 1",
selected: false
},
{
key: "2",
item_one: "Item_One One",
item_two: "Item_Two Three",
item_three: 6,
item_four_one: "Item_Four_One 1",
item_four_two: "Item_Four_Two 2",
item_four_three: "Item_Four_Three 1",
selected: false
},
{
key: "3",
item_one: "Item_One Two",
item_two: "Item_Two Five",
item_three: 1,
item_four_one: "Item_Four_One 1",
item_four_two: "Item_Four_Two 2",
item_four_three: "Item_Four_Three 1",
selected: false
},
{
key: "4",
item_one: "Item_One Two",
item_two: "Item_Two Three",
item_three: 6,
item_four_one: "Item_Four_One 1",
item_four_two: "Item_Four_Two 2",
item_four_three: "Item_Four_Three 1",
selected: false
}
];
const columns = (): Column[] => [
{
field: "item_one",
title: "Item One",
filterType: "text",
},
{
field: "item_two",
title: "Item Two",
filterType: "text",
},
{
field: "item_three",
title: "Item Three",
filterType: "numeric",
},
{
field: "item_four",
title: "Item Four",
children: [
{
field: "item_four_one",
title: "Item Four One"
},
{
field: "item_four_two",
title: "Item Four Two",
},
{
field: "item_four_three",
title: "Item Four three",
}
]
},
];
const groups = [
{field: "item_one", aggregates: [{ field: "item_three", aggregate: "sum" }] },
{field: "item_two", aggregates: [{ field: "item_three", aggregate: "sum" }] }
];
const groupRenderer = (aggregates, field) => {
const aggregate = aggregates.item_three.sum;
if (field === "item_three") {
return(aggregate && <> Total Item Three: {aggregate} </>)
}
return null;
}
const excelReportColumns = columns.map((column) => {
return {
field: column.field,
title: column.title,
children: column.children,
groupHeader: (props: ExcelExportGroupHeaderProps) => groupRenderer(props.aggregates, props.field),
} as ExcelExportColumnProps;
}
return (
<ExcelExport
{...restExcelExportProps}
creator={author}
data={process(data, { sort: sortDesc, filter: filterDesc, group: groups }).data}
ref={excelExporter}
columns={excelReportColumns}
group={groups}
>
</ExcelExport>
)
const excelReportColumns = columns.map((column) => {
return {
field: column.field,
title: column.title,
children: column.children,
groupFooter: (props: ExcelExportGroupFooterProps) => groupRenderer(props.aggregates, props.field),
} as ExcelExportColumnProps;
}
export interface ExcelExportColumnProps extends ColumnBase {
/**
* The options of the column data cells.
*/
cellOptions?: CellOptions;
/**
* The field to which the column is bound.
*/
field?: string;
/**
* The options of the column footer cell.
*/
footerCellOptions?: CellOptions;
/**
* The column footer. Can be a function or a React component.
*/
footer?: Function | ExcelExportFooter;
/**
* The options of the column group footer cells.
*/
groupFooterCellOptions?: CellOptions;
/**
* The header of the group. Can be a function or a React component.
*/
groupHeader?: Function | ExcelExportGroupHeader;
/**
* The footer of the group. Can be a function or a React component.
*/
groupHeader?: Function | ExcelExportGroupFooter;
/**
* The options of the column group header cells.
*/
groupHeaderCellOptions?: CellOptions;
}
I have a grid where the columns don't align properly with the header of the grid and also the grid unnecessarily has a horizontal scrollbar where it's not needed.
1)How can I make the scrollbar appear when there are more columns and not when there are one or two columns?
2)How to make the alignment in sync ?