Telerik Forums
KendoReact Forum
0 answers
102 views

HI there,

 I am trying to build custom combobox which offers Add text inputbox, refer the pic for the reference,

 

 

with the help of below  example code.

					<ComboBox
						style={{
							width: '180px',
						}}
						id='newx'
						name='newX'
						textField='add new data'
						value={value}
						data={selectedval}
						onChange={(e) => handleChange(e, props)}
						header={
							<span
								style={{
									marginLeft: '60px',
								}}
							>
								<form className='k-form' onSubmit={(e) => e.preventDefault()}>
									<fieldset>
										{/* <div>Name</div> */}
										<TextBox
											value={selectedval}
											onChange={handleChangeval}
											// placeholder='John Smith'
											suffix={() => (
												<>
													{/* {value !== EMPTY_VALUE && ( */}
													<InputClearValue
														onClick={handleAddoperation}
														className={styles.plus}
													>
														<SvgIcon icon={plusIcon} />
													</InputClearValue>
													{/* )}
													 <InputSeparator /> */}
												</>
											)}
										/>
									</fieldset>
								</form>
							</span>
						}
						// footer={
						//   <span
						//     style={{
						//       marginLeft: '60px',
						//     }}
						//   >
						//     footer
						//   </span>
						// }
					/>

 

Issue encountered:

1. when i click on text input box inside combobox, options  popup closing. ( means i am not able to type or add new contents in text input box) 2. i am trying to implement this with incell. is there any other things to consider wrt Incell edit.

Kumar
Top achievements
Rank 1
 asked on 01 Apr 2024
1 answer
112 views

Hello there,

Link below shows kendo-react-intl is a dependency

https://www.telerik.com/kendo-react-ui/components/charts/get-started/#toc-dependencies

But I want to check to see if there is any workaround to let charts work without kendo-react-intl, thanks!

Wissam
Telerik team
 answered on 29 Mar 2024
1 answer
146 views
I am  using a customNumeric textbox component for incell editing in a grid. But the numeric textbox is dependent on a checkbox column. If the checkbox cell is checked in the grid, then only i want to enable the numeric textbox in in-cell edit. Kindly help
Vessy
Telerik team
 answered on 29 Mar 2024
1 answer
187 views

Hi All,

I used a Numeric filter and found that I can only input up to three decimal places. If I want to enter four decimal places, need to use Custom Filter Cells.

However, I found that when using it, if the user is allowed to input to four decimal places, format="n4" must be set.
After setting, the input integer digits will be automatically filled with 0, and even if I clear the NumericTextBox, 0.0000 will still be displayed.

There is no good implementation of data filtering, do you have any suggestions?

 

Nkpwnb (forked) - StackBlitz

 

Regards,
Sunny

Konstantin Dikov
Telerik team
 answered on 28 Mar 2024
1 answer
124 views
My team and I are trying to apply a very specific style to the Scheduler component. This is what the design team has requested the Scheduler to look like:



We want the Scheduler for its drag and drop functionality since items need to be dragged from the 'OPEN SHIFTS' area to the grid below. Currently we have only found styling for the slots. Is there anyway to apply custom styling to be closer to this specified design? If not, what would be the suggested alternative approach?
Filip
Telerik team
 answered on 28 Mar 2024
1 answer
122 views

Hi All

I use Master-Detail Grids, and details grid have columns filter, when I scroll master grid, the filterOperators of detail will exceed components.

Any suggestions on how to fix this issue?

 

P4acyg (forked) - StackBlitz

 

Regards,
Sunny
Wissam
Telerik team
 answered on 28 Mar 2024
2 answers
124 views

Hi,

First of all, I was able to do 'yarn start' to run the app locally, but when it produced error below when performing 'yarn build'

Lexical error on line 1: Unrecognized text.
  Erroneous area:
1: 100%/var(--kendo-scrollview-views, 1);
^.......................................^
2: }
3:
CompileError: Begins at CSS selector undefined


error Command failed with exit code 1.

I have tried:

1/ Deleted node_modules folder and performed a 'yarn install'

2/ 'yarn upgrade' specific package @progress/kendo-theme-default

 

I did not have the issue before, however, I believe it started to occur after I performed a 'yarn install' (before/without deleting node_modules folder in the first place)

 

Vessy
Telerik team
 answered on 27 Mar 2024
1 answer
104 views
We've tried to duplicate the React Map component demos as closely as possible, but the map body won't display. We've ensured that all necessary packages have been installed and that the parent div has a specified width and height. What are we missing? (Code also attached in file)


Vessy
Telerik team
 answered on 27 Mar 2024
1 answer
149 views
1. I would like to ask if there is a method similar to onSeriesClick or onClick in the Sankey chart to get the data of the clicked Node or Link.

2. In addition, it seems that the function of downloading as pictures is not supported now. purple-smoke-p386z9 - CodeSandbox

Wissam
Telerik team
 answered on 25 Mar 2024
1 answer
110 views

Hi,

I am working on "OData Server Operations" with .NET Core and implement following logic and its working fine.

https://www.telerik.com/kendo-react-ui/components/grid/data-operations/odata-server-operations/

now I am editing a row using modal but after update data, how can I refresh this gird to get latest data.

service.updateData(dataItem).then((response) => {
    //how can i refresh grid here
 })

Wissam
Telerik team
 answered on 25 Mar 2024
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
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?