Questions on KendoReact Forum

4 answers

375 views

I can't quite seem to find anything on this. I have some charts that I'm trying to format better for mobile. Anyone done this and have advice on the best way to resize KendoCharts on mobile?

General Discussions

answered on 08 Jun 2020

2 answers

507 views

Pass custom props to Grid

Hello.

We are testing with selenium and jest and the pattern we use to identify elements is through the use of data-* attributes. We are trying to follow this same pattern with the Kendo React components but, at least for the Grid component so far, any custom props that we pass in are ignored by the component. From a design pattern perspective I totally understand why this would happen but I am wondering if there is some way to achieve what is described below:

React Component

Rendered Output

...data...

</div>

Reading through the API documentation I couldn't seem to find anything.

Thanks!

General Discussions

answered on 08 Jun 2020

1 answer

856 views

CSS Styles/ClassNames

Hi,

is there a (complete) list of the classnames used in Kendo UI / React components?

Thanks.

Best Regards

Yahia

General Discussions

answered on 03 Jun 2020

1 answer

443 views

Tooltip not working for me

01.

<Tooltip openDelay={100} position="right" anchorElement="element">

02.<Grid

03. data={process(this.state.managers.map((manager) => ({...manager, selected: manager["mail"] == this.state.selectedID}) ), this.state.gridDataState)}

04. {...this.state.gridDataState}

05. onDataStateChange={this.handleGridDataStateChange}

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

07. pageable={true}

08. sortable={true}

09. selectedField="selected"

10. onRowClick={(e) => {

11. this.setState({ selectedID: e.dataItem.mail });

12. this.props.callback(e.dataItem.mail);

13. }}

14.>

15.

16. <Column field="mail" title="email" filter={'text'} headerCell={MailHeader} columnMenu={ColumnMenu} headerClassName="k-header-filtered" />

17. <Column field="givenName" title=”first name” filter={'text'} columnMenu={ColumnMenu} headerClassName="k-header-filtered" />

18. <Column field="sn" title=”last name” filter={'text'} columnMenu={ColumnMenu} headerClassName"k-header-filtered”/>

19. <Column field="managerOf" title=”manager of” filter={'text'} columnMenu={ColumnMenu} headerClassName="k-header-filtered" />

20.

21.</Grid>

22.</Tooltip>

The above is how I have implemented my Grid with tooltips. My MailHeader component looks like:

1.class MailHeader extends React.Component<Readonly<MailHeaderProps>, {}> {

2. render() {

3. return (

4. <span title={this.props.title}>{this.props.title}</span>

5. );

6. }

7.}

But I get this error:

TS2326: Types of property 'headerCell' are incompatible.
Type 'typeof MailHeader' is not assignable to type 'ComponentType<GridHeaderCellProps>'.
Type 'typeof MailHeader' is not assignable to type 'StatelessComponent<GridHeaderCellProps>'.
Type 'typeof MailHeader' provides no match for the signature '(props: GridHeaderCellProps & { children?: ReactNode; }, context?: any):ReactElement<any>'.

Can anyone point me in the right direction to an answer or a possible clue?

General Discussions

answered on 03 Jun 2020

1 answer

170 views

[Solved] Form in Window Z-Problem with MultiSelect

Hi,

the following breaks when used/wrapped in a Window - then the MultiSelect is rendered behind the Windows and is not accessible to the user (happens for example on FF 76.0.1 (Windows 64-Bit).

Is there anything I can do to mitigiate this? Or is this a known bug?

Best Regards

Yahia

                                <Form
                                    onSubmit={this.handleSubmit}
                                    initialValues={{
                                        amount: 0
                                    }}
                                    render={(formRenderProps) => (
                                        <FormElement style={{ width: 500 }} horizontal={false}>
                                            <Field
                                                id={'searchinput'}
                                                name={'searchinput'}
                                                label={'Suche nach'}
                                                placeholder={'Bildname oder Schlagworte oder Artikelnummer'}
                                                component={FormInput}
                                                validator={requiredValidator}
                                            />
                                            <Field

                                                id={'searchimgtypes'}
                                                name={'searchimgtypes'}
                                                label={'Bildtypen'}
                                                hint={'Hinweis: Bildtyp(en) einschränken (optional)'}
                                                component={FormMultiSelect}
                                                data={imgtypes}
                                                textfield={'text'}
                                                optional={true}
                                            />
                                 
                                            <span className={'k-form-separator'} />
                                            <Field
                                                id={'includedeleted'}
                                                name={'includedeleted'}
                                                label={'inklusive gelöschte Bilder'}
                                                component={FormCheckbox}
                                                optional={true}
                                            />
                                 
                                            <div className="k-form-buttons k-buttons-end">
                                            <Button onClick={formRenderProps.onFormReset}>
                                                    Abbrechen
                        </Button>
                                                <Button
                                                    primary={true}
                                                    type={'submit'}
                                                    disabled={!formRenderProps.allowSubmit}
                                                >
                                                    Los
                        </Button>
                                            </div>
                                        </FormElement>

General Discussions

answered on 02 Jun 2020

3 answers

270 views

Add TextArea for each Upload File

In one of my implementation of KendoReact I use the Upload component with success.

My users want to be able to write some text to be added to each file. (instructions etc...)

Is it possible to overload the Upload component and add a <textarea /> next to each file and have the content as a property of each file?

Using a "TextareaAutosize" will be even better.

If it is not possible as is, should I suggest it as a new feature?

General Discussions

answered on 02 Jun 2020

3 answers

870 views

How to call parent function from child child hooks when they are in separate file

Dear all,

I have to call a parent function getPostsDetailLevl1() that update the state of my datagrid , i use in the gridcolumn a custom cell with hook function that display a button on the grid column.

the parent class and the hook function are in two separate files.

how to call my function when i click on my button from hook function ?

this is the code :

parent class :

import { GridColumn as Column, Grid, GridDetailRow } from '@progress/kendo-react-grid';

import MyCustomCell from '../grids/CustomCell';

import React from 'react';

import axios from "axios";

import { filterBy } from '@progress/kendo-data-query';

import gridDetailInputSecondLevel from '../gridsDetails/gridDetailInputSecondLevel';

const loadingPanel = (

<div className="k-loading-mask">

<span className="k-loading-text">Loading</span>

<div className="k-loading-image"></div>

<div className="k-loading-color"></div>

</div>

);

const dataStateDetail1 = {

posts: [],

sort: [],

take: 25,

skip: 0,

total_record: 10000,

pageNumber: 1,

filterUrl: ''

};

class gridDetailInputFirstLevel extends GridDetailRow {

terminalId = window.SERVER_DATA.terminalid;

functionId = window.SERVER_DATA.functionid;

hostname = window.SERVER_DATA.hostname;

idfile = this.props.dataItem.idfile;

state = {

filter: {

logic: "and",

filters: []

},

filterInUrl: '',

dataStateDetail1: dataStateDetail1,

isLoading: true

};

// constructeur

constructor(props) {

super(props);

this.CustomCell = MyCustomCell();

}

componentDidMount() {

this.getPostsDetailLevl1();

}

oncl = ()=>{console.log("button clicked");}

render() {

const { isLoading, dataStateDetail1 } = this.state;

return (

<div>

{isLoading && loadingPanel}

<Grid

data={filterBy(dataStateDetail1.posts,dataStateDetail1.filter)}

skip={dataStateDetail1.skip}

take={dataStateDetail1.take}

total={dataStateDetail1.total_record}

pageable

filterable

sortable

onPageChange={this.pageChange}

filter={this.state.filter}

onFilterChange={this.onFilterChange}

total={this.state.dataStateDetail1.total_record}

detail={gridDetailInputSecondLevel}

expandField="expanded"

onExpandChange={this.expandChange}

>

<Column field="idfile" title="ID Fichier" filterable={false} width="120px"/>

<Column field="purchaseordernumber" title="Ordre d'achat" width="170px"/>

<Column field="statut" title="Statut" width="170px"/>

<Column filter="date" format="{0:yyyy-MM-dd}" field="podate" title="Date ordre d'achat" width="170px"/>

<Column field="partner" title="Partenaire" />

<Column field="potype" title="Type" width="170px"/>

<Column

width="200px"

filterable={false}

cell={this.CustomCell}/>

</Grid>

</div>

);

}

// cette fct permet d'ouvrir une sous grid

expandChange = (event) => {

event.dataItem.expanded = event.value;

// let item_no = event.dataItem.item_no;

this.setState({ ...this.state });

if (!event.value || event.dataItem.tt_itemWhsBin) {

return;

}

// formatter les dates dans le fichier json

replacerDateinJSON (key, value) {

if (key === 'podate') {

var d = new Date(value);

d.setDate(d.getDate() + 1);

return new Date(d);

}

return value;

}

formatDateForFiltre = (e) => {

if (e.field === "podate")

{

var d = new Date(e.value);

var month = "" + (d.getMonth() + 1);

var day = "" + d.getDate();

var year = d.getFullYear();

if (month.length < 2) month = "0" + month;

if (day.length < 2) day = "0" + day;

return [day,month,year].join("/");

}

return e.value;

}

getPostsDetailLevl1() {

axios

.get(

this.hostname+`edipo/xediPurchaseOrder.p?terminalid=` +

this.terminalid +

"&Funct=bb1.EdiManager" +

"&FunctionID=" + this.functionid +

"&pageSize=25" +

"&skip=" + this.state.dataStateDetail1.skip +

"&take=" + this.state.dataStateDetail1.take +

"&page=" + this.state.dataStateDetail1.pageNumber +

"&lastRecord=false" +

"&filter[logic]=and&filter[filters][0][field]=idFile&filter[filters][0][operator]=eq&filter[filters][0][value]=" + this.idfile +

(this.state.filterUrl ? this.state.filterUrl : '')

)

.then(response => {

let pos = response.data.ProDataSet.tt_order ? response.data.ProDataSet.tt_order.map(dataItem => Object.assign({ selected: false }, dataItem)):[];

// format date to dd/MM/yyyy

pos = JSON.parse(JSON.stringify(pos), this.replacerDateinJSON);

console.log("pos=",pos);

this.setState({

dataStateDetail1: {

...this.state.dataStateDetail1,

posts: pos,

total_record: response.data.ProDataSet.tt_Misc[0].total_record,

},

isLoading: false

},()=>{console.log(this.state.dataStateDetail1.posts);});

})

.catch(error => this.setState({ error, isLoading: false }));

}

pageChange = (event) => {

this.setState({

dataStateDetail1: {

...this.state.dataStateDetail1,

skip: event.page.skip,

take: event.page.take,

pageNumber: (event.page.skip + event.page.take) / 25

},

isLoading: true

},()=>{this.getPostsDetailLevl1();});

}

onFilterChange = (event) => {

let filterUrl = ''; // créer le filtre à ajouter dans l'url

if (event.filter != null){

const filters = event.filter.filters;

filters.map((filedValue,index) => {

filterUrl = filterUrl + "&filter[filters][" + (index + 1) +

"][operator]=" + filedValue.operator + "&filter[filters][" +

(index + 1) + "][value]=" + this.formatDateForFiltre (filedValue) + "&filter[filters][" + (index + 1) +

"][field]=" + filedValue.field;

}

);

}

console.log("filterUrl",filterUrl);

this.setState({

dataStateDetail1: {

...this.state.dataStateDetail1,

skip: 0},

filter: event.filter,

filterUrl,

isLoading: true

},()=>{this.getPostsDetailLevl1()});

}

export default gridDetailInputFirstLevel;

this is the hook function :

import React, { useState } from "react";

import { Button } from "@progress/kendo-react-buttons";

import { GridCell } from "@progress/kendo-react-grid";

import axios from "axios";

function CustomCell() {

function statutChange(dataItemx, props) {

const SESSION = window.SERVER_DATA;

let url = SESSION.hostname +

`edipo/xediPurchaseOrder.p?terminalid=` +

SESSION.terminalid +

"&Funct=bb1.EdiManager" +

"&FunctionID=" +

SESSION.functionid +

"&update=true"

axios

.post(

url,

dataItemx

)

.then((res) => props.getPostsDetailLevl1);

}

return class extends GridCell {

render() {

let { dataItem } = this.props;

// const { oncl } = this.props;

console.log("this.props = ",this.props);

delete dataItem.selected;

const dataItemx = JSON.stringify({ tt_order: [dataItem] });

return (

<td>

<Button

icon="check"

style={{ marginRight: "5px" }}

title="Accept"

className="k-button"

onClick={() => statutChange(dataItemx, this.props)}

>

Accepter

</Button>

<Button

icon="close"

title="Reject"

className="k-button"

onClick={() => {

console.log("rejected : ", this.props.dataItem);

}}

>

Rejeter

</Button>

</td>

);

}

};

}

export default CustomCell;

Thank you for your help

General Discussions

answered on 01 Jun 2020

11 answers

1.3K+ views

Kendo grid column sorting with selection checkbox

Hello,

I am currently using kendo react sorting along with selection checkbox. Currently, when I sort any of the columns, it automatically checks the header selection checkbox along with this message:

Warning: A component is changing a controlled input of type checkbox to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components

Is there no way to use both sorting and selection checkboxes together in react? There's no way of me being able to see what is going on in the background and what this message is even trying to say.

Thanks

General Discussions

answered on 01 Jun 2020

1 answer

88 views

Parent Class for kendo theme scss

Hi,

is there a way to give the kendo-theme-default/scss/all a parent class?

so in Scss you can import the scss files into a class and that becomes the parent class of that entire stylesheet, But when i try to do the same i get error during build of scss file.

for eg.

.parentClass{

@import "bootstrap.scss'

}

will result in all the classes of bootstrap with prefix .parentClass

if i do the same with all.scss i get the following.

SassError: ".parentClass.k-button[disabled]" failed to @extend "%disabled".
The selector "%disabled" was not found.
Use "@extend %disabled !optional" if the extend should be able to fail.
on line 34 of node_modules/@progress/kendo-theme-default/scss/button/_layout.scss
>> @extend %disabled;

Any Fix for this?

Thanks

General Discussions

answered on 01 Jun 2020

1 answer

377 views

Grid with Checkbox Selection, Filtering and Grouping

Hi,

I'm trying to setup a grid that has the combination of checkbox selection, grouping and filtering. I'm struggling to get the grouping working with multiple levels. I can group the date, however expanding or collapsing a section will expand or collapse all sections. I'm wondering if there is a way to pass in a unique ID so I can expand or collapse only the corresponding section...

https://stackblitz.com/edit/grid-grouping-selection?embed=1&file=app/main.jsx

Thanks,

Peter

General Discussions

answered on 28 May 2020