Questions on KendoReact Forum

1 answer

100 views

Hi, is there a way i can customize the paging options style? The default is we have the page selection on the left, number of Items per page selection in the middle and the total records info on the right. I would like to just reverse it. I tried a display flex on the container and a flex-direction: reverse but it reverses the paging icons also. Please advise.

Stackblitz URL

General Discussions

answered on 18 Feb 2019

2 answers

1.6K+ views

[Solved] Example Grid with Paging, Filter and Sort

Hi, can someone provide an example of a React Grid with Paging, Filter and Sort implemented together. Filter and sort have to work throughout the whole dataset and not just on the visible values alone. Please advice.

Example stackblitz - My implementation

General Discussions

answered on 15 Feb 2019

1 answer

290 views

[Solved] Can't cancel Grid columns reordering

Hello!

There are some cases, when it's necessary to cancel columns reordering. For example it's necessary for the case, when a user tries to move a column with "reorderable: true" to the left of a column with "reorderable: false".

Now the Grid component changes the columns ordering and then notifies about the change by calling "onColumnReorder" handler.

Please, look at this example.

General Discussions

answered on 15 Feb 2019

2 answers

147 views

Grid - Dates | Filtering | Excel Exporting

Hi

Just running into a couple issues while using the kendo react grid.The data is coming from Microsoft Graph Api.

First Issue - Date cell

Ive three date cells in my grid. To format the dates Ive used the below, however if use the following "//const value = this.props.dataItem[this.props.field];" rather than the cell name it doesn't return. I would like to keep KendoGridDdateCell generic so I can pass in all three fields. (Is this the correct way to format the cells - the data type is string and then formatted to a date.

class KendoGridDdateCell extends GridCell{

render() {

const value = formatDate(new Date( this.props.dataItem.fields.MYDATEFIELD), "dd MMM yyyy")

// const value = this.props.dataItem[this.props.field];

return (

<td>

{formatDate(new Date(value), "d")}

</td>

);

}

Second Issue -Filtering

Ive set up filtering and it works for text no problem. However when I go to click on the date cell I get the following

TypeError: Cannot set property 'getCurrentStack' of undefined

sp-webpart-workbench-assembly_en-ie_2fc6beb1ff004c370718034a6380ed93.js:190

[[StableObjectId]]:1

message:"Cannot set property 'getCurrentStack' of undefined"

stack:"TypeError: Cannot set property 'getCurrentStack' of undefined\n at setCurrentDebugStack

Sample from Grid

<Column field="fields.myDateField" title="Date" filter="date" cell={KendoGridDdateCell} />

<Grid

data={filterBy(this.state.gridData, this.state.filter)}

filterable

filter={this.state.filter}

onFilterChange={this.onFilterChange}

>

public onFilterChange=(event) => {

this.setState({

filter: event.filter

});

};

Also when I do filter how to I update the grid totals and paging?

Question Three

Eventually on the grid I want to have sorting, paging, filtering and grouping all on the one grid. Is there a precedence that should be followed?

<Grid

data={filterBy(orderBy(this.state.gridData, this.state.sort),this.state.filter).slice(this.state.skip, this.state.take + this.state.skip)}

Question Four - Exporting Excel

I have the excel exporting working - however its only exporting visible columns - is it possible to specify the specific columns that you want in the export?

Id appreciate any help on the above

Many thanks in advance

Lori

General Discussions

answered on 15 Feb 2019

5 answers

341 views

Custom Form Around a Grid Row

In our React application, we use react-advanced-form to develop forms. It's handy for quickly composing a form with validation. I am using the KendoReact Grid with inline editing. I couldn't find much documentation on GridRow or templating for it. Is there a way for me to wrap a row that is in edit mode in my own (or a third party's) <Form /> component?

General Discussions

answered on 14 Feb 2019

3 answers

206 views

Kendo - Tooltip

Hi,

I am using Kendo tooltip and below is the scenario

I have button with tooltip applied. When button is in disabled state it is showing browser tooltip instead of Kendo. When button got enabled it is working as per expectation.

Below is the screenshot for same.

1) Screenshot 1 - Browser Tooltip

2) Screenshot 2- Kendo Tooltip

Is there any way to resolve this issue? It should show kendo tooltip whether button is enabled or disabled.

Regards,

Parag

General Discussions

answered on 11 Feb 2019

1 answer

710 views

How to replace Grid Column Menu with Filter

Hi, is there anyway to replace the Gird Column Menu directly with the filter component. Instead of having the three dots, replace it with a filter icon that can open up the filter panel. Picture attached.

General Discussions

answered on 08 Feb 2019

1 answer

138 views

TimePicker null value bug

Hi guys,

I have a strange behavior of this control. When the value is null and when I use the Now button, the date part is wrong.

Steps:
1. Set value to null
2. Press the Now button .
3. Date 1.1.1980 (wrong date)

This only happens when the value is null and when I press the Now button. In all other situations we get what we expect.
We use null value because we want "hour:minute AM" instead of 12:00 AM. Also we don't want to use react wrappers, but native react components.

code:
https://stackblitz.com/edit/kendo-time-picker-bug?file=main.js

General Discussions