Questions on KendoReact Forum

2 answers

131 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

324 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

182 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

690 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

130 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

answered on 08 Feb 2019

2 answers

758 views

[Solved] Saving PDF to server

Hi,

I am exporting a PDF using @progress/kendo-drawing in Client side(React js)

I have a requirement to save the same file in server(Node js).

Could you please let me know how to export the same PDF to server

Wrappers for React

answered on 07 Feb 2019

3 answers

231 views

Is there a way to have columns auto resize when double clicking the headers in the React Grid?

Is there a way to have columns auto resize when double clicking the headers in the React Grid?

The wrapper grid supported this.

-Ryan

General Discussions

answered on 07 Feb 2019

5 answers

265 views

Kendo React PanelBar Warning and Drawing Error

When using a Kendo React PanelBar in expandMode="single" I am getting the following warning, plus a drawing error:

Warning: Failed prop type: PanelBar child should be either PanelBarItem or Array of PanelBarItem.
in PanelBar (created by _temp)

I am rendering the control as seen in this HTML snippet:

return (

<PanelBar className="filter-bar" expandMode="single">

<PanelBarItem title={this.state.filterTitle} expanded={this.state.expanded} onSelect={this.handlePanelBarSelect}>

<form id="filterForm" className="filter-form" onSubmit={this.handleSubmit}>

<div className="form-row">

<div className="col">

<div className="form-group">

<label>Company:</label>

<DropDownList

className="form-control"

data={this.state.companies}

textField="text"

dataItemKey="id"

onChange={this.handleCompanyChange}

defaultItem={defaultItemCompany}

value={this.state.company}

/>

</div>

<div className="col">

<div className="form-group">

<label>Site:</label>

<DropDownList

className="form-control"

data={this.state.sites}

textField="text"

dataItemKey="id"

onChange={this.handleSiteChange}

defaultItem={defaultItemSite}

value={this.state.site}

/>

</div>

<div className="col">

<div className="form-group">

<label>Functional Location:</label>

<DropDownList

className="form-control"

data={this.state.functionalLocations}

textField="text"

dataItemKey="id"

onChange={this.handleFuncLocChange}

defaultItem={defaultItemFunctionalLocation}

value={this.state.functionalLocation}

/>

</div>

<div className="col">

<button title="Filter" ref="filterBtn" className="k-button k-primary" onClick={this.handleFilter}

disabled={this.state.filterBtnDisabled}>

{t('filter')}

</button>

</div>

</form>

</PanelBarItem>

</PanelBar>

);

Furthermore the downarrow/uparrow icon is drawn in the middle of a grid that follows this control on the page (see attached screenshot).

Attached is the generated code from the browser in a screenshot

General Discussions

answered on 06 Feb 2019

1 answer

114 views

Multiselect. Part of string is hidden.

Step to reproduce:

1. Visit https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/

2. Type in multiselect input "WWWWWWW" in upper case

Expected result: "WWWWWWW" is visible
Actual result: Part of string is hidden.

Wrappers for React

answered on 05 Feb 2019

1 answer

167 views

DatePicker - Locale

Hi,

I am trying to implement the locale in a such a way that, as per country the date format should change. I referred below example which is available on kendo website

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

I change the locale type but it is not changing the date format.

For example : I want to implement something like when I am using my system in US network it should by default display mm/dd/yyyy format and If I am in Great Britan then it should display dd/mm/yyyy

Regards,

Parag

General Discussions

answered on 05 Feb 2019