Telerik Forums
KendoReact Forum
9 answers
1.2K+ views

Hi, 
I am using kendo React in my project. When I am doing grouping on grid and exporting as excel, grouping is not applied in Excel and is download with flat table.

I am sending grouped array in group property of ExcelExport butgrouping is not happening in export to excel.

<ExcelExport group = {group}>

</Excel Export>

Please let me know is it the expected behaviour for excel or is it an issue.

 

Thanks

Jie
Top achievements
Rank 3
Iron
Iron
Iron
 answered on 30 May 2023
1 answer
219 views

Hi,

How to hide the grouped columns automatically in grid? After a column is grouped (by dragging and dropped into the drag and drop area), I want to hide the columns that have been grouped. See the attached screenshot.

My current approach is to set the column width to zero, resizable to false, minResizableWidth to zero. It works fine so far, but it feels like a hack.

 

Thanks,

Jie

Wissam
Telerik team
 answered on 30 May 2023
1 answer
119 views
I have a Kendo Menu that has a custom menu item renderer. Its list of menu items is controlled by Redux, and the items in the list change from time to time. I was wondering if there was a way to animate the transition of menu items when the content changes. Adding an animation to the item renderer didn't seem to make a difference, and the content of the menu still changes without a transition.
Konstantin Dikov
Telerik team
 answered on 29 May 2023
1 answer
147 views

We are currently working on an app consisting of micro frontends using both React and Angular modules. We use Kendo for both but there's an inconsistency between the Angular and React app when it comes to the TimePicker component. In the Angular version, if the user completes the first section of the TimePicker where we have hours:minutes, after entering 2 characters for the hour field it automatically jumps to the next section without having to press the arrow button. In the React component, once the user completes the first 2 characters for the hours section, the focus doesn't switch to minutes until the user presses the arrow button to manually navigate there.

Is there any possibility to obtain the same functionality for React where the focus automatically changes?

So far I tried both using the reference of the TimePicker component to obtain this behavior and also the solution suggested for the JQuery version where it's recommended to use event listeners and simulate the button press with a dispatched event but none seemed to work.

Wissam
Telerik team
 answered on 29 May 2023
0 answers
281 views

Hi,

I am currently facing a challenge with implementing dynamic grid columns with custom cells, along with column lock functionality. I have attempted to address this issue by creating a separate file for the grid configuration, where I define all the column properties and provide template names.

Here is an excerpt from my "gridConfig.tsx" file:

let CommandCell = (props: GridCellProps) => <MyCommandCell {...props} deleteData={deleteData} edit={enterEdit} remove={remove} add={add} discard={discard} update={update} newId={newId} cancel={cancel} editField={editField} />
let CommandCell1 = (props: GridCellProps) => <DropDownConnection {...props} alldata1={dropDownDataConnection} keyField="id" textField="connectionName"/>

 

 const columnDefinitions = [{

      field: SELECTED_FIELD,
      title: "",
      width: "50px",
      filterable: false,
      headerSelectionValue:
        data.findIndex((item) => !selectedState[idGetter(item)]) === -1,
      selected: false,
      show: true,
    },
    {
      field: "id",
      title: "ID",
      filter: "numeric",
      width: "200px",
      template: ColumnMenuCheckboxFilter,
      editable: false,
      selected: false,
      show: false,
    },
    {
        field: "tenantId",
        title: "Tenant Id",
        filter: "numeric",
        width: "200px",
        template: ColumnMenuCheckboxFilter,
        editable: false,
        selected: false,
        show: false,
      },
    {
      field: "connectionId",
      title: "Connection Id",
      filter: "text",
      width: "200px",
      template: ColumnMenuCheckboxFilter,
      editable: false,
      cell: CommandCell1,
      selected: false,
      show: true,
    }]

In the "GridComponent.tsx" file, I have utilized the column definitions as follows:

<Column field={SELECTED_FIELD} width="50px" headerSelectionValue={data.findIndex((item) => !selectedState[idGetter(item)]) === -1} filterable={false} />
        {columnDefinitions.map((column, index) => column.show && 
        <Column key={index} field={column.field} title={column.title} width={column?.width} cell= {column.cell}editable={column?.editable} />
        )}
        <Column title="Action Buttons" cell={CommandCell} width="200px" locked filterable={false} />

The issue I am encountering is related to passing props, as I am unable to include component code directly within the grid configuration. Could you please assist me in finding a solution to this problem?

Thank you very much in advance for your kind support!

Amol
Top achievements
Rank 1
 asked on 29 May 2023
2 answers
290 views

Hi ,

Today is 3/08/2023. I tried to create 2  DateTimePicker  controls  as code below 

const effDate2 = new Date( "2023-03-03");
   

consttoday = newDate();

 <div className="mb-3">
                  <Label> Effective Date </Label>
                  <DatePicker name = 'effectiveDate' value ={effDate2} onChange={handleDatePickerChange} />
                 
                </div>
                <div className="mb-3">
                  <Label> Today  </Label>
                  <DatePicker name = 'today' value ={today} onChange={handleDatePickerChange} />
                 
                </div>

 

The Effective Date control show :   while the Today Date show  

 

Can you pls advise me why the value of Effective Date changed ? 


Thanks,
Thao Phan

 


Vessy
Telerik team
 answered on 26 May 2023
1 answer
73 views

Hi,

Is there a way to customize buttons inside Grid drag and drop area for column grouping? Something simple like changing the display text.

 

Thanks,

Jie

Filip
Telerik team
 answered on 26 May 2023
1 answer
283 views

I am using kendo react scheduler with many events. Now, when any event is clicked, i need to get the event id of that event through a callback.

But i can't get how to get that. Any help will be appriciable.

Wissam
Telerik team
 answered on 26 May 2023
1 answer
170 views

Hi Team, 

Please can you advise on the following error while building a TypeScript project using Vite?

[commonjs--resolver] Unexpected token (32:79) in /opt/actions-runner/_work/blue-file-operational-map-web/blue-file-operational-map-web/node_modules/@progress/kendo-react-ripple/dist/es/Ripple.js

Full stack error screenshot attached.

Thanks,

Grant

 

Grant
Top achievements
Rank 3
Iron
Iron
Iron
 answered on 26 May 2023
1 answer
113 views

Hello,

do you plan to support React server components? if so, when could it be?

Thanks

Kiril
Telerik team
 answered on 25 May 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
Licensing
TabStrip
Drawing
Calendar
Pager 
Labels 
Localization
TimePicker
GridLayout
FontIcon
Animation
PanelBar
TaskBoard
PivotGrid
Card
DropDownButton
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
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Rakhee
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Rakhee
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?