Nested flex Grid - wijmo pure JS

Originally Posted 16 September 2015, 1:42 am EST

  • Originally Posted 16 September 2015, 1:42 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.

    1) Parent and child had a relationship.
    2) while click on '+' button present before the parent name, it shows all the child's name. otherwise, the child's are in collapse mode.
    3) By default, i need to show the first row, on expanding it should show the group list .

    Thanks

  • Reply

    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
  • Reply

    Any updates..??
  • Reply

    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
  • Reply

    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
  • Reply

    Hello,

    Will you please provide an example for the same in pure JS
  • Reply

    Hello,

    I am working on creating a sample application which fulfills your requirement. I would share my observations on the same.

    Thanks,
    Manpreet Kaur
  • Reply

    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
  • Reply

    Hello,

    I want to create an application with two similar data tables of same column Names like
    1) Id
    2) CountryName
    3) StateName
    4) Population
    5) Area

    I need to group and display the two tables data in a single flex grid as shown in below figure.

  • Reply

    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
  • Reply

    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:

        // 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);


    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.
  • Reply

    I came across this old post when searching for the same problem. This is exact same functionality we would like to have in our table.
    as rambabu described:

    Do have a sample in React?
    Thank you!
  • Marked as Answer

    Reply

    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
  • Reply

    Thank you so much for providing a working sample in React!
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels