I threw together the easy "patch-package" on latest v8.2.0 below and it worked.
But it seems like the developers must have excluded this value for a reason that i should watch out for?
Or if not, any chance we can get it added officially?
my underlying motivation: I see in all the onItemChange demos the suggested "change item" approach is to iterate the data array via .map() and change the corresponding object item based on matching a unique id property... of course this is a longstanding pattern that honors React's need for immutability, but once lists get large, there's a performance hit that could be avoided by directly targeting the item by index along with other immutability/copying approaches, e.g. toSpliced() is now available in modern browsers.
I have an active license and I could submit bug/feature if this is better requested thru that channel.
diff --git a/node_modules/@progress/kendo-react-grid/Grid.mjs b/node_modules/@progress/kendo-react-grid/Grid.mjs
index ff03785..3f6cb09 100644
--- a/node_modules/@progress/kendo-react-grid/Grid.mjs
+++ b/node_modules/@progress/kendo-react-grid/Grid.mjs
@@ -191,7 +191,8 @@ const z = class z extends r.Component {
...this.getArguments(e.syntheticEvent),
dataItem: e.dataItem,
field: e.field,
- value: e.value
+ value: e.value,
+ dataIndex: e.dataIndex
}
);
}, this.onHeaderSelectionChange = (e) => {
I found an example in KendoUI for jQuery here:
https://docs.telerik.com/kendo-ui/knowledge-base/scroll-to-selected-item
How to do it in React TreeView?
Hello.
I have a question. I know, Kendo does not officially support shadow DOM. After all. We were forced to use react grid in the shadow DOM. We have a problem that all pop up windows (paging settings, filter opening) are displayed incorrectly. Without styles and without the possibility to serve the event. Do you have a tip on how to treat it?
Note: Everything works as expected when I define each column component individually, without using the `map` function approach.
Objective: I need to display 20+ columns in the grid, and I want to avoid manually defining each `GridColumn` component. Instead, I would like to dynamically render the columns using the `map` function. In my case, the column headers are custom components, and the column filter functionality should be displayed conditionally.Please find the attached file with implementation.
I kindly request your help. Thank you.
Im using the Gantt Chart libary for React
so what im trying to do is passing a custom date range props in the GanttWeekView
<GanttWeekView dateRange={calculateWeekDateRange}/>
the problem is whenever you pass custom dateRange props to the view, it will cause the date cell on the right not rerender correctly, for example the initial date is 12th September as shown in the pics below
and i change it to 5th, the date doesnt change as shown below,
for some reason i think whenever the custom dateRange passed, it wont rerender the whole Ganttview component if the date changed, any idea how i can fix this?
Hi,
I'm struggling with one issue, when both options filtering and suggestion are enabled, 'onFilterChange' is not triggering when the last character is filled in.
Code example: https://stackblitz.com/edit/react-tahdg9?file=app%2Fapp.tsx
Steps:
Enter: "1" -> event has been triggered
Enter: "11" -> event has been triggered
Enter: "111" -> event has been triggered
Enter: "1111" -> event has not been triggered
Hit backspace -> event has been triggered
Enter again: "1111" -> event has been triggered
Is it a bug or I'm doing something wrong? ;)
Hello,
I recently inherited an old project which was using v5 Kendo libraries. I have upgraded all of these to the latest as of today but in doing so I now am noticing a 'flash' of data before the correct data is rendered. I'm unable to produce a isolated demo but I will try my best to outline the components as minimally as possible.
Before I dive into the code what I have found is that a tableAction of 'getInnerTable' is being called to create and populate the "correct" data and the flash of incorrect data is actually the data supplied to the rowData prop on the Grid component.
Here's the code:
interfaceTableProps<T> {
title?: string;
tableModal?: { onClick: () =>void; text: string };
rowData: T[] | null;
gridDefaultState: State;
isLoading: boolean;
tableActions: {
removeItem?: (data: any) =>void;
updateItem?: (data: any) =>void;
getInnerTable: (
columnField: string,
rowData: T[],
isLastColumn: boolean,
tableActions: {
removeItem?: (data: T) => void;
updateItem?: (data: T) => void;
}
) =>ReactNode;
};
children?: ReactNode;
hasBorder?: boolean;
}
constTable = <T extends {}>({
isLoading,
title,
tableModal,
rowData,
gridDefaultState,
tableActions,
children,
hasBorder = true,
}: TableProps<T>) => {
const [columnFields, setColumnFields] = useState<string[] | null>(null);
const [gridDataState, setGridDataState] = useState<State>(gridDefaultState);
console.log('rowData', rowData);
useEffect(() => {
if (rowData && rowData.length > 0) {
setColumnFields([...Object.keys(rowData[0]), 'Icons']);
}
}, [rowData]);
consthandleGridDataStateChange = (e: GridDataStateChangeEvent) => {
setGridDataState({ ...e.dataState });
};
console.log('columnFields:', columnFields);
constGridTable = () => {
return (
<Grid
data={rowData && process(rowData, gridDataState)}
sortable={true}
{...gridDataState}
onDataStateChange={handleGridDataStateChange}
selectable={{
enabled: true,
mode: 'single',
}}
>
{children}
{rowData &&
columnFields?.map((columnField: string, index) => {
console.log('columnField:', columnField);
const isLastColumn: boolean = columnFields.length - 1 === index;
return tableActions.getInnerTable(columnField, rowData, isLastColumn, tableActions);
})}
</Grid>
);
};
return (
<StyledWrapper noData={!isLoading && !rowData?.length} hasBorder={hasBorder}>
{title && <TitleWithButton title={title} buttonData={tableModal} hasBottomPadding />}
{isLoading ? (
<SpinnerWrapper>
<Spinner />
</SpinnerWrapper>
) : (
<GridTable />
)}
</StyledWrapper>
);
};
exportdefaultTable;
The getInnerTable function:
export const getOrganisationInnerTable = <T,>(
columnField: string,
rowData: Array<T & OrganisationColumn>,
isLastColumn: boolean,
tableActions: {
removeItem?: (data: T) => void;
updateItem?: (data: T) => void;
}
) => {
if (columnField === OrganisationStyledColumns.organisationName) {
return (
<GridColumn
key={columnField}
field="title.name"
title={'Organisation name'}
cell={(props: GridCellProps) => <OrganisationNameColumn {...props} />}
columnMenu={(props) => ColumnFilterSearchMenu(rowData, props)}
/>
);
}
if (columnField === OrganisationStyledColumns.createdDate) {
return (
<GridColumn
key={columnField}
field={columnField}
title={'Added'}
filter="date"
format="{0:dd-MM-yyyy}"
columnMenu={(props) => {
return DateColumnFilter(rowData, props);
}}
/>
);
}
return getInnerTableColumn(columnField, rowData, isLastColumn, tableActions);
};