So we are implementing the scheduler and are getting the following error:

index.js:1 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in KendoReactForm (created by SchedulerForm)
    in SchedulerForm (created by KendoReactSchedulerEditSlot)

This error occurs after trying to close the edit event window provided when trying to add or edit an event on any day. We've commented out pretty much every piece of code that we wrote and left only the scheduler component in its most basic form. Cant seem to get rid of the error no matter what we tried.  The code is below, though i removed a few pieces of identifiable information:

import React, {Component} from 'react';
import { Scheduler, TimelineView, DayView, MonthView } from '@progress/kendo-react-scheduler';
import { guid } from '@progress/kendo-react-common';
import { Day } from '@progress/kendo-date-math';
import axios from 'axios';


export default class SchedulerComponent extends Component {
constructor(props) {
super(props);
this._isMounted = false
this.state = {
// data: [{}],
// loading: false,
// hasError: false,
// setData: null
};
// this.handleDataChange = this.handleDataChange.bind(this);
}

componentDidMount () {
this._isMounted = true
// this.setState({loading: true, mounted: true})
// .then( ( response ) => {
// this.setState( {
// data: response.data,
// loading: false
// } )
// console.log(this.state.data)
// } )
// .catch(err => {
// this.setState( {
// hasError: true,
// loading: false
// } )
// } )

}

componentWillMount () {
this._isMounted = false
}

// handleSubmit = event => {
// event.preventDefault();

// const dataupdate = {
// data: this.state.data
// };

// axios.post('/post_scheduler_data', { dataupdate })
// .then(res => {
// console.log(res);
// console.log(res.data);
// })
// }

componentWillUnmount() {
this._isMounted = false
}

handleSubmit = () => {
this._isMounted && this.setState({ready: true})
// const updateData = {
// data: this.state.data
// }
// axios.post('/post_scheduler_data', updateData)
// .then(response =>
// console.log(response.data)
// )
// .catch(error => console.log(error));
}

handleDataChange = () => {
this._isMounted && this.setState({ready: true})
}

// handleDataChange = ({ created, updated, deleted }) => {
// setData = this.state.data
// setData(old => old
// // Filter the deleted items
// .filter((item) => deleted.find(current => current.id === item.id) === undefined)
// // Find and replace the updated items
// .map((item) => updated.find(current => current.id === item.id) || item)
// // Add the newly created items and assign an `id`.
// .concat(created.map((item) => Object.assign({}, item, { id: guid() }))))
// }





render() {
// const currentYear = new Date().getFullYear();
// const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
// const displayDate = new Date(Date.UTC(currentYear, 7, 24));
//
// const parseAdjust = (eventDate) => {
// const date = new Date(eventDate);
// date.setFullYear(currentYear);
// return date;
// }
//
// const customModelFields = {
// id: 'TaskID',
// title: 'Title',
// description: 'Description',
// start: 'Start',
// end: 'End',
// recurrenceRule: 'RecurrenceRule',
// recurrenceId: 'RecurrenceID',
// recurrenceExceptions: 'RecurrenceException',
// category: 'Category'
// };
//
// const sampleData = this.state.data.map(dataItem => (
// {
// id: dataItem.TaskID,
// start: parseAdjust(dataItem.Start),
// startTimezone: dataItem.startTimezone,
// end: parseAdjust(dataItem.End),
// endTimezone: dataItem.endTimezone,
// isAllDay: dataItem.isAllDay,
// title: dataItem.Title,
// description: dataItem.Description,
// recurrenceRule: dataItem.RecurrenceRule,
// recurrenceId: dataItem.RecurrenceID,
// recurrenceExceptions: dataItem.RecurrenceException,
//
// category: dataItem.category,
// ownerID: dataItem.OwnerID,
// personId: dataItem.OwnerID
// }
// ));
//
// const sampleDataWithResources = this.state.data.map(dataItem => (
// {
// id: dataItem.TaskID,
// start: parseAdjust(dataItem.Start),
// startTimezone: dataItem.startTimezone,
// end: parseAdjust(dataItem.End),
// endTimezone: dataItem.endTimezone,
// isAllDay: dataItem.isAllDay,
// title: dataItem.Title,
// description: dataItem.Description,
// recurrenceRule: dataItem.RecurrenceRule,
// recurrenceId: dataItem.RecurrenceID,
// recurrenceExceptions: dataItem.RecurrenceException,
// roomId: randomInt(1, 2),
// category: randomInt(1, 2),
// }
// ));
//
// const sampleDataWithCustomSchema = this.state.data.map(dataItem => (
// {
// ...dataItem,
// Start: parseAdjust(dataItem.Start),
// End: parseAdjust(dataItem.End),
// PersonIDs: randomInt(1, 2),
// Category: randomInt(1, 2),
// }
// ));
//
// const resources = [{
// name: 'Meeting Type',
// data: [
// ],
// field: 'category',
// valueField: 'value',
// textField: 'text',
// colorField: 'color'
// }]

return(
<Scheduler
// resources={resources}
// data={sampleData}
// onDataChange={this.handleDataChange}
editable={{
add: true,
// remove: true,
// drag: true,
// resize: true,
// edit: true
}}
// defaultDate={displayDate}
// defaultView="month"
// onSubmit={this.handleSubmit}
>
{/*<MonthView */}
{/* title="Month"*/}
{/* selectedDateFormat="{0:M}"*/}
{/* selectedShortDateFormat="{0:M}"*/}
{/*/>*/}
{/*<DayView numberOfDays={2}/>*/}
{/*<TimelineView*/}

{/* numberOfDays={2}*/}

{/* columnWidth={75}*/}
{/* slotDuration={60}*/}
{/* slotDivisions={1}*/}

{/* startTime={"08:00"}*/}
{/* endTime={"18:00"}*/}

{/* workDayStart={"08:00"}*/}
{/* workDayEnd={"17:00"}*/}

{/* workWeekStart={Day.Sunday}*/}
{/* workWeekEnd={Day.Monday}*/}

{/* showWorkHours={false} */}
{/*/>*/}
</Scheduler>

)
}
}

Hi, 

Why there are no examples of Boolean and date grouping in the documentation? these are common data types and should be supported without overriding the default grid behavior. In my example date is displayed but not formatted and Boolean is missing https://stackblitz.com/edit/react-7exwjp?file=app%2Fmain.jsx . 

I was having issues adding a filter to my kendo grid, So to troubleshoot I went to

example 1
https://www.telerik.com/kendo-react-ui/components/grid/filtering/

I copied both the main.jsx, and sample-products.jsx code verbatim from the first example "filter rows" into an app on my local host but I am still getting the same error. I can not complile main.jsx in vscode that is copied directly from the documentation. I know the code "works" because you can click "open in stackblitz" in the link and it works perfectly. Here is main.jsx (copied from the documentation) and the error below.

Do you know what could cause the identical code to compile/work in Stackblitz, but not in vscode? Maybe I have an outdated package I am not sure? thank you!

Hi,

I am building a grid with DropDownList and Editable field. I am struggling to change the value of the DropDownList by changing state. All the DropDownLists have same set of values appearing in each row of the Grid.

I have tagged Id field of DropDownList with the rendered Id of the master data. Hence, after 'onChange' event fires, I am able to track the Id and lookup for the index of master data by the Id and then update the selected DropDownList value in it. I am then setting the state with the changed data which shows the selected value in the DropDownList.

Is there an easy way to handle DropDownList state change? How could I assign state for each row of a grid?

return (
            <Grid
                data={state.data}
                onItemChange={itemChange}
                editField="inEdit"
            >
                <Column field="Name" title="Name" sortable={false} />
                <Column field="Code" title="Code" cell={CodeList}/>
                <Column field="Notes" title="Notes" />
            </Grid>

const CodeList = (props) =>
    {
        return(
               <DropDownList 
                data={CodeNames} 
                value={props.dataItem.Code}
                onChange={handleChange}
                id={props.dataItem.Id}
            />
        );
    }

I use Telerik RadAjax/ASP under windows, and now I'm working on projects under Linux.

I've signed into Telerik.com under my licensed user ID, and I've used npm to download KendoReact modules; so far (in one day), everything works fine.   But -- all of the Telerik website views keep telling me I need to "Start Free Trial" as if there's some kind of licensing checks in place.

I will likely make sure my application can run under Windows too, but for the most part I'm using Linux the vast majority of the time, except when I do some maintenance on my RadAjax/ASP.NET application.

Of course, I don't want to spend days building up my application and then run into some kind of issues.

So -- is there something I need to under Linux other than using npm to download KendoReact modules?   

Hi,

How to make groupable grid selectable? In my example select row style is working only if I remove all groups https://stackblitz.com/edit/react-twfdtq

How to enable bottom scrollbar on a TreeView? Right now the component is checking only for the first level item width and everything else is cut and without bottom scrollbar.  example

I saw the webinar yesterday and started adopting the new "Form". Over all great way to work with forms.

1. I did not see a way to have "< Field component={textarea}". using just <textarea> does not add the value to  the final object the "handleSubmit" get. Does it mean I have to replace all textarea with Editor?
2. <Field component={Upload} does not error but does not show in the final object the "handleSubmit" how can I do that?
3. "formRenderProps.onChange(.." can only be used inside the <Form ... />.  So I am forced to do anonymous functions on the onChange of each field that sets other fields. is there another way to allow  named functions?
4. <fieldset><legend>Some text</legend> always shows "Some text" all uppercase. https://www.w3schools.com/tags/tag_legend.asp shows no change of case.

Thank you

I have a date field on my class, displays the data using the below GridColumn, but, I cannot get it to format the date string, no matter what I do I always seem to get 2020-07-31T00:00:00

<GridColumn
                field="del_Date"
                title="Del Date"
                width="150px"
                editable={false}
                filter="date" 
                format="{0:D/M/YY}"
              />

I have followed the documentation and the above seems to be correct, what could I be doing wrong?

Hi All

Fairly new to typescript/react

I am trying to set the sort properties for a sub grid in a GridDetailsRow component (class DetailComponent extends GridDetailRow )

I have no issue with sort setting on the parent/master grid using the state, ie:

this.state = {
      data: productsInit,
      gridDataState: {
        sort: [{ field: "lineitemnumber", dir: "asc" }],
        page: { skip: 0, take: 100 }
      }

}

But how do I use the global state to set a different sort on subgrids?

Any help would be great, thanks