Questions on KendoReact Forum

3 answers

249 views

PanelBarItem: how to add control next to title?

I have made a filter panel using the PanelBar. Each PanelbarItem contains the controls (checkboxes, multiselect, etc) to filter a dataset. I would like to add a checkbox to "select all" in the PanelBarItem title area so the user can manage the child controls in bulk. The component signature seems to be <PanelBarItem title="xxx" .../> where "xxx" is a string. I tried to get lucky by passing <PanelBarItem title={ () => (<Checkbox ... />)}>, but didn't work. Any help would be appreciated.

General Discussions

answered on 10 Jul 2020

2 answers

78 views

Categories Axis display KendoReact

Hello,

I am trying to get the same display for the Categories Axis when having negative values in the Values axis like this example https://dojo.telerik.com/AYuPogoC/124,

But when trying this with KendoReact this is not working. https://stackblitz.com/run/?file=app%2Fmain.jsx

General Discussions

answered on 08 Jul 2020

3 answers

133 views

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

190 views

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

455 views

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.7K+ 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

813 views

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.0K+ 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

108 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

890 views

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