Hello,

Thank you for reaching out with your inquiry regarding the igx-hierarchical-grid component in Ignite UI. I understand you're looking to display child grids side by side, rather than having them stacked vertically as they normally appear.

Unfortunately, the igx-hierarchical-grid component does not currently offer built-in functionality to render child grids side by side. Due to the design and structure of this component, which is inherently based on a vertical stacking hierarchy, achieving this layout is not feasible either programmatically or through CSS modifications. The structure of the component enforces a vertical rendering for child grids under their respective parent rows, and any attempts to manipulate this behavior would conflict with its intended functionality.

That said, we do have an alternative that may provide the flexibility you're seeking. I would recommend exploring the igx-grid component with the Master-Detail feature from our Ignite UI library. This grid allows for more customizable handling of hierarchical or related data. With the Master-Detail feature, you can control how detailed rows (child grids) are displayed, which could be a more suitable solution for your requirements. This approach would give you greater control over the layout and display of your grids, potentially allowing you to achieve the side-by-side visualization you're aiming for.

You can find the detailed documentation for the igx-grid Master-Detail feature here:
Master-Detail Grid Documentation

I encourage you to review this option and see if it fits your project needs. Should you decide to move forward with this component, we would be happy to assist you with the setup or answer any further questions you may have.

Thank you again for reaching out, and I hope this solution aligns with your goals. Please don't hesitate to let me know if you need further clarification or support.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics