Column Headers Aren't Resized Along With The Columns on Maximize of WebDialogWindow Container

205

Cliff posted over 11 years ago

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>

Parents

No Data

Reply

10685

Offline Ivaylo Ganchev posted over 11 years ago

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

Cancel

Children

205

Cliff posted over 11 years ago in reply to Ivaylo Ganchev

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%;

}
Cancel
Reply

Cancel