I'm using Infragistics v 6.3. Are there any good examples/tutorials on moving rows in a hierarchical grid? I'm able to get some of the functionality going, but am running into some visual issues that occur after I move a row. When I try expanding/collapsing a row, it appears to overlap the rest of the grid (it looks like a messed-up Z-index property). I'd be glad to provide code, if needed.
Hello,
Indeed, it is very hard for us to reproduce the problem / help, without seeing some samples first. Maybe the top level container comtaining the grid has position absolute set? (if this is the case, can you please set it to position:relative and see how it goes)? Other than that, if you can show us some sample code, this will surely provide additional clues.
Certainly. I've included the code below
function dgFiles_InitializeLayoutHandler(gridName){
grid = igtbl_getGridById(gridName);
}
function dgFiles_InitializeRowHandler(gridName, rowId){ }function dgFiles_ValueListSelChangeHandler(gridName, selectId, cellId){ var row = grid.getActiveRow(); var parentRow; var cell; var row2; var strReportFileName; var newRowIndex; var valueList; var childRows; // Get the report name from the current row //strReportFileName = row.getCellFromKey('SecondBandCol6').getValue();
// Get the value list from the current row. valueList = row.Band.getColumnFromKey('SecondBandCol11').ValueList; // Get the row's parent row parentRow = row.ParentRow; //strHTML = row.Element.innerHTML;
// Remove the active row from the parent row parentRow.Rows.remove(row.getIndex(), false); document.getElementById(selectId).style.display = 'none'; // Find the row index based on the category value newRowIndex = getNewRowIndex(document.getElementById(selectId).value); // get the row based on index var x = grid.Rows.getRow(newRowIndex); // activate it x.activate(); // add new row using igtbl_addNew utility function var newRow = igtbl_addNew(grid.Id,1); } function getNewRowIndex(selValue){ var i=0,j=0; var rows = grid.Rows; if(!rows) return -1; while(j<rows.length) { var r = rows.getRow(j); if(r.getCellFromKey('SecondBandCol16').getValue() == selValue) return j; j++; } return -1;} </script>
<igtbl:ultrawebgrid id="dgFiles" runat="server" StationaryMargins="Header" ImageDirectory="/ig_common/Images/" Visible="False"> <DisplayLayout StationaryMargins="Header" AutoGenerateColumns="False" AllowAddNewDefault="Yes" Version="4.00" GridLinesDefault="Horizontal" ViewType="Hierarchical" ScrollBarView="Vertical" HeaderClickActionDefault="SortMulti" DefaultCentury="2000" IndentationDefault="30" BorderCollapseDefault="Separate" RowSelectorsDefault="No" Section508Compliant="True" Name="xctl0xdgFiles" TableLayout="Fixed"> <Pager> <Style BorderWidth="1px" BorderStyle="Solid" BackColor="LightGray">
<BorderDetails ColorTop="White" WidthLeft="1px" WidthTop="1px" ColorLeft="White"></BorderDetails>
</Style> </Pager> <HeaderStyleDefault BorderStyle="None" HorizontalAlign="Left" ForeColor="Black" BackColor="LightGray" Height="20px"> <BorderDetails ColorTop="White" WidthLeft="0px" WidthTop="0px" ColorLeft="White"></BorderDetails> </HeaderStyleDefault> <FrameStyle BorderWidth="0px" Font-Size="8pt" Font-Names="Verdana" BorderStyle="None" BackColor="White"></FrameStyle> <FooterStyleDefault BorderWidth="1px" BorderStyle="Solid" BackColor="LightGray"> <BorderDetails ColorTop="White" WidthLeft="1px" WidthTop="1px" ColorLeft="White"></BorderDetails> </FooterStyleDefault> <ClientSideEvents ValueListSelChangeHandler="dgFiles_ValueListSelChangeHandler" InitializeLayoutHandler="dgFiles_InitializeLayoutHandler" InitializeRowHandler="dgFiles_InitializeRowHandler"></ClientSideEvents> <Images /> <EditCellStyleDefault BorderWidth="0px" BorderStyle="None"></EditCellStyleDefault> <RowStyleDefault BorderWidth="1px" BorderColor="Silver" BorderStyle="Solid" BackColor="White"> <Padding Left="3px"></Padding> <BorderDetails ColorTop="White" ColorRight="Silver" WidthRight="1px" StyleRight="Solid" ColorLeft="White"></BorderDetails> </RowStyleDefault> </DisplayLayout> <Bands> <igtbl:UltraGridBand ColHeadersVisible="Yes"> <Columns> <igtbl:UltraGridColumn Key="FirstBandCol1" Hidden="True" DataType="System.Int16" BaseColumnName="ParentId"> <Footer Key="FirstBandCol1"></Footer> <Header Key="FirstBandCol1"></Header> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn Key="FirstBandCol2"> <CellStyle BorderColor="Transparent"> <BorderDetails ColorRight="Silver" WidthRight="1px" StyleRight="Solid"></BorderDetails> </CellStyle> <Footer Key="FirstBandCol2"> <RowLayoutColumnInfo OriginX="1"></RowLayoutColumnInfo> </Footer> <Header Key="FirstBandCol2"> <RowLayoutColumnInfo OriginX="1"></RowLayoutColumnInfo> </Header> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn Key="FirstBandCol3" Hidden="True"> <Footer Key="FirstBandCol3"> <RowLayoutColumnInfo OriginX="2"></RowLayoutColumnInfo> </Footer> <Header Key="FirstBandCol3"> <RowLayoutColumnInfo OriginX="2"></RowLayoutColumnInfo> </Header> </igtbl:UltraGridColumn> </Columns> <RowStyle BackColor="#F5F5EB"></RowStyle> </igtbl:UltraGridBand> <igtbl:UltraGridBand AllowSorting="OnClient"> <Columns> <igtbl:UltraGridColumn Key="SecondBandCol1" Hidden="True" BaseColumnName="Version"> <Footer Key="SecondBandCol1"></Footer> <Header Key="SecondBandCol1"></Header> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn Key="SecondBandCol2" Hidden="True" BaseColumnName="SecondBandCol2"> <Footer Key="SecondBandCol2"> <RowLayoutColumnInfo OriginX="1"></RowLayoutColumnInfo> </Footer> <Header Key="SecondBandCol2"> <RowLayoutColumnInfo OriginX="1"></RowLayoutColumnInfo> </Header> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn Key="SecondBandCol3" Hidden="True" BaseColumnName="SecondBandCol3"> <Footer Key="SecondBandCol3"> <RowLayoutColumnInfo OriginX="2"></RowLayoutColumnInfo> </Footer> <Header Key="SecondBandCol3"> <RowLayoutColumnInfo OriginX="2"></RowLayoutColumnInfo> </Header> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn Key="SecondBandCol4" Hidden="True" BaseColumnName="SecondBandCol4"> <Footer Key="SecondBandCol4"> <RowLayoutColumnInfo OriginX="3"></RowLayoutColumnInfo> </Footer> <Header Key="SecondBandCol4"> <RowLayoutColumnInfo OriginX="3"></RowLayoutColumnInfo> </Header> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn Key="SecondBandCol5" Hidden="True" BaseColumnName="SecondBandCol5"> <Footer Key="SecondBandCol5"> <RowLayoutColumnInfo OriginX="4"></RowLayoutColumnInfo> </Footer> <Header Key="SecondBandCol5"> <RowLayoutColumnInfo OriginX="4"></RowLayoutColumnInfo> </Header> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn Key="SecondBandCol6" AllowUpdate="No" Hidden="True" BaseColumnName="SecondBandCol6"> <Footer Key="SecondBandCol6"> <RowLayoutColumnInfo OriginX="5"></RowLayoutColumnInfo> </Footer> <Header Key="SecondBandCol6"> <RowLayoutColumnInfo OriginX="5"></RowLayoutColumnInfo> </Header> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn Key="SecondBandCol7" Hidden="True" BaseColumnName="SecondBandCol7"> <Footer Key="SecondBandCol7"> <RowLayoutColumnInfo OriginX="6"></RowLayoutColumnInfo> </Footer> <Header Key="SecondBandCol7"> <RowLayoutColumnInfo OriginX="6"></RowLayoutColumnInfo> </Header> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn Key="SecondBandCol8" Hidden="True" BaseColumnName="SecondBandCol8"> <Footer Key="SecondBandCol8"> <RowLayoutColumnInfo OriginX="7"></RowLayoutColumnInfo> </Footer> <Header Key="SecondBandCol8"> <RowLayoutColumnInfo OriginX="7"></RowLayoutColumnInfo> </Header> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn Key="SecondBandCol9" Hidden="True" BaseColumnName="SecondBandCol9"> <Footer Key="SecondBandCol9"> <RowLayoutColumnInfo OriginX="8"></RowLayoutColumnInfo> </Footer> <Header Key="SecondBandCol9"> <RowLayoutColumnInfo OriginX="8"></RowLayoutColumnInfo> </Header> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn HeaderText="SecondBandCol10" Key="SecondBandCol10" Width="245px" AllowUpdate="No" CellMultiline="Yes"> <CellStyle Wrap="True"></CellStyle> <Footer Key="SecondBandCol10"> <RowLayoutColumnInfo OriginX="9"></RowLayoutColumnInfo> </Footer> <Header Key="SecondBandCol10" Caption="SecondBandCol10"> <RowLayoutColumnInfo OriginX="9"></RowLayoutColumnInfo> </Header> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn Key="SecondBandCol11" AllowUpdate="Yes" Hidden="False" Type="DropDownList" BaseColumnName="SecondBandCol11"> <Footer Key="SecondBandCol11"> <RowLayoutColumnInfo OriginX="10"></RowLayoutColumnInfo> </Footer> <Header Key="SecondBandCol11"> <RowLayoutColumnInfo OriginX="10"></RowLayoutColumnInfo> </Header> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn HeaderText="Public" Key="SecondBandCol12" Width="100px" AllowUpdate="Yes" Type="SecondBandCol12"> <Footer Key="SecondBandCol12"> <RowLayoutColumnInfo OriginX="11"></RowLayoutColumnInfo> </Footer> <Header Key="SecondBandCol12" Caption="SecondBandCol12"> <RowLayoutColumnInfo OriginX="11"></RowLayoutColumnInfo> </Header> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn Key="SecondBandCol13" Hidden="True" BaseColumnName="SecondBandCol13"> <Footer Key="SecondBandCol13"> <RowLayoutColumnInfo OriginX="12"></RowLayoutColumnInfo> </Footer> <Header Key="SecondBandCol13"> <RowLayoutColumnInfo OriginX="12"></RowLayoutColumnInfo> </Header> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn HeaderText="SecondBandCol14" Key="View" Width="75px" AllowUpdate="No"> <CellStyle> <BorderDetails ColorRight="Transparent"></BorderDetails> </CellStyle> <Footer Key="View"> <RowLayoutColumnInfo OriginX="13"></RowLayoutColumnInfo> </Footer> <Header Key="View" Caption="View"> <RowLayoutColumnInfo OriginX="13"></RowLayoutColumnInfo> </Header> </igtbl:UltraGridColumn> <igtbl:TemplatedColumn HeaderText="SecondBandCol15" Key="Remove"> <CellStyle> <BorderDetails ColorRight="Silver" WidthRight="1px" StyleRight="Solid"></BorderDetails> </CellStyle> <CellTemplate> <ASP:LINKBUTTON id="lnkRemove" onclick="ProcessMe" runat="server">Remove</ASP:LINKBUTTON> </CellTemplate> <Footer Key="SecondBandCol15"> <RowLayoutColumnInfo OriginX="14"></RowLayoutColumnInfo> </Footer> <Header Key="SecondBandCol15" Caption="SecondBandCol15"> <RowLayoutColumnInfo OriginX="14"></RowLayoutColumnInfo> </Header> </igtbl:TemplatedColumn> <igtbl:UltraGridColumn Key="SecondBandCol16" Hidden="True" BaseColumnName="SecondBandCol16"> <Footer Key="SecondBandCol16"> <RowLayoutColumnInfo OriginX="15"></RowLayoutColumnInfo> </Footer> <Header Key="SecondBandCol16"> <RowLayoutColumnInfo OriginX="15"></RowLayoutColumnInfo> </Header> </igtbl:UltraGridColumn> </Columns> <RowStyle Height="27px" Wrap="True"></RowStyle> </igtbl:UltraGridBand> <igtbl:UltraGridBand AllowSorting="OnClient"> <Columns> <igtbl:UltraGridColumn Key="SecondBandCol1" Hidden="True" BaseColumnName="Version"> <Footer Key="SecondBandCol1"></Footer> <Header Key="SecondBandCol1"></Header> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn Key="SecondBandCol2" Hidden="True" BaseColumnName="SecondBandCol2"> <Footer Key="SecondBandCol2"> <RowLayoutColumnInfo OriginX="1"></RowLayoutColumnInfo> </Footer> <Header Key="SecondBandCol2"> <RowLayoutColumnInfo OriginX="1"></RowLayoutColumnInfo> </Header> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn Key="SecondBandCol3" Hidden="True" BaseColumnName="SecondBandCol3"> <Footer Key="SecondBandCol3"> <RowLayoutColumnInfo OriginX="2"></RowLayoutColumnInfo> </Footer> <Header Key="SecondBandCol3"> <RowLayoutColumnInfo OriginX="2"></RowLayoutColumnInfo> </Header> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn Key="SecondBandCol4" Hidden="True" BaseColumnName="SecondBandCol4"> <Footer Key="SecondBandCol4"> <RowLayoutColumnInfo OriginX="3"></RowLayoutColumnInfo> </Footer> <Header Key="SecondBandCol4"> <RowLayoutColumnInfo OriginX="3"></RowLayoutColumnInfo> </Header> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn Key="SecondBandCol5" Hidden="True" BaseColumnName="SecondBandCol5"> <Footer Key="SecondBandCol5"> <RowLayoutColumnInfo OriginX="4"></RowLayoutColumnInfo> </Footer> <Header Key="SecondBandCol5"> <RowLayoutColumnInfo OriginX="4"></RowLayoutColumnInfo> </Header> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn Key="SecondBandCol6" AllowUpdate="No" Hidden="True" BaseColumnName="SecondBandCol6"> <Footer Key="SecondBandCol6"> <RowLayoutColumnInfo OriginX="5"></RowLayoutColumnInfo> </Footer> <Header Key="SecondBandCol6"> <RowLayoutColumnInfo OriginX="5"></RowLayoutColumnInfo> </Header> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn Key="SecondBandCol7" Hidden="True" BaseColumnName="SecondBandCol7"> <Footer Key="SecondBandCol7"> <RowLayoutColumnInfo OriginX="6"></RowLayoutColumnInfo> </Footer> <Header Key="SecondBandCol7"> <RowLayoutColumnInfo OriginX="6"></RowLayoutColumnInfo> </Header> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn Key="SecondBandCol8" Hidden="True" BaseColumnName="SecondBandCol8"> <Footer Key="SecondBandCol8"> <RowLayoutColumnInfo OriginX="7"></RowLayoutColumnInfo> </Footer> <Header Key="SecondBandCol8"> <RowLayoutColumnInfo OriginX="7"></RowLayoutColumnInfo> </Header> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn Key="SecondBandCol9" Hidden="True" BaseColumnName="SecondBandCol9"> <Footer Key="SecondBandCol9"> <RowLayoutColumnInfo OriginX="8"></RowLayoutColumnInfo> </Footer> <Header Key="SecondBandCol9"> <RowLayoutColumnInfo OriginX="8"></RowLayoutColumnInfo> </Header> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn HeaderText="SecondBandCol10" Key="SecondBandCol10" Width="245px" AllowUpdate="No" CellMultiline="Yes"> <CellStyle Wrap="True"></CellStyle> <Footer Key="SecondBandCol10"> <RowLayoutColumnInfo OriginX="9"></RowLayoutColumnInfo> </Footer> <Header Key="SecondBandCol10" Caption="SecondBandCol10"> <RowLayoutColumnInfo OriginX="9"></RowLayoutColumnInfo> </Header> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn HeaderText="Public" Key="SecondBandCol12" Width="100px" AllowUpdate="Yes" Type="SecondBandCol12"> <Footer Key="SecondBandCol12"> <RowLayoutColumnInfo OriginX="11"></RowLayoutColumnInfo> </Footer> <Header Key="SecondBandCol12" Caption="SecondBandCol12"> <RowLayoutColumnInfo OriginX="11"></RowLayoutColumnInfo> </Header> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn Key="SecondBandCol13" Hidden="True" BaseColumnName="SecondBandCol13"> <Footer Key="SecondBandCol13"> <RowLayoutColumnInfo OriginX="12"></RowLayoutColumnInfo> </Footer> <Header Key="SecondBandCol13"> <RowLayoutColumnInfo OriginX="12"></RowLayoutColumnInfo> </Header> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn HeaderText="SecondBandCol14" Key="View" Width="75px" AllowUpdate="No"> <CellStyle> <BorderDetails ColorRight="Transparent"></BorderDetails> </CellStyle> <Footer Key="View"> <RowLayoutColumnInfo OriginX="13"></RowLayoutColumnInfo> </Footer> <Header Key="View" Caption="View"> <RowLayoutColumnInfo OriginX="13"></RowLayoutColumnInfo> </Header> </igtbl:UltraGridColumn> <igtbl:TemplatedColumn HeaderText="SecondBandCol15" Key="Remove"> <CellStyle> <BorderDetails ColorRight="Silver" WidthRight="1px" StyleRight="Solid"></BorderDetails> </CellStyle> <CellTemplate> <ASP:LINKBUTTON id="lnkRemove" onclick="ProcessMe" runat="server">Remove</ASP:LINKBUTTON> </CellTemplate> <Footer Key="SecondBandCol15"> <RowLayoutColumnInfo OriginX="14"></RowLayoutColumnInfo> </Footer> <Header Key="SecondBandCol15" Caption="SecondBandCol15"> <RowLayoutColumnInfo OriginX="14"></RowLayoutColumnInfo> </Header> </igtbl:TemplatedColumn> <igtbl:UltraGridColumn Key="SecondBandCol16" Hidden="True" BaseColumnName="SecondBandCol16"> <Footer Key="SecondBandCol16"> <RowLayoutColumnInfo OriginX="15"></RowLayoutColumnInfo> </Footer> <Header Key="SecondBandCol16"> <RowLayoutColumnInfo OriginX="15"></RowLayoutColumnInfo> </Header> </igtbl:UltraGridColumn> </Columns> <RowStyle Height="27px" Wrap="True"></RowStyle> </igtbl:UltraGridBand> </Bands> </igtbl:ultrawebgrid>
Sorry, but I had to exclude the column names for security reasons.
As you can see, the WebGrid contains three bands, which are as follows:
1) Band 1 refers to a Category
2) Band 2 represents what we call a "parent" file, or the "latest version" of a series of files. This row contains a dropdownlist that enables a user to change categories for any given file (eg: Category 2 -> Category 3).
3) Band 3 is similar to Band 2 in that it contains the same attributes (file name, extension, etc), EXCEPT the dropdownlist. This Band represents "child" elements, or "earlier versions" of the "parent" file. Users may not change categories for earlier versions.
If a parent file's category is changed, the category change should apply to any child files below it. I did not implement that here in the code, but I will later on.
When I change a file's category, the row is removed and added to the new category correctly, but when I collapse the +/- icon, the new row doesn't "hide" as I would expect it to when collapsing a row.
Let me know if you need any more information.