I am using asp.net MVC and IgGrid in my Web Application.
I have header rows as well as child rows in IgGrid. Currently all are aligned to left side, which unable user to differentiate between header and its child rows.
Current IgGrid rows look like below:
Parent Test Application 1Parent Test Application 2Child Test Application 1Child Test Application 2Child Test Application 3Parent Test Application 3Child Test Application 1Child Test Application 2Child Test Application 3Child Test Application 4Child Test Application 5
I want them to look like below:
Parent Test Application 1Parent Test Application 2 Child Test Application 1 Child Test Application 2 Child Test Application 3Parent Test Application 3 Child Test Application 1 Child Test Application 2 Child Test Application 3 Child Test Application 4 Child Test Application 5
Below is the UCHierarchicalGridUI.cs controller file, in which all the features are defined that currently I am using in my IgGrid.
http://www.infragistics.com/community/cfs-filesystemfile.ashx/__key/CommunityServer.Components.PostAttachments/00.00.50.12.41/igGrid-Properties.txt
Please note that I am new to Asp.Net MVC and IgGrid. Kindly let me know how to resolve it.
Thanks in advance.
Hello Richa,
Thank you for posting in our forum.
Based on the code snippets it seems you’re using an igHierarchicalGrid.
By default the hierarchical grid applies a padding for the child grid containers so that they’re appear with a left offset from the parent row.
You can refer to the following example on how they look by default here:
http://www.igniteui.com/hierarchical-grid/aspnet-mvc-helper
The padding is applied via css, and there’s no specific grid setting that affects it.
The css setting that affects it is the following:
.ui-iggrid td.ui-iggrid-childarea{padding-left:34px}
And it’s applied in the combined structure css class:
<link href="http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/structure/infragistics.css" rel="stylesheet" />
Make sure you have a reference to that file on your page in order to ensure that the hierarchical grid is properly styled with the proper offset.
Let me know if you have any questions.
Best Regards,
Maya Kirova
Infragistics, Inc.
http://www.infragistics.com/support
Hi Maya,
Thank you for the reply.
Please note that I am using single igGrid, not nested one as shown in your suggested link.
I have a single igGrid inside which few rows are shown as header rows(with different background and hover color) and few are shown as their child rows. The child rows I want to shift little towards right side (margin left: 30px; something like that)
Let me know if you need any more information regarding my code. Please help how to resolve it.
Thanks in advance
In that case you can apply padding-left to the first td element of the related rows.
You can refer to the following example:
http://jsfiddle.net/47zdk1ge/
The second row, which has background-color applied, also has padding-left set for the first cell so that it appears shifted to the right.
Let me know if that is what you’re aiming to achieve.