Telerik Forums
KendoReact Forum
1 answer
509 views

Hi,

I want to add focus event on NumericTextBox.Can you please suggest how to add focus event to NumericTextBox as i have to trigger some event based on focus.

please find the below implementation  i need to achieve:-

 

<NumericTextBox type="text" name={name} className={cssClass} onChange={(ev) => this.onChange(ev) onFocus = {this.onFocusNumericGroupInput} />

 

onFocusNumericGroupInput = () => {
console.log("focus event fired")
}

 

 

 

 

Vasil
Telerik team
 answered on 19 Mar 2019
1 answer
318 views

Hi,

Is there an option to prevent minus symbol in numeric text box?

Regards,

Balaji

Vasil
Telerik team
 answered on 19 Mar 2019
2 answers
273 views

 

Hi,

 I am using Kendo react autocomplete search box in our project. (import { AutoComplete } from "@progress/kendo-react-dropdowns";)

 Whenever user starts typing in search textbox its shows best match from results highlight with box border. I want to remove this heighlight from best match which in middle of search result and  when user starts navigating using keyboard it should start from 1st item in search results. Is there any way to achieve this ?

Also for filter I am using operator: "contains", Is there any way to order result of filter as best match on top and then rest of matches.

 

Prajakta
Top achievements
Rank 1
 answered on 15 Mar 2019
1 answer
2.7K+ views

I have a need to refresh a currently displayed KendoReact Grid with the latest data coming from the server (i.e. real time changes made by others). Is this possible currently with KendoReact's Grid component? If so, is there a demo that I can review the code to gather how to do this?

Thanks.

Jim Minnihan

SKF, Inc.

Stefan
Telerik team
 answered on 15 Mar 2019
3 answers
565 views

Anyone know how to do a name validation when I upload the files. Not the extension. 

<Upload
batch={false}
multiple={true}
defaultFiles={[]}
withCredentials={false}
restrictions={{
allowedExtensions: ['.xlsx', '.xls']
}}
saveUrl={'https://demos.telerik.com/kendo-ui/service-v4/upload/save'}
removeUrl={'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'}
/>

Thank you Very much

 

 

 

xin
Top achievements
Rank 1
 answered on 13 Mar 2019
1 answer
389 views

I have a zoomable Kendo React Chart where I have set a maximum on the . If the user zooms in and zooms out that max is lost.

In my particular use case, I have 2 series each with their own . The second series should really always be shown on a scale from 0-3. To do this I have set a max on the second Y axis to 3 but this is lost as soon as the user zooms.

 

I do want the user to be able to zoom but when they zoom back out I expect the user to be able to return the chart to its initial state of having a max of 3 on the . 

 

This  show this behavior: https://stackblitz.com/edit/react-l5udtx

 

Is there a recommended way to achieve this?

 

Stefan
Telerik team
 answered on 11 Mar 2019
1 answer
145 views

Hello,

We have a need to recreate the grid entirely when user selects an option from a dropdown. Both columns and data will be different.

Currently, I have tried updating the datasource being passed to the grid, but the old columns still remain.

Is it possible to get a demo on how to do this with the React grid version? This is a common use case.

Your help is appreciated,

Mihai

Stefan
Telerik team
 answered on 11 Mar 2019
1 answer
601 views

Hello,

When I put a DropDownList inside a Window, and the I try to select an item, it seems that the deployed list is rendered behind the window. For your convenience, I have set up a demo on Stackblitz. I am using 2.7.1 kendo react version.

Best regards,

Jean-Pierre

 

 

Stefan
Telerik team
 answered on 11 Mar 2019
3 answers
630 views

I'm attempting to use a kendo React ComboBox and implement filtering, but the onFilterchange event isn't firing when I type info into the search, just the OnChange event when I select an item from the full dropdown list.

 

function MyComponent(props) {
const { value, data } = props;
const [filteredData, setFilteredData] = useState(data);
const handleChange = (e: ComboBoxChangeEvent) => {
const value: any = e.target.value;
if (value === null || typeof value === 'string') {
props.onChange(value);
} else if (typeof value === 'object') {
if (value.hasOwnProperty(props.valueField)) props.onChange(value[props.valueField]);
} else {
props.onChange(e);
}
};
const filterChange = (e: ComboBoxFilterChangeEvent) => {
setFilteredData(filterBy(data, e.filter));
};
return (
<KendoComboBox
style={{ width: '100%' }}
data={filteredData}
textField={props.textField.toString()}
onChange={handleChange}
onFilterChange={filterChange}
disabled={props.disabled}
name={props.name}
placeholder={props.placeholder || ''}
suggest={true}
value={(value && data.find(d => d[props.valueField] == value)) || value || ''}
itemRender={props.itemRender}
onBlur={props.onBlur}
/>
);
}

Stefan
Telerik team
 answered on 08 Mar 2019
1 answer
901 views

Is there a suggested way for handling required fields in In-line Grid Editing?  Currently we are handling required fields by using custom cell renders and applying styles manually.  Unlike the jQuery solutions where a required tag can be set in the model, this solutions seems clunky.

On an unrelated note ;),  is there a reason whey the DateRangePicker doesn't have a required attribute like the DatePicker?

Stefan
Telerik team
 answered on 07 Mar 2019
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
Marco
Top achievements
Rank 4
Iron
Iron
Iron
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
Want to show your ninja superpower to fellow developers?
Top users last month
Marco
Top achievements
Rank 4
Iron
Iron
Iron
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
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?