Questions on KendoReact Forum

2 answers

504 views

[Solved] Unable to use GridColumnMenuFilter with TypeScript

Hello!
I have a problem:
try to create ColumnMenu

import * as React from 'react';
import {GridColumnMenuSort,
        GridColumnMenuFilter} from '@progress/kendo-react-grid';
class ColumnMenu extends React.Component {

    render() {

        return (
            <div>
                <GridColumnMenuSort {...this.props} />
                <GridColumnMenuFilter {...this.props} expanded={true} />
            </div>
        );
    }
}
export default ColumnMenu;

but i have compile error:

No overload matches this call.
Overload 1 of 2, '(props: Readonly<GridColumnMenuSortProps>): GridColumnMenuSort', gave the following error.
Property 'column' is missing in type '{ children: false; }' but required in type 'Readonly<GridColumnMenuSortProps>'.
Overload 2 of 2, '(props: GridColumnMenuSortProps, context?: any): GridColumnMenuSort', gave the following error.
Property 'column' is missing in type '{ children: false; }' but required in type 'Readonly<GridColumnMenuSortProps>'.

Is it able to use Kendo react Grid with TypeScript?

General Discussions

answered on 19 May 2020

6 answers

303 views

[Solved] Selecting date from table filter popup causes to scroll left the table

Selecting date from table filter popup causes to scroll left the table as you can see in my sample.

There is a "First Date" column on my table at the end of right side.

Click the 3 dots next to "First Date" header, you will see the filter popup.
Click the "Select Date" input and a DatePicker will be pops up.
Choose a date from DatePicker.

When you follow these steps, you will see the table suddenly scrolls left and DatePicker closes.

When I remove the method 'GridPageChange' on line 148, table still scrolls to left but DatePicker does not close and I can select date.

If you realize my DatePicker has a time picker. When I select a day from calender, time picker scrolls to current time. I think it triggers the table scroll.

How can I prevent this happen?

https://stackblitz.com/edit/react-tukxso?embed=1&file=app/main.jsx

General Discussions

answered on 19 May 2020

3 answers

1.1K+ views

Using custom scroll on React Grid

Hi,

Can I use custom scroll for kendo react grid.

I want to use this scroll package: https://www.npmjs.com/package/react-custom-scrollbars

General Discussions

answered on 19 May 2020

1 answer

276 views

How to use PanelBarProps expanded? string[]

The docs and and the d file states that there is a "PanelBarProps expanded? string[]" but there is no example.

Is there a way to use this to make all PanelBarItems start expanded?

Is this for something else?

General Discussions

answered on 18 May 2020

6 answers

253 views

[Solved] Is return data of GridColumnMenuCheckboxFilter changed?

Hello,

I use GridColumnMenuCheckboxFilter to filter my grid.

But today I realize return data of GridColumnMenuCheckboxFilter is different than I used to before.

Before on dataStateChange function data property of event parameter was:

{

"filter":{

"filters":

[

{"field":"city","operator":"eq","value":"ANKARA"}

],

"logic":"or"

}

Now it is:

{

"filter":{

"filters":

[

{

"logic":"or",

"filters":[{"field":"city","operator":"eq","value":"ANKARA"}]

}

],

"logic":"and"

}

Is return data of GridColumnMenuCheckboxFilter changed?

General Discussions

answered on 18 May 2020

3 answers

126 views

PDF Exporter WCAG 2.0

Hello,

is there somewhere a tutorial how to use the PDF Exporter from kendo-react-pdf to create a WCAG 2.0 compatible PDF?
Is that even possible?

Greetings Stephan

General Discussions

answered on 18 May 2020

2 answers

307 views

columnMenu in GridColumn TS error

ColumnMenu.tsx

/// <reference path="./ColumnMenu.d.ts"/>

import * as React from 'react';

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

export default class ColumnMenu extends React.Component<Readonly<ColumnMenuProps>, {}> {

render() {

return (

<div>

<GridColumnMenuFilter columnMenu={this.props.columnMenu} expanded={true} />

</div>

);

}

I am importing this into my main class and using it here:

01.<Grid

02. data={process(this.props.users, this.state.gridDataState)}

03. {...this.state.gridDataState}

04. onDataStateChange={this.handleGridDataStateChange}

05. style={{ height: "300px" }}

06. pageable={true}

07. sortable={true}

08.>

09. <GridColumn field="email" title="Email" filter={'text'} columnMenu={ColumnMenu}/>

10. <GridColumn field="givenName" title="First name" />

11. <GridColumn field="sn" title="Last name" />

12. <GridColumn field="managerOf" title="Manager of" />

13.</Grid>

No matter how I try to run this, I get the same error:

1.TS2326: Types of property 'columnMenu' are incompatible.

2.Type 'typeof ColumnMenu' is not assignable to type 'ComponentType<GridColumnMenuProps>'.

3.Type 'typeof ColumnMenu' is not assignable to type 'StatelessComponent<GridColumnMenuProps>'.

4.

Type 'typeof ColumnMenu' provides no match for the signature '(props: GridColumnMenuProps & { children?: ReactNode; }, context?: any): ReactElement<

any>'.

Any idea how I get past this TS issue?

General Discussions

answered on 18 May 2020

3 answers

157 views

[Solved] TreeView with DropDownButton

Hi, I have a TreeView with DropDownButton in custom rows and popups opening will break if I click through different DropDownButtons . I click on a button and no popup is displayed. Any suggestion what I did wrong? https://stackblitz.com/edit/react-s6l3qq

General Discussions

answered on 15 May 2020

1 answer

91 views

How to retain column level filter when i switch across the view

I want to retain column level filter when i switch across multiple view. I am able to retain filter for my data but that filter in not showing in grid column.

I want that user can see the applied filter in grid column too. IF filter is applied on multiple column he should see that too.

Regards,

Mukesh

General Discussions