Telerik Forums
KendoReact Forum
1 answer
114 views
Official documentation regarding Master-Detail Grids states:

"To apply a hierarchical order to the desired records, use the detail property of the master Grid".  Would it be possible to define detail component in declarative way as we do for GridNoRecords for example to pass it any props?

              <Grid
                    style={{ height: '550px' }}
                    data={this.state.categories}
                    expandField="expanded"
                    onExpandChange={this.expandChange}
                >
                    <Column field="CategoryID" title="ID" width="50px" />
                    <Column field="CategoryName" width="200px" title="Category Name" />
                    <Column field="Description" />
                    <DetailRow>
                          <DetailComponent />
                    </DetailRow>
                </Grid>


Stefan
Telerik team
 answered on 25 Sep 2018
2 answers
118 views

I just upgraded to use the react editor wrapper. The editor is showing up but not all options are available. These are the options I am passing, but it looks like it is just showing the default options. Any ideas?

options: {
tools: [
'bold',
'italic',
'underline',
'strikethrough',
{
name: 'foreColor',
palette: [
'24282D',
'F4F4F4',
'FFD200',
'F04C3E',
'00B050',
'363A3F',
'74777D',
'E4E5E7',
'F2C700',
'EB2D1E',
'FFFFFF',
'237932',
'33373b',
'676A6F',
'D9DADB',
'E5BD00',
'D71E0F',
'21852E',
'0070C0',
'44494F',
'81858B'
]
},
{
name: 'backColor',
palette: [
'24282D',
'F4F4F4',
'FFD200',
'F04C3E',
'00B050',
'363A3F',
'74777D',
'E4E5E7',
'F2C700',
'EB2D1E',
'FFFFFF',
'237932',
'33373b',
'676A6F',
'D9DADB',
'E5BD00',
'D71E0F',
'21852E',
'0070C0',
'44494F',
'81858B'
]
},
'formatting',
'fontSize',
'subscript',
'superscript',
'justifyLeft',
'justifyCenter',
'justifyRight',
'justifyFull',
'insertUnorderedList',
'insertOrderedList',
'indent',
'outdent',
'createLink',
'createTable',
'addColumnLeft',
'addColumnRight',
'addRowAbove',
'addRowBelow',
'deleteRow',
'deleteColumn',
'cleanFormatting',
'print'
],
pasteCleanup: {
all: false,
css: false,
keepNewLines: false,
msAllFormatting: true,
msConvertLists: true,
msTags: true,
none: false,
span: false
}
}

Stefan
Telerik team
 answered on 20 Sep 2018
5 answers
146 views
The problem with virtual scroll feature is that Grid doesn't take into account expanded details when fires onPageChange event. It's better shown in this example which is based on VirtualScroll official example with added detail component: https://stackblitz.com/edit/react-klm9yt?file=app%2Fmain.js

The problem is that when you scroll the grid down and then try to scroll up the grid content either quickly jumps or get stuck.
Apart from the example in Stackbtitz, I've put together the short video to clarify the issue.





Stefan
Telerik team
 answered on 18 Sep 2018
1 answer
210 views

Can anyone confirm if the Kendo React Grids are supposed to be compatible with the Kendo Less Styles? When I attempt to use them with a compiled set of styles from the Kendo LESS sources in the @progress/kendo-ui package, the react grids filter blocks render in a broken, inoperable way as the Less style rules react badly with the classes on the filter cells.

The SASS themes work with it, but don't work with the Relerik Reports views.

Stefan
Telerik team
 answered on 18 Sep 2018
1 answer
967 views

I will sometimes see the wrong tooltip label in cells on my grid. I want the tooltip to appear on the hover anywhere in a particular td that has messages to display. These messages are based on props of the dataItem being available. There are a few problems.

  1. Sometimes the tooltip will show the wrong content
  2. The tooltip jumps between the td and the svg/path from fontawesome-react. The svg/path does not have a title so I don't understand why it anchors there instead of the td.
  3. My grid is inside a splitter. Sometimes the tooltip will jump to the top/left of the splitter pane and be visible while I am in edit mode.

1 & 2 are visible/reproducible in my stackblitz. I have been unable to replicate 3 in stackblitz so I was wondering if it was related to my splitter (not implemented in stackblitz to save time..)

Ideally I would only have one <Tooltip component for my grid but it becomes unnatural to me to have to iterate state from the Grid component instead of at the cell level. I do want the tooltip to be interacted with via the icon when in edit mode as well but I have not implemented that here. Is there a better approach that preferably avoids the use of globals?

Stefan
Telerik team
 answered on 18 Sep 2018
1 answer
146 views

It's been nearly 1 year since I submitted a post about Kendo UI React Scheduler.  The is still a wrapper.  Are there any plans to make the scheduler a component and if so when.  Thank you - Mark

Vladimir Iliev
Telerik team
 answered on 17 Sep 2018
1 answer
249 views

I'm using a modified example of the in row editing. When a cell is clicked I switch the row to edit mode. I've inspected both the cellRender and rowRender methods and I don't see any properties to indicate the editable={false} from my GridColumn props. The cell rendering routine must know this in order to control the display. Is there a property I am overlooking?

I want to preventing switching my row to edit mode if the cell clicked is not editable. Help appreciated. See my example on stackblitz. When clicking a cell it shows the editField in the header which is what I want to prevent on the click of a non-editable cell (all are marked as editable false here).

https://stackblitz.com/edit/react-nte6fd?file=app/main.js

Stefan
Telerik team
 answered on 07 Sep 2018
2 answers
108 views

This is a new behavior when I upgraded from 1.1.0 -> 1.3.0. Click toggle a few times and you will see how the widths are lost. Am I doing something wrong or is this a bug?

https://stackblitz.com/edit/react-rf6vis?file=app/main.js

Stefan
Telerik team
 answered on 07 Sep 2018
1 answer
962 views
Warning: Failed prop type: Invalid prop `children` supplied to `Button`.
    in Button (created by App)
    in App

How can I resolve this warning? It seems to dislike anything other than a text node.

class SimpleThing extends React.PureComponent {
  render() {
    return <span>Thing</span>;
  }
}
 
class App extends React.Component {
    render(){
        return(
            <div class="example-wrapper">
                <div className="example-col">
                  <p>Button</p>
                  <Button><SimpleThing /></Button>
                </div>
            </div>
        )
    }
}

https://stackblitz.com/edit/react-m5avfp?file=app%2Fmain.js

Stefan
Telerik team
 answered on 07 Sep 2018
1 answer
840 views

Two questions about the aggregate feature: https://www.telerik.com/kendo-react-ui/components/grid/grouping/grouping/:

1.      Do we have some kind of groupHeaderTemplate function to customize the template of group header? Like what JQuery has:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.groupheadertemplate

or

2. For the example in

https://www.telerik.com/kendo-react-ui/components/grid/grouping/grouping/

Can we aggregate the summary information on the header, instead of footer?

Stefan
Telerik team
 answered on 07 Sep 2018
Narrow your results
Selected tags
Tags
General Discussions
Grid
Wrappers for React
Charts
Scheduler
Filter 
DropDownList
Form
DatePicker
Styling / Themes
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
LLM Kit
OTP Input
+? more
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?