Telerik Forums
KendoReact Forum
1 answer
563 views

I have clear fresh project initialized with Vite. I'm trying to add KendoReact, but there are problems:

npm install --save @progress/kendo-react-all
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: my-react-app@0.0.0
npm ERR! Found: @progress/kendo-react-popup@5.11.0
npm ERR! node_modules/@progress/kendo-react-popup
npm ERR!   peer @progress/kendo-react-popup@"^5.0.0" from @progress/kendo-react-all@5.11.0
npm ERR!   node_modules/@progress/kendo-react-all
npm ERR!     @progress/kendo-react-all@"*" from the root project
npm ERR!   @progress/kendo-react-popup@"5.11.0" from @progress/kendo-react-buttons@5.11.0
npm ERR!   node_modules/@progress/kendo-react-buttons
npm ERR!     peer @progress/kendo-react-buttons@"^5.0.0" from @progress/kendo-react-all@5.11.0
npm ERR!     node_modules/@progress/kendo-react-all
npm ERR!       @progress/kendo-react-all@"*" from the root project
npm ERR!     peer @progress/kendo-react-buttons@"^5.0.0" from @progress/kendo-react-conversational-ui@5.11.0
npm ERR!     node_modules/@progress/kendo-react-conversational-ui
npm ERR!       peer @progress/kendo-react-conversational-ui@"^5.0.0" from @progress/kendo-react-all@5.11.0

 

Any idea, what's going wrong?

Vessy
Telerik team
 answered on 07 Mar 2023
1 answer
138 views

Hii

want to change end date by expandin task bar. and drag event also.

is it possible.

please let me know as soon as possible

 

Vessy
Telerik team
 answered on 07 Mar 2023
1 answer
843 views

Greetings,

I'm trying to set the height dynamically according to the size of the content using "height: auto" but it's not working.

I need the text to fit inside the content without exceeding below the actions section.

Is there a way to solve this issue? Please help, thanks!

 

Best Regards,

Jason Li

Vessy
Telerik team
 answered on 06 Mar 2023
1 answer
558 views

Hi Team,

I want to get the date range of the current view whenever the scheduler component loads and whenever the user changes the view or changes the date by the navigation button (next, prev, date picker). I need to know the start and end date which is visible on the scheduler. I am able to know the view name by using onViewChange callback and default date by using onDateChange which is giving me the default selected date but I want the whole range (start to end), I am using class-based components.

Scenario: Currently selected view is the month view and the default date is in the month of Feb 2023 so I need something which gives me the start date as Jan 29, 2023, and the end date as March 04, 2023.

Just like In the Jquery version of the scheduler, we get the required information by using the following function:

function scheduler_view_range(e) {
        var view = e.sender.view();

        // The view has:
        // A startDate method which returns the start date of the view.
        // An endDate method which returns the end date of the view.

        $(".console").append("<p>" + kendo.format("view:: start: {0:d}; end: {1:d};", view.startDate(), view.endDate()) + "</p>");
    }
Wissam
Telerik team
 answered on 28 Feb 2023
1 answer
166 views

Hi.

I am working with the Scheduler component and I display the WeekView in full day mode. Is there a possibility, that I can somehow achieve to automatically scroll to the work hours when the Scheduler opens? (see attached screenshot)

I know that I can limit the view to show the work hours only but that is not what I want. I just would like to achieve that our users don't have to scroll down everytime the Scheduler opens to see the work hours. Same behavior would be desirable in DayView.

Any help would be appreciated.

Thanks,

Bernd

Konstantin Dikov
Telerik team
 answered on 28 Feb 2023
1 answer
226 views

After server-side validation, I am calling forceUpdate() to update the UI.

But, this isn't "wired" to the FormSubmitClickEvent isValid - or at least not in the same time frame as the onStep function.

Is there a way to tie server-side validation in with FormSubmitClickEvent isValid? Since this process is asynchronous, I'm guessing it will be challenging.

 

... Called after server-side validation to update the UI - this works

setTimeout(() => {
formRef.current.forceUpdate();
});

 

... Called when user clicks the "next" button on the multi-step screen

const onStepClick = React.useCallback(
(event: FormSubmitClickEvent) => {
Filip
Telerik team
 answered on 27 Feb 2023
1 answer
174 views

Let's say we have a grid displaying orders: Order ID, Customer Name, Product Name. The grid is displaying the "ProductName" but filtering needs to be done by "ProductID". If we have thousands of products, we don't want to populate the combobox with everything, but instead might want to use remote data (filtering/virtualization). Most examples I find assume there is local data in some json file. How can we implement a custom grid filter cell that has a combobox that uses remote data?

My understanding is that the filter row is stateless and controlled by the grid. If I implement a custom combobox with remote data as soon as I filter the grid via the GridFilterCellProps onChange, the filter cell state is lost (so no more loaded data matching the selected item) and appears that nothing is selected even though a filter is applied.

I've tried to store the state outside of the filter cell, but I can't seem to get it right. Anyone else have any luck doing something like this?

Konstantin Dikov
Telerik team
 answered on 27 Feb 2023
1 answer
666 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.5K+ 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
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
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?