Questions on KendoReact Forum

3 answers

765 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.2K+ 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

64 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

289 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

5 answers

164 views

Filter Menu Trigger Function

Is there a filter menu trigger function for?

I try to use onExpandChange but not calls it.

I need a function that trigger when filter menu open and close.

onCloseMenu function works only when I click Clear button but I need a function when filter menu show and hide

General Discussions

answered on 28 May 2020

3 answers

365 views

Cannot able to use TabStripTab inside TabStrip component

Hi Team,

I am getting below error when using TabStripTab inside TabStrip component.

JSX element type 'TabStripTab' is not a constructor function for JSX elements.
The types returned by 'render()' are incompatible between these types.
Type 'ReactNode' is not assignable to type 'false | Element'.
Type 'string' is not assignable to type 'false | Element'.

I checked in the documentation and googled it also but do not find any specific solution for this.

Please let me know if aI am missing any thing here.

Regards,

Sanjay

General Discussions

answered on 26 May 2020

1 answer

85 views

Filter not working when custom data is passed for column

Hi, I have a grid with a custom column. The data for the column is an array of object and I render them as a button which enables me to click and naviagate based on the value I clicked. However, filter doesnt seem to work here. Please advice.

https://stackblitz.com/edit/react-pbcysg?file=SampleGrid.jsx

Line 813 is the place where the function to render a button is being called.

General Discussions

answered on 25 May 2020

2 answers

303 views

Localization grid column menu

Hello.

I try to create grid localization.
I've downloaded your local json file from:
https://github.com/telerik/kendo-react-messages/blob/master/messages/en-US/en-US.json
Then i've translated it to my language.
But when i use it in my project i have some fields in English. :(
In column menu:
Filter
Sort Acsending
Sort Decsending

And "And" and "Or" in dropdown.

And "Filter" at the filter button.

Colum menu screen attached.

How can i fix this problem?

General Discussions

answered on 22 May 2020

2 answers

151 views

Change column menu styles

Hello!

How can i style a ColumnMenu control?
I dont want create a custm ColumnMenu control, just changed colors of element/

Could you get the styles names of ColumnMenu control or some exapmples of styling?

Thank you!

General Discussions