Telerik Forums
KendoReact Forum
1 answer
237 views
Hello! I am trying to get a Grid with Virtual Scrolling working where the data is fetched as needed, as opposed to all loaded in at once. I have not managed to get it working locally. All of the documentation I have been able to find has examples with all the data pre-loaded into the React state, which is not feasible in our use case. Would you be able to provide any examples on how this is expected to be done? I have been looking into `onPageChange` and `onDataStateChange` but cannot determine how they are intended to be used here. Is it expected that the new data is returned from these functions? Or is it expected that, once the data is fetched, the overall `data` variable passed into the grid is manipulated (sliced) to only pass in the expected rows given skip and take?
Filip
Telerik team
 answered on 26 Apr 2024
1 answer
241 views

Hello there. We have a grid using the process method to filter rows. We're currently using version 5.16.1, Typescript and wanted know if there was a way to dynamically hide (or show) the column menu filter icons in the header using an external button's onClick function?

In our project, we have columns that are using a custom header cell so filtering is not available on those specific columns. However, we just want to be able to click a button outside of the grid that can toggle the filter icons to show which columns are available to filter at the same time.

Would that be possible?

Konstantin Dikov
Telerik team
 answered on 26 Apr 2024
1 answer
205 views

I am using kendoreact tooltip to show  the error on hovering of cell in the grid. When i hover on the error, i wan to change the height, width, background-color & text color of the tooltip. Please help. i tried to customize using .k-tooltip class. But its not working.  Please help


Konstantin Dikov
Telerik team
 answered on 25 Apr 2024
1 answer
740 views
Hello, I am using a Kendo React DropDownList in a form, but I have an issue. I receive data in batches of 10 from the server-side due to pagination settings. How can I implement scrolling so that the dropdown can display the next 10 data entries when scrolled
Konstantin Dikov
Telerik team
 answered on 25 Apr 2024
1 answer
237 views

Hi!

I'm brand new to this framework and learning a lot so apologies if this is a silly question.

I have created a grid - it has a text column and a chip column that represents the status of the record. I implemented a context menu for the grid rows but it is not triggered on the chip column...just on the text column. How can I fix this?

Here is my code:


 <Grid
        className="custom-grid"
        data={people.slice(page.skip, page.take + page.skip)}
        skip={page.skip}
        take={page.take}
        total={people.length}
        scrollable="none"
        pageable={{
          buttonCount: 3,
          responsive: false,
          pageSizeValue: pageSizeValue,
        }}
        onPageChange={pageChange}
        onContextMenu={handleContextMenu}
      >
        <GridColumn field="PersonName" title="Full Name" />
        <GridColumn
          field="Status"
          title="Status"
          cell={(props) => (
            <ChipCell
              {...props}
              text={props.dataItem['Status']}
              className={props.dataItem['Color']}
            />
          )}
          width="12.5rem"
        />
      </Grid>
      <ContextMenu
        className="custom-context-menu"
        show={show}
        offset={offset.current}
        // onSelect={handleOnSelect}
        onClose={handleCloseMenu}
      >
        <MenuItem text="Option 1" />
        <MenuItem text="Option 2" />
      </ContextMenu>
    </div>

Konstantin Dikov
Telerik team
 answered on 24 Apr 2024
1 answer
115 views

Hello, I'm using Kendo Grid with select drag functionality in a tile layout that has reorderable function.

The problem now is that my tiles begin reordering with drag capabilities when I attempt to select several rows in my grid.

code : Q1u7xf (forked) - StackBlitz

you can see the video here.

https://www.loom.com/share/5ffbe26f35314f2882ec8285f523a067?sid=07a9286c-6e41-46aa-9e71-a64abc1d2558

According to the Kendo jQuery documentation, we may only rearrange the tiles in the header section.

Kendo UI for jQuery TileLayout Documentation - TileLayout reordering - Kendo UI for jQuery (telerik.com)

So, is it possible to rearrange tiles using just the header portion in ReactJS?

 

Konstantin Dikov
Telerik team
 answered on 23 Apr 2024
1 answer
137 views
Which version must one download to get all the translations for these languages "en-US", "fr-CA", "de-DE", and "zh-CN"?

We seem to be missing translations in Canadian French "fr-CA" for "Sort Ascending", "Sort Descending", "And", and "Or".
Wissam
Telerik team
 answered on 23 Apr 2024
1 answer
126 views

On the Scheduler, we have three requirements that we need to implement on the first row:

  • We need the first row (Open Shift) to be "sticky" and to stay in view at the top of the Scheduler as we scroll
  • We need the SchedulerItems within the sticky row to remain inside the sticky row as we scroll
  • We need to be able to drag SchedulerItems from the sticky row into different lower rows


We got close to implementing these features with the WeekView, but our rows need to correspond to employees and not hours, and we add the employee data as resources.  Every time we add resources to the Scheduler with the WeekView it adds them as an additional row column instead of replacing the hours column. We also tried creating our own custom slot to have the SchedulerItems remain sticky when scrolling, but it still wouldn't remain in the sticky row.

So my specific questions are: 1) Can the three requirements be implemented in the Scheduler? 2) Is using resources the correct way to add the employee column for the rows? If not, what is the correct approach?

Konstantin Dikov
Telerik team
 answered on 22 Apr 2024
0 answers
115 views

Hey team, so, I suspect there is something perhaps wrong with the scss files or the css files after I run sass to compile it. I have been trying a few different material related themes that come out of the box (not tinkering). Just to list a few:

  • material-lime.scss
  • material-lime-dark.scss
  • material-sky.scss

I haven't tried the others yet. But one of them seems fine, material-nova.scss appears to be okay after running the sass command. My point being, when I tried to compare my own app and the examples on the website, it always looks different. Especially for the selected RadioButtons.

Also, just a separate but important question. I have been experimenting and trying different approaches to importing the css files after I did a compilation. For example:

sass material-lime.scss material-lime.css

And then after that I would import material-lime.css to my App.js file.

But when the application is doing a hot reload, the changes aren't reflected on the web page. Separately, I have experimented with import the css file in the component's index.jsx file. Sometimes it works, sometimes it doesn't. So I'm really curious as to why it's like this.

Is there a proper method to importing the themes/styles and then seeing the changes reflected on the web page after running npm start?

What is your recommendation?

P.S. At this present point, I clearly haven't tested every single other UI components from the library, so I won't know if there are others that are affected as well. So far, I've only discovered the issue with the RadioButton and RadioGroup components.

TheN3rdSquad
Top achievements
Rank 2
 updated question on 20 Apr 2024
2 answers
332 views

I am using Kendo React for Griding and using only for development and for learning and testing not for the commercial purpose.

Is there a way to Achieve all attribute,functionlity without getting license key (with out water Mark).

Remember This is only for testing,Learning, Development not for commercail purpose

kha
Top achievements
Rank 1
Iron
Iron
 answered on 19 Apr 2024
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?