Hi,

Is there a way to export (to Excel or PDF) only filtered data on Kendo React Grid?

The example (below URL) from KendoReact provides way to export to Excel and PDF, but if I filter by costomerId and if I export it exports all the data. I'm looking for way to export only the filtered data.

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

Any help is appreciated.

Thanks

Hello!

Is it possible to use KendoReact drawer in a non-navigational way ?

What I'm tryingbto acheive is the same as "Antd Drawer" but with KendoReact : a floating layer that slides out from the edge of the page without beeing related to some menu. Idealy "drawers" could be nested too.

I'm not sure if this is possible with KendoReact Drawer but maybe with some other component ?

Thanks for any help & Take Care !

I have a Switch component as a cell. When I press "Space" key the grid scrolls down. Is there a way to turn it off?

Thanks

How can have the Tabs in TabStrip NOT all UpperCase? 

I need them to be exactly as the title.

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