Questions on KendoReact Forum

2 answers

1.6K+ views

How to rerender master grid when i click in button from the detail grid ?

Hello,

https://imgur.com/a/1zohd9u

I ask how to rerender master grid when i click in button from the detail grid (look the picture).

Once i click in Rejected/Accepted button in detail grid, the database will be updated and the statut field of master grid change (in database).

but the new value not displayed because i have to manually refresh the page.

I need to setState the data of the master grid to refresh it and display the updated value of Statut field knowing that the button is in detail grid, so how to get access to function that update the state of master grid data ?

Thank you

master grid :

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;

jobId = this.props.dataItem.jobId;

state = {

filter: {

logic: "and",

filters: []

},

filterInUrl: '',

dataStateDetail1: dataStateDetail1,

isLoading: true

};

// constructeur

constructor(props) {

super(props);

this.CustomCell = MyCustomCell(this.getPostsDetailLevl1);

}

componentDidMount() {

this.getPostsDetailLevl1();

}

// MycustomParam = (props) => <MyCustomCell {...props} myfonct = {this.getPostsDetailLevl1}/>

// {...props} spread operator

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="jobId" title="JOB ID" filterable={false} width="120px"/>

<Column field="PurchaseOrderNumber" title="PO NUMBER" width="170px"/>

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

<Column filter="date" format="{0:yyyy-MM-dd}" field="PODate" title="PO DATE" width="170px"/>

<Column field="ReceiverISA" title="PARTNER" />

<Column field="POType" title="PO 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 jobId = event.dataItem.jobId;

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

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

return;

}

/* // par la programmation laisser le row expanded

keepExpanded = (dataItem) => {

dataItem.expanded = true;

this.setState({});

} */

// 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 = () => {

/* let ji;

if (d != undefined) {

ji = d.tt_order[0].jobId;

} */

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]=jobId&filter[filters][0][operator]=eq&filter[filters][0][value]=" + this.jobId +

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

)

.then(response => {

let pos = response.data.ProDataSet.tt_order ? response.data.ProDataSet.tt_order:[];

// let pos = response.data.ProDataSet.tt_order ? response.data.ProDataSet.tt_order.map(dataItem => ji===dataItem.jobId?Object.assign({ expanded: !dataItem.expanded }, dataItem):dataItem):[];

// format date to dd/MM/yyyy

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

this.setState({

dataStateDetail1: {

...this.state.dataStateDetail1,

posts: pos,

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

},

isLoading: false

});

})

.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;

detail grid :

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

import { Dialog, DialogActionsBar } from '@progress/kendo-react-dialogs';

import React, { useState } from 'react';

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

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

import axios from "axios";

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

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 dataStateDetail2 = {

posts: [],

sort: [],

take: 25,

skip: 0,

total_record: 10000,

pageNumber: 1,

filterUrl: ''

};

const ConfirmAcceptPoLine = (props) => {

return (

<td>

<Button

icon="track-changes-enable"

title="Confirm"

primary={true}

className="k-button"

onClick={props.myProp}

style={{ paddingLeft:55, paddingRight:55 }}

>

Envoyer

</Button>

</td>

);

}

class gridDetailInputSecondLevel extends GridDetailRow {

terminalId = window.SERVER_DATA.terminalid;

functionId = window.SERVER_DATA.functionid;

hostname = window.SERVER_DATA.hostname;

PurchaseOrderNumber = this.props.dataItem.PurchaseOrderNumber;

rowRender(trElement, props) {

const st = props.dataItem.Statut;

const green = { backgroundColor: "rgb(55, 180, 0,0.32)" };

const red = { backgroundColor: "rgb(243, 23, 0, 0.32)" };

const defau = {};

let val = {};

switch(st) {

case 'Accepted': val = green;

break;

case 'Rejected': val = red;

break;

default: val = defau;

}

const trProps = { style: val };

return React.cloneElement(trElement, { ...trProps }, trElement.props.children);

}

state = {

filter: {

logic: "and",

filters: []

},

filterInUrl: '',

dataStateDetail2: dataStateDetail2,

isLoading: true,

visible: false

};

// constructeur

constructor(props) {

super(props);

this.CustomCell = MyCustomCell(this.getPostsDetailLevl2);

}

toggleDialog = () => {

this.setState({

visible: !this.state.visible

});

}

toggleDialogNo = () => {

this.setState({

visible: !this.state.visible

});

console.log("Nooooo");

}

toggleDialogYes = () => {

this.setState({

visible: !this.state.visible

});

this.processOrdre();

}

componentDidMount() {

this.getPostsDetailLevl2();

}

MyCell = (props) => <ConfirmAcceptPoLine {...props} myProp={this.toggleDialog} />

render() {

const { isLoading, dataStateDetail2 } = this.state;

return (

<div>

{isLoading && loadingPanel}

<Grid

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

skip={dataStateDetail2.skip}

take={dataStateDetail2.take}

total={dataStateDetail2.total_record}

pageable

filterable

sortable

// height="200px"

onPageChange={this.pageChange}

filter={this.state.filter}

onFilterChange={this.onFilterChange}

total={this.state.dataStateDetail2.total_record}

rowRender={this.rowRender}

>

<Column field="PurchaseOrderNumber" title="PO Number" filterable={false}/>

<Column field="POLineNumber" title="PO Line Number" />

<Column field="Statut" title="STATUS" />

<Column field="VendorProductNumberCode" title="ITEM" />

<Column field="Descriptionsequence" title="DESCRIPTION" />

<Column field="OrderedQty" title="ORDERED QTY" />

<Column field="SellingPrice" title="SELLING PRICE" />

<Column

width="200px"

filterable={false}

cell={this.CustomCell }

footerCell={this.MyCell}

/>

</Grid>

{this.state.visible && <Dialog title={"Please confirm"} onClose={this.toggleDialog}>

<p style={{ margin: "25px", textAlign: "center" }}>Are you sure you want to continue?</p>

<DialogActionsBar>

<button className="k-button" onClick={this.toggleDialogNo}>No</button>

<button className="k-button" onClick={this.toggleDialogYes}>Yes</button>

</DialogActionsBar>

</Dialog>}

</div>

);

}

// formatter les dates dans le fichier json

replacerDateinJSON (key, value) {

if (key === 'deliveryreq') {

var d = new Date(value);

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

return new Date(d);

}

return value;

}

formatDateForFiltre = (e) => {

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

{

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;

}

getPostsDetailLevl2 = () => {

axios

.get(

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

this.terminalId +

"&Funct=bb1.EdiManager" +

"&FunctionID=" + this.functionId +

"&pageSize=25" +

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

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

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

"&lastRecord=false" +

"&filter[logic]=and&filter[filters][0][field]=PurchaseOrderNumber&filter[filters][0][operator]=eq&filter[filters][0][value]="

+ this.PurchaseOrderNumber +

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

)

.then(response => {

let pos = response.data.ProDataSet.tt_order_line ? response.data.ProDataSet.tt_order_line:[];

// format date to dd/MM/yyyy

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

this.setState({

dataStateDetail2: {

...this.state.dataStateDetail2,

posts: response.data.ProDataSet.tt_order_line,

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

},

isLoading: false

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

})

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

}

pageChange = (event) => {

this.setState({

dataStateDetail2: {

...this.state.dataStateDetail2,

skip: event.page.skip,

take: event.page.take,

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

},

isLoading: true

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

}

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]=" + filedValue.value + "&filter[filters][" + (index + 1) +

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

}

);

}

this.setState({

dataStateDetail2: {

...this.state.dataStateDetail2,

skip: 0},

filter: event.filter,

filterUrl,

isLoading: true

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

}

processOrdre = () => {

const SESSION = window.SERVER_DATA;

let url = SESSION.hostname +

"edipo/xediPurchaseOrder.p?terminalid=" +

SESSION.terminalid +

"&Funct=bb1.EdiManager" +

"&FunctionID=" +

SESSION.functionid +

"&po=" + this.PurchaseOrderNumber + "&processed=yes"

axios

.post(url)

.then((res) => {console.log("Processed");});

}

export default gridDetailInputSecondLevel;

General Discussions

answered on 11 Jun 2020

4 answers

395 views

Mobile friendly chart resize

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

524 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

887 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

457 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

179 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

281 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

886 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

95 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