Telerik Forums
KendoReact Forum
1 answer
186 views

Hi.

I have achieved to hide the Fullscreen and Minimize buttons of the Window component but if I double click the title bar, the window still goes to fullscreen mode, even though I set the stage to "DEFAULT". How can I avoid that double clicking on the title bar goes to full screen mode?

Example here: https://stackblitz.com/edit/react-ccd1uy?file=app%2Fmain.tsx

Thanks!

Greetings,

Bernd

Konstantin Dikov
Telerik team
 answered on 20 Mar 2023
1 answer
224 views

I have a KendoReact form, it has its own initialValues, and a controlled input field:

 <Form
                        ref={formRef as MutableRefObject<Form>}
                        onSubmit={handleOkButtonClick}
                        initialValues={initialData}
                        key={JSON.stringify(initialData)}
                        render={({ valid, visited }: FormRenderProps) => {
                            return (
                                <FormElement>
                                    <StackLayout gap={1} orientation={'vertical'}>
                                        <StackLayout gap={1} orientation={'vertical'}>
                                            <FieldWrapper>
                                                <Label>
                                                   'Name'      *
                                                </Label>
                                                <Field
                                                    name={'Name'}
                                                    component={InputFormComponent}
                                                    autoFocus={true}
                                                    validator={ValidationWorker.isRequired}
                                                    maxLength={255}
                                                    value={nameOfProfile}
                                                    onChange={(event) => {
                                                        setNameOfProfile(event.target.value);
                                                    }}
                                                />
                                            </FieldWrapper>

 

 

when I press on Copy button, new set of initial values need to be populated and inserted in the Name field, basically concatenating the string `- Copy` :

const handleCopyButtonClick = async () => {
        await uiHelper.blockUI(async () => {
            try {
                 await createOssSoProfile();
                setNameOfProfile(nameOfProfile + ` - Copy`);
                setInitialData({ Name: nameOfProfile + ` - Copy`, ...initialData });
            } catch (e) {
                uiHelper.showError(e);
            }
        });
    };

it only refreshed my form values once, so I can already see (name - Copy) 

second time I press Copy I expect it to be (name - Copy - Copy)

but it is not reflecting in the form, only in the state

 

what am I missing?


 
Konstantin Dikov
Telerik team
 answered on 18 Mar 2023
1 answer
199 views
Hey, I found a bug in the grid with drag and drop, trying to move an alement to the last place in the list grid starts scrolling endlessly.
You can check it on here - https://www.telerik.com/kendo-react-ui/components/grid/examples/row-reordering/custom/func/?theme=default-ocean-blue&themeVersion=6.0.3 (grid with drag and drop from documentation - https://www.telerik.com/kendo-react-ui/components/grid/rows/row-reordering/#toc-kendoreact-dragdrop ) and on the video which I attached in the attachments.
Wissam
Telerik team
 answered on 17 Mar 2023
1 answer
125 views

Hi, 

I would like to have timeline month and timeline week views in React Scheduler (same as in jQuery Scheduler). What is the correct way to do it?

I tried setting numberOfDays prop to 7 and 30, but the problem with this approach is that the views start with current date and not with the beginning of the current week/month. I noticed there is also dateRange prop, but I cannot figure out what exactly to pass to it. 

Thanks

Radek

Wissam
Telerik team
 answered on 17 Mar 2023
1 answer
154 views

In my previous projects with kendo the grid i used a <Grid> component with default theme.

I made an identical one, but here kendo ui grid is behaving like a table and has k-table class and the header has .k-table-thead. The old project only has k-grid-table class and it works good. The kendo,  react, node, versions are the same, and style sheets are the same too.

But why is it behaving differently?

Vessy
Telerik team
 updated answer on 17 Mar 2023
1 answer
728 views
I'm having some trouble displaying the Grid's pager info component.  Per the documentation and demo at https://www.telerik.com/kendo-react-ui/components/grid/paging/, I am attempting to set the grid's pager in the following manner:

const pagerSettings: GridPagerSettings = { type: "input", pageSizes: [10,100], info: true };
<Grid
   pageable={pagerSettings}
   ...
>
   ...
</Grid>
However, when the grid is rendered, the div containing the pager info is still set to display: none, seemingly being set by 
~@progress/kendo-theme-bootstrap/dist/all.scss.

I'm therefore having to apply the following styling in order to render the pager info:
.k-pager-info {
    display: block !important;
}
But of course, this applies to all instances of my grid.  I can work around this problem by using more specific css selectors, but I'd like to be able to simply use the info attribute of GridPagerSettings to render the pager info div.

Any insight or assistance would be hugely appreciated!

I am using "kendo-react-grid": "^5.10.1"
Konstantin Dikov
Telerik team
 answered on 17 Mar 2023
1 answer
481 views

Hi Team,

I need to build a treeview kind of feature where I can dynamically add child nodes .when user click parent node a button can be used to add child nodes.
Something like below attached snapshot. I surfed for examples but couldn't make out. Kindly share some reference to achieve this.

Wissam
Telerik team
 answered on 15 Mar 2023
4 answers
266 views

Hello,

I would like to ask if it is possible to customize reasource cell in Timeline view in Scheduler control. I would like to show user specific icon and multiline text,

I found similar question from 2020 (https://www.telerik.com/forums/scheduler-customization-questions), did you already implement such a  functionality?

Thanks

Matus

Matúš
Top achievements
Rank 1
Iron
 answered on 14 Mar 2023
1 answer
164 views

Greetings,

Is there a Kendo Tags (standalone component) I can use inside the Card body content?

I found this image that has tags inside the card body content. It would be great if the tags are closable.

Please see the attached image. Thanks!

 

Best Regards,

Jason Li

Wissam
Telerik team
 answered on 10 Mar 2023
1 answer
315 views

Hi,

Disabled KendoReact Bootstrap theme inputs have a very different appearance to HTML Bootstrap inputs when disabled. Bootstrap inputs have a greyed out appearance (https://getbootstrap.com/docs/5.0/forms/form-control/#disabled) whereas the opacity only changes for KendoReact inputs (https://www.telerik.com/kendo-react-ui/components/inputs/textbox/disabled/).

Is there a reason why the styles are different? Is there anything we can do to make a disabled KendoReact input look like a disabled Bootstrap input?

Kind regards,

David

Wissam
Telerik team
 answered on 09 Mar 2023
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
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
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?