[Solved] Grid - Dates | Filtering | Excel Exporting

[Lori]

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

 

[Lori]

Got question four sorted

ExcelExportColumn

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

[Stefan]

Hello, Lori,

Regarding the questions:

1) Yes, this is a possible way to do this. Another one will be to parse to the data field to a date object before passing in the to the Grid:

https://stackblitz.com/edit/react-dwfmyw-haxkr7?file=app/main.js

Also, the field approach should work as expected:

https://stackblitz.com/edit/react-dwfmyw-eyqmtt?file=app/main.js

2) If the filter is set to a date in the column, we recommend using the approach from questions one to parse the string as data, we otherwise the Grid is filtering string like a date.

3) There is a "process" method that combines all of these, it takes the data state from the onDataStateChange event. An example of this can be observed here(the HOC is not required):

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

4) Marked as resolved.

Regards,
Stefan
Progress Telerik