Master detail grid

2 Answers 64 Views
Grid
Rashmi
Top achievements
Rank 1
Veteran
Rashmi asked on 27 Apr 2023, 04:56 AM | edited on 27 Apr 2023, 05:19 AM

Hi Team,

Recently i upgraded  kendo version from 3 to 5.12 and and master detail grid which was working earlier in version 3 stoped working. Is there any change in latest version?.

Below is the code. getDetails()  function is called from grid but DetailComponent is not getting called which is returning the child colums and data when masterGrid is true. 

class customGrid extends PureComponent{

constructor(props){

Super(props)

}

renderGridColumn=(column)=>{

const gridColums ={}

gridColums.field = column.field;

gridColumn.title=column.title;

return <Column {...gridColumn}/>

 

}

onExpandChange=(event)=>{

let id = event.dataItem.id;

let data= this .state.data;

event.dataItem.expanded=event.value;

this.setState({

...this.state,

})

If(!event.value|| event.dataItem.details){

return

}

let index= data.findIndex((d)=> d.id === id);

data[index].details= data[index].result;

this.setState ({

data: data

})

}

DetailComponent=(props)=>{

const detailParam ={

data: props.dataItem[this.props.field],

gridColumn: this.props.columns

}

return this.props.onDetailRow(detailParam)

}

getDetails=()=>{

If(this.state.masterGrid){

return{detail:DetailComponent}

}

}

 

<Grid

{...this.getDetails()}

expandField="expanded"

onExpandChanhe={this.onExpandChange}

>

this.state.gridColumn.column.map((column))=>{

return this.renderGridColumn(column)

}

</Grid>

}

2 Answers, 1 is accepted

Sort by
0
Wissam
Telerik team
answered on 28 Apr 2023, 03:22 PM

Hi, Rashmi,

Thank you for the provided code sample.

I tried creating a runnable example based on it, but unfortunately, I was not able to. Therefore, could you please send me one where the issue related to the `getDetails()` function is reproduced? You can use my test sample as a base:

In addition, I can suggest checking the following article where it includes an example for the Master-Detail Grid:

Regards,
Wissam
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Rashmi
Top achievements
Rank 1
Veteran
commented on 04 May 2023, 03:15 AM

Hi Wissam,

Thanks. I have updated my code. When i click on + icon to open the child grid it doesn't open. we need to do it through getDetail function since we are checking and client and serverside rendering through this function.I have attached the sample code

 

https://stackblitz.com/edit/react-cuvv7q?file=column.json,index.js,product.jsx,app%2Fmain.jsx

main.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
Grid,
GridColumn as Column,
GridDetailRow,
} from '@progress/kendo-react-grid';
class App extends React.PureComponent {
state = {
columns: [
{ field: 'ProductID', title: 'ID', show: false },
{ field: 'ProductName', title: 'Name', show: true },
{ field: 'CategoryName', title: 'Category Name', show: true },
],
data: [
{
ProductID: 1,
ProductName: 'Chai',
CategoryName: 'Beverages',
},
{
ProductID: 2,
ProductName: 'Chang',
CategoryName: 'Beverages',
},
{
ProductID: 3,
ProductName: 'Aniseed Syrup',
CategoryName: 'Condiments',
},
],
};
renderGridColumn = (column) => {
console.log(column);
// const gridColums = {};
// gridColums.field = column.field;
// gridColumns.title = column.title;
return <Column {...column} />;
};
onExpandChange = (event) => {
let id = event.dataItem.id;
let data = this.state.data;
event.dataItem.expanded = event.value;
this.setState({
...this.state,
});
if (!event.value || event.dataItem.details) {
return;
}
let index = data.findIndex((d) => d.id === id);
data[index].details = data[index].result;
this.setState({
data: data,
});
};
DetailComponent = (props) => {
const detailParam = {
data: props.dataItem[this.props.field],
gridColumn: this.props.columns,
};
return this.props.onDetailRow(detailParam);
};
getDetails = () => {
//if (this.state.masterGrid) {
return { detail: this.DetailComponent };
//}
};
render() {
return (
<Grid
{...this.getDetails()}
data={this.state.data}
expandField="expanded"
onExpandChange={this.onExpandChange}
>
{this.state.columns.map((column) => {
return this.renderGridColumn(column);
})}
</Grid>
);
}
}
ReactDOM.render(<App />, document.querySelector('my-app'));

 

 

Rashmi
Top achievements
Rank 1
Veteran
commented on 05 May 2023, 11:49 AM

Hi Wissam,

I am able to get master detail grid through fetch (https://demos.telerik.com/kendo-ui/service-v4/odata/Products?CategoryID=2) called on expandChange function

https://stackblitz.com/edit/react-gfjvfp-wf7rzt?file=app%2Fmain.jsx

Similarly when i comment fetch and store data in detail through state since i am getting all data through one api it is not working

https://stackblitz.com/edit/react-cuvv7q-qhfawy?file=app%2Fmain.jsx

Regards

Rashmi

0
Wissam
Telerik team
answered on 05 May 2023, 01:52 PM

Hi, Rashmi,

Thank you for providing examples!

You can fix this issue by setting the `state.categories` to a new array in the `expandChange` function. You can achieve this by setting it to either `[...data]` or `data.slice()`:

For more information about updating arrays in state, check the following article:

I hope this helps, but please let me know if you have any further questions.

Regards,
Wissam
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Rashmi
Top achievements
Rank 1
Veteran
commented on 08 May 2023, 05:23 AM

Hi Wissam,

Thanks its working now.

Regards,

Rashmi

Wissam
Telerik team
commented on 09 May 2023, 06:48 AM

You are welcome, Rashmi! I am glad that my reply was helpful to you.
Tags
Grid
Asked by
Rashmi
Top achievements
Rank 1
Veteran
Answers by
Wissam
Telerik team
Share this question
or