Telerik Forums
KendoReact Forum
1 answer
1.8K+ views

Hi Stefan,

Onclick event (when the user clicks on a date picker Icon) is not firing in DatePicker and DateTimePicker. i.e <DatePicker onClick={onClick} onChange={onChange} />

 

Stefan
Telerik team
 answered on 11 Jan 2021
1 answer
139 views

Hi,

I have a grid where column A takes the size of an array and, depending on if the status in column B is right, outputs the array's length. If the status is not right, the output is a -. When I sort, the underlying value from the field is sorted, whereas I want the cell's value to be sorted. The column may look like this:

5

3

-

6

-

4

and I would want it to sort to 

6

5

4

3

-

-

 

Currently it sorts to because the underlying value of the - is 6 and 4

6

-

5

4

-

3

 

Is there any way to sort by the cell and not the field? 

Stefan
Telerik team
 answered on 08 Jan 2021
1 answer
248 views

Hi,

I would like to ask about one thing on which I could not find exact answer. According to documentation, one of requirements for virutal scrolling is to set height property on grid. What about a case when I'd like to have dynamic height - take all space left(e.g. by flex: 1). From what I checked still height is needed(but can be set just to 100%, then flex can take care about filling remaining space). From what I checked with adjusting example from documentation it seems to work: 
https://stackblitz.com/edit/react-kgfbgg-risfhh?file=app%2Fmain.jsx

I would like to use this approach as base for all grids in application - is it correct way to go?

Stefan
Telerik team
 answered on 07 Jan 2021
1 answer
204 views

 

 

As I go through and implement + style the KendoReact controls for use in our dynamic forms, would you like me to report any "bugs" I may find in the forum or is there a better place?

What I found today was a styling issue. I noticed that the NumericTextBox didn't look the same as the other inputs when focused. At first, I figured it was because of some kind of SCSS shenanigans that I've been fighting, but then I realized that .k-state-focused wasn't applied.  As soon as I manually did it via Chrome DevTools, it looked exactly as expected.

Here's an example: https://stackblitz.com/edit/react-s8ugrr-vnxuc1?file=app/main.jsx

As you tab thru, you'll see that all controls except the NumericTextBox apply the box shadow.

 

Thanks again,
Kyle

Stefan
Telerik team
 answered on 07 Jan 2021
3 answers
726 views

When setting the initialValues of the Form component, it seems to work for everything I've used so far, except for a Switch. If I use a CheckBox instead, it seems to work fine.

I've created a StackBlitz using snippets from your own docs: https://stackblitz.com/edit/react-s8ugrr-c3bw3k?file=app/main.jsx

If you change FormSwitch to FormCheckbox on line 117, you can see what I mean.

I'm setting the initialValues object to be in the following format:

{ mySwitchControlName: true }

Stefan
Telerik team
 answered on 07 Jan 2021
1 answer
1.2K+ views

After two days of trying to get the Form component to work for my needs, I've hit a pretty major roadblock for our product.

Use Case: Admin creates a template with dynamic fields. End user consumes the template, but has multiple instances of it in a single page. End user shouldn't need to go thru each instance of the template. They should be able to click "Submit" and all template instances are validated. First invalid instance is displayed.

In Kendo UI, this was easy.  You iterate all the <form> elements and run .validate() on it.

var forms = $("form").submit(function (e) {
    e.preventDefault();
}).kendoValidator();
 
$(".btn-primary").click(function () {
    var firstInvalidForm = null;
    tabPaneForms.each(function () {
        // Iterate all the tabs and validate the input
        var that = $(this);
        if (!that.data("kendoValidator").validate() && !firstInvalidForm) {
            firstInvalidForm = that;
        }
    });
 
    if (firstInvalidForm) {
        // Find the first invalid field and display the tab
    } else {
        // Serialize all the data
        var form = $("#frmData");
        serializeFormData(form);
 
        // POST the data
        form.submit();
    }
});

 

Now, I realize KendoReact is NOT Kendo UI, and that React is a totally different thought process than good ol' jQuery. However, I need something similar.

The problem I keep running into is that everything that I need is in FormRenderProps. Your Form control expects you to hit a Submit button inside of the Form's render function. Originally, I didn't want this, but I was able to wrap my entire UX in the form to make it work (not too pleased that I had to, though). So when the Submit button is clicked, it uses formRenderProps.onSubmit, which does some blackbox magic and raises the Form's onSubmitClick/onSubmit events. Things were going fine until I realized I can't do this purely linearly.

I've forked your Multi-Step Form example and quickly tweaked it to be similar to my team's needs. We're using a Stepper to mimic the tabs that we use (though the actual UX control we use is more similar to your TabStrip): https://stackblitz.com/edit/react-vqk7ya?file=app/data.jsx

The idea is that the end user should be able to either click "Submit" and have the validation code run for each Stepper step/TabStripTab or they can jump around as they wish by clicking the actual Stepper step/TabStripTab. For our needs, validation only needs to occur on Submit (but each step must be validated on Submit click).

Stefan
Telerik team
 answered on 06 Jan 2021
7 answers
319 views
Hello, are there any plans or maybe a way, to use styled components instead of the huge css / scss files, to style/theme the KendoUI Components?
Stefan
Telerik team
 answered on 05 Jan 2021
6 answers
190 views

Hello! 

1. Is there a way to customize TimeLineView to show week days (Monday , Tuesday ...) because I need that form that contains day and time intervals on upper bar.

2. Can we customize the modal to show my dropdowns / buttons from the scheduler?

3. I need to group multiple data but i don t want to repeat that categories. For example I will have a list of multiple years (I, II , III) that contains multiple specializations but I don t want the secound year (II) to repeat the same specializations. I want those years to have their own specializations.

4. Can we use KendoReact with SignalR? 

Stefan
Telerik team
 answered on 05 Jan 2021
4 answers
515 views

Hi,

I have to print the component that has simple table of contents. You can see the example on StackBlitz.

When PDF is generated links do not lead to corresponding sections inside PDF, they lead to external links.

What would be preferred solution to fix this so that links lead to PDF pages/sections?

Thanks

 

 

Vladimir Iliev
Telerik team
 answered on 30 Dec 2020
2 answers
202 views

Examples that I see are using class components.. is there an example that uses functional components? Any simple example will do.

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

David
Top achievements
Rank 1
Veteran
 answered on 16 Dec 2020
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?