or
1 answer
127 views
Hi,
Please see this example https://codesandbox.io/s/admiring-torvalds-fcs5rr.
When Grid virtualization is enabled. Clicking a row gives a wrong row in onSelectionChange callback. I tried a workaround to add skip to startRowIndex in onSelectionChange callback:
const updatedEvent = {
...event,
startRowIndex: event.startRowIndex + dataState.skip,
endRowIndex: event.endRowIndex + dataState.skip
};
This works fine as long as there is no grouping. If I group a column, such as 'Category Name', after scrolling down and clicking a row, the console shows the wrong row being selected. Any suggestions?
Thanks,
Jie
Konstantin Dikov
Telerik team
answered
on
17 Aug 2023
1 answer
329 views
Please provide a solution on how to change theme colors beyond just light and dark modes. I am using Sass and style components, but I would like to implement the ability to select and change multiple colors within a theme. I am also utilizing the Kendo ThemeBuilder to create a custom theme."
If you're looking to implement a theme color change functionality using Sass and style components in conjunction with the Kendo ThemeBuilder, you might want to explore the documentation or resources specific to those tools for detailed guidance on how to achieve your
Vessy
Telerik team
answered
on
15 Aug 2023
2 answers
283 views
Hi,
Is there any example about Kendo grid grouping with ODdata ?
I couldn't find example on documentations.
Thanks.
Wissam
Telerik team
answered
on
15 Aug 2023
1 answer
1.0K+ views
Hello,
I am trying to style and size the sort arrow icon that Kendo provides in the react data grid. I have attached a picture of the specific arrow I am talking about. I have managed to change the color of the sort icon with the CSS below, howerver I have not figured out how to change the sizing of the arrow here. If possible, I would also like to adjust the icon shape (make it thicker and shorter), and maybe use a custom icon for it if possible. Can you advise me on some possible solutions I could implement? Thank you.
.k-grid-header .k-sort-icon svg,
.k-grid-header .k-sort-order svg {
color: rgba(232, 105, 36, 1);
}
}
1 answer
430 views
As I shown in the attached jpg file, I want to remove the first column which is showing the expand button (+) using Kendo React. As I'm a new to kendo react I have tried by setting this column width to zero but the css is not applying it. Then I have tried to apply width using the query selector but that was also not worked. I also tried by applying "display: none" to .k-hierarchy-cell, its working and hiding that first column but it is shrinking the next column to its size. Please guide me on this for expanded rows.
Konstantin Dikov
Telerik team
answered
on
14 Aug 2023
2 answers
519 views
I have added a custom column menu to my kendo grid. It has a dropdown list element, where users can choose an option and the grid data is filtered. This all works successfully.
I have one issue. When the user clicks on the Filter or Clear Button, the column menu does not disappear. Clicking outside the column menu does not hide the column menu.
I have to click on the column menu again to focus it, then when I click outside the column menu, it disappears.
I cannot get access to the div 'k-grid-columnmenu-popup', as this is controlled by kendo and does not appear in my column menu component.
Has anyone come up against this problem and solved it?
SoH
Top achievements
Rank 1
Iron
Veteran
Iron
Rank 1
Iron
Veteran
Iron
answered
on
11 Aug 2023
1 answer
434 views
"Currently, I am using a drawer, but the issue is that the content inside the drawer is not responsive. I am attempting to create a wrapper for the content within the page, but I'm encountering difficulties with the CSS not functioning as expected. Could you kindly suggest an appropriate method for designing a responsive page?
========================================================================================
"I am currently using a wrapper for sharing my code, for example."<wrapper direction="column">
<row>
<div> my page code </div>
<row>
</wrapper>
==============================================================================================
import React, { ReactNode } from "react";
import styled from "styled-components";
interface WrapperOptions {
children: ReactNode;
direction?: "row" | "column";
}
const StyledWrapper = styled.div<{ direction?: string }>`
background-color: #ffffff;
width: 100%;
height: 100vh;
display: flex;
overflow: auto;
flex-direction: ${({ direction }) => direction};
`;
function Wrapper({ children, direction }: WrapperOptions) {
return (
<StyledWrapper direction={direction}>
{children}
</StyledWrapper>
);
}
export { Wrapper };
Konstantin Dikov
Telerik team
answered
on
11 Aug 2023
1 answer
218 views
Hello.
My question is. If I use a template for column (props: cell) and locked columns in the same grid. Grid does not behave correctly when scrolling. The body/columns of the grid scrolls, but the headers do not. How to use it correctly? We use version: 5.10.0
Well thank you.
My question is. If I use a template for column (props: cell) and locked columns in the same grid. Grid does not behave correctly when scrolling. The body/columns of the grid scrolls, but the headers do not. How to use it correctly? We use version: 5.10.0
Well thank you.
Konstantin Dikov
Telerik team
answered
on
10 Aug 2023
1 answer
93 views
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Chart, ChartSeries, ChartSeriesItem, ChartCategoryAxis, ChartCategoryAxisItem, ChartTitle, ChartLegend } from "@progress/kendo-react-charts";
import 'hammerjs';
const categories = [2002, 2003, 2004];
const series = [{
name: "India",
data: [3.907, 7.943, 7.848]
}, {
name: "Russian Federation",
data: [4.743, 7.295, 7.175]
}, {
name: "Germany",
data: [0.21, 0.375, 1.161]
}, {
name: "World",
data: [1.988, 2.733, 3.994]
}];
const areaData = [{
name: "World",
data: [3.988, 3.733, 3.994]
}, {
name: "Germany",
data: [2.21, 2.375, 2.161]
}, {
name: "Russian Federation",
data: [1.743, 1.295, 1.175]
}, {
name: "India",
data: [0.907, 0.943, 0.848]
}];
const pieData = [{
name: "India",
share: 0.24
}, {
name: "Russian Federation",
share: 0.26,
explode: true
}, {
name: "Germany",
share: 0.1
}, {
name: "World",
share: 0.4
}];
const ChartContainer = () => <>
<div className="row mb-3">
<div className="col-6">
<div className="k-card">
<Chart style={{
height: 350
}}>
<ChartTitle text="Column Chart" />
<ChartLegend position="top" orientation="horizontal" />
<ChartCategoryAxis>
<ChartCategoryAxisItem categories={categories} startAngle={45} />
</ChartCategoryAxis>
<ChartSeries>
{series.map((item, idx) => <ChartSeriesItem key={idx} type="column" tooltip={{
visible: true
}} data={item.data} name={item.name} />)}
</ChartSeries>
</Chart>
</div>
</div>
<div className="col-6">
<div className="k-card">
<Chart style={{
height: 350
}}>
<ChartTitle text="Line Chart" />
<ChartLegend position="top" orientation="horizontal" />
<ChartCategoryAxis>
<ChartCategoryAxisItem categories={categories} startAngle={45} />
</ChartCategoryAxis>
<ChartSeries>
{series.map((item, idx) => <ChartSeriesItem key={idx} type="line" tooltip={{
visible: true
}} data={item.data} name={item.name} />)}
</ChartSeries>
</Chart>
</div>
</div>
</div>
<div className="row">
<div className="col-6">
<div className="k-card">
<Chart style={{
height: 350
}}>
<ChartTitle text="Area Chart" />
<ChartLegend position="top" orientation="horizontal" />
<ChartCategoryAxis>
<ChartCategoryAxisItem categories={categories} startAngle={45} />
</ChartCategoryAxis>
<ChartSeries>
{areaData.map((item, idx) => <ChartSeriesItem key={idx} type="area" tooltip={{
visible: true
}} data={item.data} name={item.name} />)}
</ChartSeries>
</Chart>
</div>
</div>
<div className="col-6">
<div className="k-card">
<Chart style={{
height: 350
}}>
<ChartTitle text="Pie Chart" />
<ChartLegend position="top" orientation="horizontal" />
<ChartSeries>
<ChartSeriesItem type="pie" overlay={{
gradient: "sharpBevel"
}} tooltip={{
visible: true
}} data={pieData} categoryField="name" field="share" />
</ChartSeries>
</Chart>
</div>
</div>
</div>
</>;
ReactDOM.render(<ChartContainer />, document.querySelector("my-app"));
Konstantin Dikov
Telerik team
answered
on
10 Aug 2023
1 answer
104 views
Can the select function of the Grid be limited to only triggering onSelect by clicking the checkbox? because when the Grid has detail at the same time, clicking any cell will cause the component of the detail to re-render
Konstantin Dikov
Telerik team
answered
on
10 Aug 2023
