Telerik Forums
KendoReact Forum
1 answer
111 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
373 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
335 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
123 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
120 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
141 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
88 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
386 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
262 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
712 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
General Discussions
Grid
Wrappers for React
Charts
Scheduler
Filter 
DropDownList
Form
Styling / Themes
DatePicker
Editor
TreeList
Styling
PDF Processing
ComboBox
Excel Export
Dialog
Input
TreeView
Upload
Drawer
Button
Drag and Drop
MultiSelect
Tooltip
Accessibility
NumericTextBox
Checkbox
Menu
Gantt
DateTimePicker
PDF Viewer
Popup
Window
AutoComplete
DateInput
Sortable
Data Query
Drawing
Licensing
TabStrip
Calendar
Pager 
Labels 
Localization
TimePicker
GridLayout
FontIcon
Animation
PanelBar
PivotGrid
Card
DropDownButton
TaskBoard
Conversational UI 
DateRangePicker
Splitter
Badge 
Security
Slider
Spreadsheet
ContextMenu
MultiViewCalendar
Stepper
MultiColumnComboBox
MultiSelectTree
TextBox
AppBar
File Saver
ListView
MaskedTextBox
RadioButton
Switch
TextArea
Toolbar
DropDownTree
TileLayout
Map
Avatar
Date Math
Gauge
RadioGroup
RangeSlider
Rating
Loader
ExpansionPanel
SvgIcon
Typography
ProgressBar
ScrollView
Popover
StockChart
RadialGauge
Server Components
AIPrompt
Page Templates / Building Blocks
AI Coding Assistant
Chat
ColorGradient
ColorPalette
ColorPicker
Notification
Ripple
Skeleton
ButtonGroup
Chip
ChipList
FloatingActionButton
SplitButton
ActionSheet
Barcode
QR Code
FlatColorPicker
Signature
BottomNavigation
BreadCrumb
StackLayout
Timeline
ListBox
ChunkProgressBar
Sparkline
FileManager
ArcGauge
CircularGauge
LinearGauge
ExternalDropZone
OrgChart
Sankey
VS Code Extension
InlineAIPrompt
SpeechToTextButton
Chart Wizard
Agentic UI Generator
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?