Questions on KendoReact Forum

3 answers

392 views

Hi,

How to enable kendo tooltip for scheduler? In my example there is a custom child in the SchedulerItem where kendo tooltip is working but if I hover over item title (e.g. "Car Service") browser tooltip is shown instead of kendo.

General Discussions

answered on 10 Jul 2020

3 answers

505 views

[Solved] Scheduler custom edit dialog

Hi,

I created a custom edit dialog with one input (for now), "submit" and "close" button for my item by adding a form prop to SchedulerEditItem https://stackblitz.com/edit/react-zxvhmh (double click on any item and dialog will open)

My questions are:

1) Did I implement the submit correctly? Because I did not find any examples and the scheduler documentation in very confusing.

2) I need a similar dialog open on slot double click. Is there a prop like "form" available for the slot? If not what is your recommendation?

General Discussions

answered on 10 Jul 2020

3 answers

297 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

103 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

188 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

222 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

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