Telerik Forums
KendoReact Forum
1 answer
676 views

I'm using the ComboBox component and would like to restrict the values that you can manually enter into the field above the dropdown.

(See screenshot).

I have two scenarios: 

1) Only allow to enter integer values (numeric, no comma or dot allowed), both negative and positive values are allowed;

2) Only allow to enter float values (numeric with comma or dot), both negative and positive values are allowed;

I tried to restrict the input by managing the keyDown event but I'm not sure if this is the right approach.

Do you maybe have an example for me, how I could better solve this?

Thanks!

Greetings,

Bernd

Wissam
Telerik team
 answered on 24 Feb 2023
1 answer
1.1K+ views

Hi,

We are customising kendo-theme-bootstrap using the build process of our application and Dart Sass as per the Kendo documentation. We have started to see the following warnings when compiling our application:

LOG from ./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js sass-loader ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/index.scss
<w> Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
<w> 
<w> Recommendation: math.div($a, $b) or calc($a / $b)
<w> 
<w> More info and automated migrator: https://sass-lang.com/d/slash-div
<w> 
<w> node_modules\@progress\kendo-theme-bootstrap\dist\all.scss 692:15   k-math-div()
<w> node_modules\@progress\kendo-theme-bootstrap\dist\all.scss 385:13   k-color-contrast-ratio()
<w> node_modules\@progress\kendo-theme-bootstrap\dist\all.scss 403:26   k-contrast-color()
<w> node_modules\@progress\kendo-theme-bootstrap\dist\all.scss 3066:24  @import
<w> src\index.scss 23:9                                                 root stylesheet
<w>

Is this something we should be concerned about?

Kind regards,

David

Vessy
Telerik team
 answered on 24 Feb 2023
2 answers
3.6K+ views
The onBlur event the fires after the user clicks on the date in the calendar popup doesn't contain the value that's now in the datepicker. The onBlur that fires after a date is input to the text box and blurred does contain the value. Without that consistency, I am foreced to use the onChange event which is a very different implementation, which comes with a different set of challenges. Any advice?
Wissam
Telerik team
 answered on 22 Feb 2023
1 answer
250 views

Hi, I'm trying to include holidays in my Gantt chart so the project timeline would reflects the impact of holidays on project schedule. 

Below is how I've done so far. However, the timeline is still running on holidays. Please help me.

 let holidays = [
                    new Date (2023, 4, 1),
                    new Date (2023, 4, 4),

                ];

let taskData = [
                    {
                        id: 1,
                        title: "Task 1",
                        orderId: 0,
                        start: new Date("2023-04-30 08:00:00"),
                        duration: 24,
                        percentComplete: 0.45,
                        isExpanded: true,                   
},
                    {
                        id: 2,
                        title: "Task 2",
                        orderId: 2,
                        start: new Date("2023-05-02 08:00:00"),                        duration: 10,
                        percentComplete: 1,
                        isExpanded: true,
                    },
                    {
                        id: 3,
                        title: "Task 3",
                        orderId: 3,
                        start: new Date("2023-05-02 17:30:00 "),                        duration: 10,
                        percentComplete: 0.77,
                        isExpanded: true,
                    },
                ];
                let dataWithEndDate = taskData.map((task) => ({
                    ...task,
                    end: new Date (task.start.getTime() + task.duration * 60 * 60 * 1000),
                }));

render() {
       
        return (
           <div>
               <Gantt
taskData={dataWithEndDate}
                     columns={columns}
                     holidays={holidays}
                >
                </Gantt>
            </div>
       
        );
    }

 

Vessy
Telerik team
 answered on 21 Feb 2023
2 answers
390 views

Hi,

Dropdown is not visible in dialog after upgrade to v5.11.0. It used to work with v5.1.0.

With v5.1.0, dropdown's z-index is automatically calculated based on the dialog's z-index. With v5.11.0, the dropdown's z-index is always 100, which is lower than dialog's z-index.

Please advise.

 

Thanks.

David
Top achievements
Rank 1
Iron
Iron
Veteran
 updated answer on 21 Feb 2023
1 answer
123 views

We are trying to export the pdf from mobile browser, we are getting the same view in the pdf which is expected. We wants to export the pdf always to be in the desktop layout irrespective of the device from where it is exported.

 

In this format we want when we will export the pdf from mobile

 

but we are getting this

 

Is there any options already provide to the PDFExport. or any other way to achieve this.

Filip
Telerik team
 answered on 20 Feb 2023
1 answer
395 views

Hi, I don't know if this is the right place to ask this question but since I haven't clarified with the information I've read I'm writing it here. 

I am working on a project to which I need to integrate only the "KendoReact Rich Text Editor".

And I'm confused by the fact that I can run it perfectly well without having applied for the 30 days free trial, let alone obviously a paid license.

To my understanding it is assumed that if I can use it without entering the license is because it is indeed allowed right?

According to what you put in your Kendo UI FAQ section: Why are you open sourcing part of the Kendo UI framework?

Apparently it can be used without a license.

The only thing I see is this information in the console when installing the necessary plugins:

> @progress/kendo-licensing@1.3.0 postinstall D:\Project\node_modules\@progress\kendo-licensing
> node ./bin/kendo-ui-license.js activate --ignore-no-license

(INFO) Kendo UI: KENDO_UI_LICENSE environment variable not set
(WARN) Kendo UI: License file not found at "D:\Projects\kendo-ui-license.txt"


The point is that I don't quite understand some aspects of the license and I want to know if I won't get into trouble using the Kendo rich text editor commercially if I keep using it.

Thanks a lot!

Wissam
Telerik team
 answered on 17 Feb 2023
1 answer
135 views

Greetings,

I'm currently using the PanelBar with expandMode="single" and I'm trying to set the expanded prop to be dynamic (able to collapse and expand on its own when navigating to a different route through the content link).

When I try to navigate to a different route through the content link, only the selected prop is re-rendered but the expanded prop still stays on the previous route.

Is there a solution for this? Thank you!

Best Regards,

Jason Li

Filip
Telerik team
 answered on 16 Feb 2023
1 answer
204 views

For Kendo-UI there is documentation page which provides information about sass-themes style compatibility

https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes/compatibility

Is there something similar for kendo-react?

Vessy
Telerik team
 answered on 15 Feb 2023
1 answer
221 views
In below chart I am trying to make all text to show in localized format. Values on category axis and values on tooltip also needs in localized. 
Is there any way to convert numbers into localized format or I need to pass localized numbers and text as chart values
Vessy
Telerik team
 answered on 14 Feb 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
+? 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?