Telerik Forums
KendoReact Forum
1 answer
224 views

I have a feature to add display a numeric textbox in the grid while doing in-cell editing. & it depends on a checkbox value.  If the check box in another column is  selected then only the the numeric textbox should be editable in. Kindly help me with a numeric textbox as a custom component in incell grid editing.

I tried to create a numeric textbox as custom component. But i am facing couple of issues.

1)If i add the editor as numeric then the checkbox condition is not matching.

2)if i add editor as text, the cursor in the numeric textbox is not showing if i tryto add more than 1 digit.

                                                                            <GridColumn

width='120px'
field='Max'
title='Max'
columnMenu={ColumnMenu}
headerClassName={
isColumnFiltered(Max')
? 'filter-active'
: 'filter-inactive'
}
editable
cells={{
edit: {
text: MaxRecurring,
},
}}
editor='numeric'
/>
Konstantin Dikov
Telerik team
 answered on 06 Mar 2024
2 answers
136 views

Hi,  I've created a drop-down list for my react application. However, when I set the initial value, the required validator is triggering even though a selection has been made. Is there something else I need to be doing?

<Field
name={'site'}
component={FormDropDownList}
textField="title"
dataItemKey="id"
data={sites}
// label={'Select the site you are attending.'}
defaultItem={sitesReducer.nearestSite ? sitesReducer.nearestSite : {
title: 'Select...',
}}
validator={requiredValidator}
/>
Lee
Top achievements
Rank 1
Iron
 answered on 03 Mar 2024
1 answer
602 views

Hi,

The older versions of grid had three dots as the grid column header filter icon. The new versions have a different filter icon. How to use the three dots in new version (@progress/kendo-react-grid@^7.2.3)?  Please see the attached image for the three dots icon.

 

Thanks,

Jie

Wissam
Telerik team
 answered on 01 Mar 2024
1 answer
123 views

Hi Team, 

Overview:

We are using Kendo Ui react grid for showing data . We have more than 15 columns in grid with horizontal scrollbar

 

Problem :

When we are selecting last column in view of screen for sorting/filtering, Kendo Grid automatically changing the view to make that sleected column in center of screen. We are not doing anything explicit for this behaviour to occur . We need to know is this something done  by default through Kendo UI and how we can rectify this issue .

 

Konstantin Dikov
Telerik team
 answered on 27 Feb 2024
1 answer
142 views

Hi, I was just wondering if there is some type check in KendoUI that I could use to check translation files so that nothing is missed in translations?

I've tried to search forums and documentation site and I did not found any examples of that. If there is no support for this at the moment, maybe it should be added, since I am sure that many dev teams struggle with keeping the huge number of translations up to date.

Vessy
Telerik team
 answered on 26 Feb 2024
1 answer
223 views

Hi,

Is there a way to have both rowSpan and Pagination on a grid? 

My grid originally has pagination, now that I am trying to merge rows, which have the same values, within a column into a cell; other columns remain the same. I found that once I achieve that it displayed the grid briefly (enough to observed merged rows), but it crashed right away and report error on pagination. I can't remember the exact error but it has something to do with "process", "slice"...

Thank you for the support

Luu

 

Konstantin Dikov
Telerik team
 answered on 25 Feb 2024
1 answer
176 views
Hello.

We have used jQuery Kendo UI for many years. And we have many templates in Kendo UI for jQuery Templates.

Now we use more React. We have a problem with a lot of jQuery templates. Isn't there some utility, functionality in React Kendo UI that can process the given jquery template? Or some npm package that would be able to process the given template in the React environment?

Well thank you.
Konstantin Dikov
Telerik team
 answered on 23 Feb 2024
1 answer
279 views

Overview

Some components have a ::before pseudoclass with the content property set to the CSS code \200B , which is a zero-width space. However, in our project, this is coming out as ​ in the DOM.

For example, with the <Dialog /> component:

1. We render the dialog within a componet, giving it a title which comes from props

const MyComponent = (props) => {
    return (
        <Dialog title={props.title} onClose={props.onClose}>
            . . .
        </Dialog>
    )
}

2. Locally (running in our development environment) we can see the CSS come out as expected

3. After building and deploying to an environment, the "" gets replaced with ​

Additional Information

After building the project locally, our CSS (build/static/css/main,xyz.css) does not include these symbols:

We are using Craco to build our project:

// craco.config.js

module.exports = {
  style: {
    postcss: {
      plugins: [require('autoprefixer')]
    }
  }
}
Konstantin Dikov
Telerik team
 answered on 22 Feb 2024
1 answer
160 views

I have couple of issues related to in-cell editing in react grid. I am using NextJs as well.

1) The problem i am facing is when i exit from the cell, the particular cell is still in edit mode. i have added an example for numeric textbox. Even though i have clicked outside the grid, the border is till highlighted & the field is in edit mode.  I am already using custom cell for different fields like( Dropdown list, checkboxes. textboxes, Numeric-text-boxes)

2) In the above numeric textbox, when i add any integer, it will display the number & the cursor will vanish immediately. I have to again click on the numeric text box to add the next  number in the same cell.

3) I have almost 300 records in the grid. I am experiencing slowness in rendering the cells when i edit different cells .

 

I have referred to this example:

https://stackblitz.com/edit/react-czmt6w-tpf8qh?file=app%2FcustomCells.jsx,app%2Fmain.jsx

 

 

Konstantin Dikov
Telerik team
 answered on 22 Feb 2024
0 answers
97 views

Hi all, I am trying out Kendo UI React Scheduler to make a custom appointment dashboard. The view I am interested in is the DayView.

I have done various tests and have some questions that I have not been able to find answers to.

  • is there a possibility to set a fixed width to the items? Via API it does not seem feasible and the workarounds I have tried do not seem to have the desired effect either (the internal algorithm assign width and positions dynamically)
  • is there a possibility of forcing a custom sorting of items starting at the same time? The only way I have found is to sort the data array however I have noticed that the scheduler still gives precedence to events that last longer than shorter ones, regardless of the sorting I have set.

Thanks in advance for your attention.

Fabio

Fabio
Top achievements
Rank 1
 asked on 21 Feb 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
+? 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?