Telerik Forums
KendoReact Forum
1 answer
86 views

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
and I click on "Item 1.2", then my outer grid selects the item "Item 2". Is this a bug? Can I somehow prevent event bubbling from the inner grid maybe as a workaround?
Konstantin Dikov
Telerik team
 answered on 02 Sep 2023
2 answers
305 views

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

 

 

 

Doug
Top achievements
Rank 2
Iron
Iron
Iron
 answered on 31 Aug 2023
1 answer
289 views

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

 

Vessy
Telerik team
 answered on 31 Aug 2023
1 answer
83 views
When the board change event is raised, is it possible to get the order (or index) of the moved item in the event data.

I am getting this manually like this:


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) => {
                });
        }
    }, []);

I was just wondering if there is something built in that I have missed, if not, this would ideally be included in the event item data for the moved item in order to persist the item orders when saved, it seems like a natural property to have.

Thanks.

note: there is no TaskBoard tag to assign this to.
Mark
Top achievements
Rank 3
Iron
Iron
Iron
 updated question on 29 Aug 2023
1 answer
88 views
Can I add the groupable column and inline editing feature both in a Data Grid?
Konstantin Dikov
Telerik team
 answered on 28 Aug 2023
1 answer
102 views
Hi, I am trying to Implement scheduler with Monthly, Week and Daily Timeline View. The performance of scheduler is really dissapointing when it comes to render large number of slots. After some tweaks with slotDuration and slotDivision, was able to make it work for me.
But there is an issue when using Timeline View. if i have an event that occurs within multiple days period. The Item is divided seperated in parts for each day, because of which the event title is repeated for each item it renders.
After exploring library, tried to implement a custom list of slots rendering for each item which would cover multiple dates for same without repeating, but was unable to achieve it.


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>
    );
  };
Scheduler TimelineView Customization - StackBlitz

Would be happy, if we find a solution for this.


Konstantin Dikov
Telerik team
 answered on 28 Aug 2023
1 answer
70 views
TaskBoard is not in the list of filtering tags or available to tag below the question

Add this to general discussion
Wissam
Telerik team
 answered on 28 Aug 2023
0 answers
302 views
Grid's excel export group header functionality is not working as expected, although Excel export group footer is working as expected.

Project Dependencies: 
        "@progress/kendo-data-query": "1.5.4",
        "@progress/kendo-drawing": "1.9.4",
        "@progress/kendo-licensing": "1.3.0",
        "@progress/kendo-react-animation": "5.1.0",
        "@progress/kendo-react-data-tools": "5.1.0",
        "@progress/kendo-react-dateinputs": "5.1.0",
        "@progress/kendo-react-dropdowns": "5.1.0",
        "@progress/kendo-react-excel-export": "5.1.0",
        "@progress/kendo-react-grid": "5.1.0",
        "@progress/kendo-react-buttons":"5.1.0",
        "@progress/kendo-react-inputs": "5.1.0",
        "@progress/kendo-react-intl": "5.1.0",
        "@progress/kendo-react-pdf": "5.1.0",
        "@progress/kendo-react-treeview": "5.1.0",
        "@progress/kendo-theme-material": "3.31.0",

"react": "17.0.2",

Expectation: Excel export should display the group headers/footers.

Actual result: Excel export doesn't render the group headers, with footers being displayed as expected.

How to reproduce: 

1. For the following columns and grid data, create the following group descriptors (for example) and render function to use for the group headers(footers):


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;
	}



2. map the columns into the `ExcelExportColumnProps`:


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;
	}


3. pass those properties in the `ExcelExport` component:


return (
		<ExcelExport
			{...restExcelExportProps}
			creator={author}
			data={process(data, { sort: sortDesc, filter: filterDesc, group: groups }).data}
			ref={excelExporter}
			columns={excelReportColumns}
			group={groups}
		>
		</ExcelExport>
	)


4. Export the Excel file and notice that it doesn't render the group headers correctly. This only works for the excel group *footers*.

Remarks:

a) This procedure produces the expected results when the mapping in step 2 (above) is the following for the groupFooters:


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;
    }



b) The `ExcelExportColumnProps` interface has the following properties (there are 2 properties named `groupHeader`):


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;
	}


Relevant screenshots: The footers are produced correctly, but not the headers.
Panagiotis
Top achievements
Rank 1
 asked on 24 Aug 2023
1 answer
217 views

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 ?

Vessy
Telerik team
 answered on 24 Aug 2023
1 answer
570 views
I have a Drawer component with 8 items. On click of 1st item i should display another drawer component with 10 menu items.  Kindly help me
Konstantin Dikov
Telerik team
 answered on 23 Aug 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?