I am using NetAdvantage 13.1.
I have a webhierchical grid inside of a webtab inside a webdialogwindow. All of my grid columns are sized using percentages using the CssClass property.
When I maximize the webdialogwindow, I notice that my grid columns resize properly but the headers do not. They stay unchanged, and hence wrong.
A couple of notes:
After this occurrs, if I manually resize a column the headers all snap into place. Like magic.
ColumRezing behavior is enabled for the grids.
Also note that using the resizer doesn't have this same problem. Resizing using the resizer automatically resizes not only the columns but the headers as well.
Any ideas would be appreciated. One of the grids in question is posted below:
<ig:WebHierarchicalDataGrid ID="RptGrid" runat="server" AutoGenerateColumns="False" AutoGenerateBands="False" DataKeyFields="SubjectID,LaunchTimeStamp" EnableRelativeLayout="True" onrowislandspopulating="RptGrid_RowIslandsPopulating" OnItemCommand="RptGrid_ItemCommand" OnInitializeRow="RptGrid_InitializeRow" OnColumnSorted="RptGrid_ColumnSorted" ExpansionColumnCss="RptHideExpandCollapse" CssClass="RptGridGeneral" Width="99%" > <Behaviors> <ig:ColumnResizing Enabled="true" EnableInheritance="true" > </ig:ColumnResizing> <ig:Paging Enabled="true" EnableInheritance="False" PagerMode="NumericFirstLast" PageSize="15" PagerAppearance="Top" PagerCssClass="RptPager" > </ig:Paging> <ig:ColumnMoving Enabled="true" EnableInheritance="true" DragStyle="Slide" > </ig:ColumnMoving> <ig:Sorting Enabled="true" EnableInheritance="false" SortingMode="Single" > <ColumnSettings> <ig:SortingColumnSetting ColumnKey="EventTimes" Sortable="False" /> <ig:SortingColumnSetting ColumnKey="DataFiles" Sortable="False" /> </ColumnSettings> </ig:Sorting> <ig:Selection Enabled="true" ColumnSelectType="None" RowSelectType="Single" CellClickAction="Row" CellSelectType="None"> </ig:Selection> </Behaviors> <AjaxIndicator Enabled="True" Location="TopLeft" ImageUrl="~/images/ajax-loader-big.gif" /> <EmptyRowsTemplate> There is no script data to display </EmptyRowsTemplate> <ExpandCollapseAnimation SlideOpenDirection="Auto" SlideOpenDuration="300" SlideCloseDirection="Auto" SlideCloseDuration="300" /> <Columns> <%--<ig:BoundDataField DataFieldName="WebScriptID" Key="WebScriptID" Header-Text="WebScript ID"/>--%> <%--<ig:GridField Key="test"></ig:GridField>--%> <%--<ig:UnboundField Key="UnboundTest" DataFormatString="{0}" DataType="System.String"></ig:UnboundField>--%> <ig:TemplateDataField Key="SubjectID" Header-Text="Subject ID" Header-CssClass="RptCol_ParticipantSubjectID" CssClass="RptCol_ParticipantSubjectID"> <ItemTemplate> <asp:LinkButton ID="btnExpandSubject" runat="server" CommandName="ExpandSubject"><%# Eval("subjectid")%></asp:LinkButton> </ItemTemplate> </ig:TemplateDataField> <ig:BoundDataField DataFieldName="GroupID" Key="GroupID" Header-Text="Group ID" Header-CssClass="RptCol_ParticipantGroupID" CssClass="RptCol_ParticipantGroupID"> </ig:BoundDataField> <ig:TemplateDataField Key="EventTimes" Header-Text="Event Times" Header-CssClass="RptCol_ParticipantTimes" CssClass="RptCol_ParticipantTimes"> <ItemTemplate> Launch: <%# Eval("launchtimestamp")%><br /> License: <%# Eval("LicenseTimeStamp")%><br /> Data: <%# Eval("DataTimeStamp")%><br /> </ItemTemplate> </ig:TemplateDataField> <ig:BoundDataField Header-CssClass="RptCol_ParticipantVersion" DataFieldName="IQVersion" Key="IQVersion" Header-Text="Inquisit Version" CssClass="RptCol_ParticipantVersion"> </ig:BoundDataField> <ig:TemplateDataField Key="DataFiles" Header-Text="Data Files" Header-CssClass="RptCol_ParticipantDataFiles" CssClass="RptCol_ParticipantDataFiles"> <ItemTemplate> <%--OnItemCommand="DataFilesRepeater_ItemCommand"--%> <asp:Repeater ID="DataFilesRepeater" runat="server"> <HeaderTemplate> </HeaderTemplate> <ItemTemplate> <%--<asp:LinkButton ID="_btnDownloadFile" runat="server" Text='< % #Container.DataItem%>' CommandName="DownloadFile" />--%> <%#Container.DataItem%> <br /> </ItemTemplate> <FooterTemplate> </FooterTemplate> </asp:Repeater> </ItemTemplate> </ig:TemplateDataField> <ig:TemplateDataField Key="Errors" Header-Text="Errors" Header-CssClass="RptCol_ParticipantErrorCount" CssClass="RptCol_ParticipantErrorCount"> <ItemTemplate> <asp:LinkButton ID="btnExpandErrors" runat="server" CommandName="ExpandErrors"><%# Eval("errorcount")%></asp:LinkButton> <asp:Label ID="lblErrorCount" runat="server" Text="0"></asp:Label> </ItemTemplate> </ig:TemplateDataField> </Columns> </ig:WebHierarchicalDataGrid>
Hello,
I tried to recreate this scenario with no success. Could you please send me send me a case specific sample with the described scenario, so I can test it on my configuration? Also I will appreciate if I could take a look at the CSS Classes involved. A couple of notes: I suppose the issue described is tested with several browsers. If not, it could be a browser related. Also I suggest you download the latest Service Release. You could access NetAdvantage for ASP.NET from our web site via https://ko.infragistics.com/my-account/keys-and-downloads/ Or by following the link bellow: NetAdvantage for ASP.NET 2013 Vol. 1 Product And Samples Both require to log in with your account. Please keep me updated on how this works for you and if you need more information.
Following the scenario I explained, when you maximize the webdialogwindow, the grid headers also resize corresponding to the columns resizing? Just trying to make sure we're testing the same thing.
I've tested this in various Windows browsers and see the same result. Upon maximizing the webdialogwindow, the grid headers do not resize though the columns resize properly. I've tried in Safari, FF and Chrome. All are latest versions.
I've also checked and we're up to date with service releases. Looks like we have the latest version of 13.1
Below is the css involved. I've also posted an image of the scenario. Notice the rightmost columns don't line up with their headers upon hitting the dialog's maximize button.
.RptTabGeneral{ top:60px; left:25px; overflow:hidden !important; position:absolute;}.RptTabInner{ border:1px solid #DCDCDC; height:100%; }
.RptGridGeneral{ /*overflow: hidden !important;*/ z-index:100000;}
.RptCol_ParticipantToggleLink{ width:2%; }.RptCol_ParticipantSubjectID{ width:12%; }.RptCol_ParticipantGroupID{ width:12%; }.RptCol_ParticipantTimes{ width:25%; white-space:nowrap; }.RptCol_ParticipantVersion{ width:9%; }.RptCol_ParticipantDataFiles{ width:33%; }.RptCol_ParticipantErrorCount{ width:7%; }
I am just checking about the progress of this issue.Did you solve your issue accordingly the information that I provided to you?Let me know if you need any further assistance.
Hello Cliff, Thank you for your response.
Since you are using the same CSS Styling Width for both the Columns and for the Header, which could have been an issue otherwise, I suggest another approach. You could remove the width from these custom CSS Classes and apply the Column Width in the Markup using the Width properties. With this approach, when the grid is generated, both Column’s and the corresponding Header Width will be applied using the same value. Please let me know if this approach helps you.