Questions on KendoReact Forum

3 answers

176 views

[Solved] Incorrect index returned in GridColumnResizeEvent

I have a master-detail grid and I've enabled column resizing.

I've noticed that when a column resize event is triggered on the master grid (i.e. the one that contains the expand/collapse HierarchyCells), the index field returned from this event is out by 1 when compared to the columns field in the same event. The index is too large by 1.

When a column resize event is triggered on a grid that does not contain HierarchyCells, the index field returned is correct.

In the attached files, you'll see the address1 column was resized, however, an index of 5 was returned instead of 4.

General Discussions

answered on 07 Jul 2020

1 answer

212 views

[Solved] Scheduler custom Task in Agenda view

Hi,

I want to override SchedulerTask children (something similar like in SchedulerItem example) but so far without any luck. Here is my code https://stackblitz.com/edit/react-7h4x9z. This should be possible, right?

General Discussions

answered on 07 Jul 2020

2 answers

481 views

[Solved] Moving Window Outside of Component

So I am hoping to use a button to open a window which will have a form for editing or adding data which is inside of the Grid Kendo UI component. Basically when they hit the edit button I would like a window to pop up pre-populated with some data from that line inside of the grid.

Getting the data passed to the window is not a problem, the problem is that the window seems to only render inside of the grid component where I would actually like it to render inside of the browser window if possible. I am using a command cell to place the buttons inside of the grid, ultimately the window component is housed inside of this command cell. I am doing this because I dont believe it is possible to move data back up to parent components from a child component, i.e. if i change state on a child component I can not pass that state up to the parent component. Below is my code for the command cell:

import React from 'react';

import { GridCell } from '@progress/kendo-react-grid';

import { Window } from '@progress/kendo-react-dialogs';

import { Dialog, DialogActionsBar } from '@progress/kendo-react-dialogs';

import { Form, Field, FormElement } from '@progress/kendo-react-form';

import { Error } from '@progress/kendo-react-labels';

import { Input } from '@progress/kendo-react-inputs';

import { Progressbar, ChunkProgressBar } from '@progress/kendo-react-progressbars'

import {Fullscreen} from "@material-ui/icons";

export function DataGridCommandCell({ edit, remove, add, update, discard, cancel, editField }) {

return class extends GridCell {

constructor(props) {

super(props);

this.state = {

windowVisible: false

};

this.toggleEditWindow = this.toggleEditWindow.bind(this)

}

toggleEditWindow(){

this.setState(

{windowVisible: !this.state.windowVisible}

)

console.log(this.props.dataItem)

}

render() {

const { dataItem } = this.props;

const handleSubmit = (dataItem) => alert(dataItem.input.test);

return (

<div>

<button className="k-button k-primary" onClick={this.toggleEditWindow}>Edit</button>

{this.state.windowVisible &&

<Window

title = {'Executive Actions'}

initialHeight={650}

initialWidth={1000}

onClose={this.toggleEditWindow}

initialLeft={1}

initialTop={1}

stage={'Fullscreen'}

>

<div>

test

</div>

</Window>

}

</div>

)

}

};

export default DataGridCommandCell

General Discussions

answered on 07 Jul 2020

12 answers

1.8K+ views

Enable disable the fields/controls in React Kendo Grid

I want to disable the fields/controls in React kendo grid based on input.
For example : Based on selection of value in Full Name, I want to disable the Birth Date column

General Discussions

answered on 07 Jul 2020

2 answers

849 views

[Solved] Passing Props to Detail row component

Is it possible to pass props to the Detail Row Component from the parent grid component?

General Discussions

answered on 06 Jul 2020

10 answers

1.1K+ views

Chart style customization

Hi,

I have a general chart customization questions:

1. Can I change chart background fill? (e.g. I have 2 charts on my page. One should have white background and second light blue)

2. Can I change X and Y axis labels color/weight? (e.g. I have number on Y axis and Months on X axis and they should be bold.)

3. Can I change legend text color/weight and icon shape(now it is a dash). (e.g. icon legend circle and bold text)

General Discussions

answered on 03 Jul 2020

1 answer

121 views

Grid pager templates

Is there a way to specify a render method for the grid pager?

I would like to be able to split the k-pager-info into two separate elements (total items and page number) and change the positioning of these elements significantly.

General Discussions

answered on 30 Jun 2020

1 answer

951 views

[Solved] DropDownList & appendTo

I want to scope my styles for the list items, but no matter how I try to pass in an HTMLElement reference to the popupSettings appendTo property, I don't get any items rendering in the DOM. Is this API documented correctly and does the feature work properly?

Wrappers for React

answered on 30 Jun 2020

1 answer

98 views

Help with a use case

Hello Telerik Community,
I am currently working on a project which has a usecase as shown in
image. The data is present in JSON which is rendered as in image. On
Click of "+" button, i can add new Action just below the arrowhead of
the "+" button. I was wondering if this use case is solvable using
KendoReact ?
Any help would be highly appreciated.

General Discussions

answered on 30 Jun 2020

3 answers

296 views

Slider step

Hello

I was wondering how the step props on the Slider works. In the attached example the current value on the onChange event has multiple decimals, as shown in the console. I was expecting natural numbers by the 10 (0, 10, 20 ... 100). Do I understand the meaning of the step props wrong? If so, how do I get distinct values from the slider?

https://stackblitz.com/edit/react-ygjp8x

General Discussions

answered on 25 Jun 2020