Forums Home / Wijmo / General Discussion
Posted by: rambabu on 14 September 2017, 2:24 am EST
rambabu
Posted 14 September 2017, 2:24 am EST
Hello,
I want to create an applications regarding inner flex grid based
on two tables (parent table and child table) related as foreign key
relationship.
Thanks
manpreet-kaur
Posted 14 September 2017, 2:24 am EST
Hello,
You can use the FlexGridDetailProvider extension to create a master detail relationship in FlexGrid. Here is the demo sample which describes the same: http://demos.componentone.com/wijmo/5/SampleExplorer/SampleExplorer/Sample/RowDetails
The demo sample is created in AngularJS. However, you may refer to the attached sample application created in PureJS which implements the similar approach. Hope it helps.
Thanks,
Manpreet Kaur
2015/09/RowDetailsSample.zip
rambabu
Posted 14 September 2017, 2:24 am EST
Hello,
I want to create an application with two similar data tables of same column Names like
I need to group and display the two tables data in a single flex grid as shown in below figure.
manpreet-kaur
Posted 14 September 2017, 2:24 am EST
Hello,
Currently, FlexGrid makes use of two flexgrids to display the related data when the user clicks on the expand/collapse icon.
I am looking into a way where in we can display the related data using a single FlexGrid. I would soon share my observations on the same.
Thanks,
Manpreet Kaur
manpreet-kaur
Posted 14 September 2017, 2:24 am EST
Hello,
There is not a direct way to display related data in a single FlexGrid. You would need to create a new collectionView which displays the related rows in the same sequence in which they would be displayed in the FlexGrid. You can place an expand/collapse icon using a custom column with the cell template.
Once you have the FlexGrid set up you can simply hide the related rows. You would need to handle the click event of the expand/collapse icon to display and hide the rows depending on when the user clicks the icon.
You may try implementing the above approach. Hope it helps. Please let us know in case you need any assistance further.
Thanks,
Manpreet Kaur
rambabu
Posted 14 September 2017, 2:24 am EST
Hello,
Will you please provide an example for the same in pure JS
manpreet-kaur
Posted 14 September 2017, 2:24 am EST
Hello,
I am working on creating a sample application which fulfills your requirement. I would share my observations on the same.
Thanks,
Manpreet Kaur
manpreet-kaur
Posted 14 September 2017, 2:24 am EST
Hello,
I apologize for the delayed response. I tried implementing the approach described above. I was able to display the expand icon in the country column and collapse the rows initially. When I clicked on the expand icon, I was able to display the remaining rows having the same country name.
However, when I tried to change the “+” icon to “-” and hide the country column value in the expanded rows, I could observe that the cell content was getting overriden by the cell template used to display the icon. Hence, the “+” icon is not getting changed to “-” icon due to which I was not able to implement the collapse functionality.
I have attached the sample for your reference. I have escalated the issue related to the overriding of the cell content with the cell template for further discussion. I would let you know as soon as I get any information in this regard.
Thanks,
Manpreet Kaur
2015/09/CustomGrouping.html
rambabu
Posted 14 September 2017, 2:24 am EST
Any updates…??
manpreet-kaur
Posted 14 September 2017, 2:24 am EST
Hello,
Currently, we do not have any update regarding this issue. We have requested the concerned team for an update. We will let you know as soon as we get any information in this regard.
Thanks,
Manpreet Kaur
bernardo
Posted 14 September 2017, 2:24 am EST
From the problem description, this sounds like a typical use for the “childItemsPath” property. It allows you to show hierarchies of homogeneous items as the user described.
I made a little fiddle (pure js) to demonstrate the basics:
http://jsfiddle.net/Wijmo5/n3715avm/
The fiddle has almost no code. It’s just the data definition and this:
[js] // create grid, bind it to hierarchical data
var grid = new wijmo.grid.FlexGrid(‘#thegrid’, {
headersVisibility: ‘Column’,
itemsSource: data,
childItemsPath: ‘items’
});
// start collapsed grid.collapseGroupsToLevel(0);
[/js]
The “FlexGridIntro” sample also shows this, with some additional bonuses like custom glyphs for the collapse/expand buttons. Just run the sample and look for “childItemsPath”.
I hope this helps.
bernardo
Posted 14 September 2017, 2:24 am EST
Here’s a link to the pure JS version of the FlexGridIntro sample for your convenience:
http://demos.componentone.com/wijmo/5/PureJS/FlexGridIntro/FlexGridIntro/
sharad.tomer
Posted 18 November 2020, 6:17 pm EST
Hi,
Please refer to the following sample which demonstrates the required functionality in react and let us know if you face any issues:
https://codesandbox.io/s/wijmo-react-forked-bkqm5?file=/src/App.js
Regards
Sharad
slav
Posted 21 November 2020, 12:26 pm EST
Thank you so much for providing a working sample in React!
