or
1 answer
14 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
1 answer
23 views
I am using the TreeView component with draggable enabled. I don't think that the DragClue indicator is the most intuitive way to see where the drop target is. I would like to add a line to indicate where the drop target is. I attached some images showing what I am trying to achieve. I'd like to have a blue line/indicator showing when I am dropping a node between 2 other nodes, and I would like to highlight the target node when I am dropping a node on top of another node, like show in the attached screenshot.
Any ideas on how to achieve this would be appreciated!
Konstantin Dikov
Telerik team
answered
on
01 Apr 2024
0 answers
14 views
I want to change the upload icon in Drag&drop component to before uploading the file.
& after uploading the file
Abhishek
Top achievements
Rank 1
Iron
Iron
Iron
Rank 1
Iron
Iron
Iron
asked
on
12 Mar 2024
1 answer
25 views
Greetings!
I am using the Kendo-React data grid for live updates. However, I am facing an issue where duplications of rows occur inside the grid when trying to reorder a row by drag and drop. It works fine for static data but doesn't work for live updates. Can someone help me understand why this is happening?
I just used the same code mentioned in the below documentation.
https://www.telerik.com/kendo-react-ui/components/grid/rows/row-reordering/
Any assistance would be appreciated.
Regards,
Fareed Alam
Konstantin Dikov
Telerik team
answered
on
28 Dec 2023
2 answers
46 views
Hello?
I'm currently refactoring our project from Angular.js to React.
In this process, I'm working on implementing the functionality of dragging and dropping rows from a grid to a treeview, which we used in the previous Kendo jQuery version. However, I couldn't find information about this feature.
While details about drag and drop between grids or within a treeview are available, it seems that drag and drop from a grid to a treeview has not been implemented yet?
Bernd
Top achievements
Rank 5
Bronze
Bronze
Iron
Rank 5
Bronze
Bronze
Iron
answered
on
15 Nov 2023
1 answer
25 views
We are exploring the KendoReact library and are specifically interested in file manager toolbar component, and we are wondering if there is a provision to upload the folder via drag and drop.
Wissam
Telerik team
answered
on
02 Nov 2023
1 answer
44 views
Hi Friends,
I'm attempting to create a kendo table with a selection checkbox cell and a drag hand cell on Row. which will allow the user to drag each table row by maintaining their selections as well.
Currently I implemented some code but it's creating some duplicate records while dragging and dropping.
Please find stackblitz URL for same
https://stackblitz.com/edit/react-8rerrr?file=app%2Fmain.tsx
can anyone help me to figure this issue
I'm attempting to create a kendo table with a selection checkbox cell and a drag hand cell on Row. which will allow the user to drag each table row by maintaining their selections as well.
Currently I implemented some code but it's creating some duplicate records while dragging and dropping.
Please find stackblitz URL for same
https://stackblitz.com/edit/react-8rerrr?file=app%2Fmain.tsx
can anyone help me to figure this issue
Wissam
Telerik team
answered
on
05 Sep 2023
1 answer
31 views
Can I add the groupable column and inline editing feature both in a Data Grid?
Konstantin Dikov
Telerik team
answered
on
28 Aug 2023
1 answer
42 views
Hi.
I have setup an example app with a Splitter component that devides the screen between a TreeView and a DataGrid component and setup a drag&drop scenario wher I am able to drag grid rows into the tree to add tree branches.
https://stackblitz.com/edit/vitejs-vite-k3wgr5?file=src%2FApp.tsx
If I want to use the drag handles in the Datagrid to drag a grid row onto the TreeView, the row vanishes under the left side of the Splitter window but I want to keep it visible when I drag it over the tree. I already had a similar issue a while ago and tried to use the same solution but it doesn't seem to work.
Can you help me out and show me how to keep the row visible while dragging it over the tree on the left?
Thanks,
Greetings,
Bernd
Konstantin Dikov
Telerik team
answered
on
21 Aug 2023
1 answer
54 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
