GridBoundColumn Width on Rebind

[KO]

So we have a RadGrid on one of our pages that has some GridBoundColumns and GridTemplateColumns. Over on the left of the screen we have some input that they can fill in and hit submit to do a basic search and bind the info to the grid. The grid renders correctly within the page the first time. However, once the first search is done, the first bound column width is extremely long, which "rams" the rest of the content off to the right and a horizontal scroll bar renders. There is no need for the horizontal scroll bar, the data should fit just fine, and the column should not be so wide!

The OnGridCreated event that is assigned only handles vertical dimensions and is not relevant to the issue.

Using binary version 2012.2.607.0

Page Markup:

<asp:Content ID="Content3" ContentPlaceHolderID="PageBody" runat="server">
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableHistory="True" OnAjaxRequest="AccountSearch">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="AccountSearchMultiPage" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="InquiryScriptBlock" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="InquiryPanelBar">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="AccountSearchMultiPage" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="InquiryScriptBlock" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="AccountSearchMultiPage">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="AccountSearchMultiPage" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="InquiryPanelBar" />
                    <telerik:AjaxUpdatedControl ControlID="InquiryScriptBlock" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server" />

    <div class="PageNest">
    <telerik:RadSplitter ID="InquiryPageSplitter" runat="server" Orientation="Vertical" Width="100%" Height="100%"
     OnClientLoaded="ResizeAccountSearchGrid" OnClientResized="ResizeAccountSearchGrid" CssClass="MainRadSplitter"
     ResizeWithBrowserWindow="true"  >
        <telerik:RadPane ID="RadPane1" runat="server" Width="200" Height="100%" Collapsed="false">
            <telerik:RadPanelBar ID="InquiryPanelBar" runat="server" CssClass="LeftColumnPanelBar" OnItemClick="ViewAccountDetails" OnClientItemClicking="InquiryPanelBarRedirect">
                <Items>
                    <telerik:RadPanelItem Text="Inquiry Options" PreventCollapse="true" Expanded="true" PostBack="false" Value="InquiryMain">
                        <Items>
                            <telerik:RadPanelItem ID="InquiryOptions" PostBack="false" Value="InquiryOptions" >
                                <ItemTemplate>
                                    <div style="margin-left: 10px">
                                        <telerik:RadTextBox ID="AccountNumberTextBox" runat="server" EmptyMessage="Account Number" />
                                        <telerik:RadTextBox ID="NameTextBox" runat="server" EmptyMessage="Name" />
                                        <telerik:RadMaskedTextBox ID="SSNTextBox" runat="server" EmptyMessage="SSN" HideOnBlur="True" />
                                        <telerik:RadMaskedTextBox ID="PhoneTextBox" runat="server" EmptyMessage="Telephone" HideOnBlur="True" />
                                        <telerik:RadComboBox ID="CustomComboBox" runat="server" EmptyMessage="Custom Search Field" OnClientSelectedIndexChanged="SetCustomTextBoxFocus" />
                                        <telerik:RadTextBox ID="CustomTextBox" runat="server" EmptyMessage="Choose an option above" />
                                        <telerik:RadButton ID="SearchButton" runat="server" Text="Submit" OnClick="AccountSearch" />
                                    </div>
                                </ItemTemplate>
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Recently Viewed Accounts" PreventCollapse="true" Expanded="true" PostBack="false" Value="RecentlyViewedMain">
                        <Items>

                        </Items>
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem ID="OnlineActivityReports" Value="OnlineActivityReports" Text="Online Activity Reports" PreventCollapse="true" Expanded="true" PostBack="false">
                        <Items>
                            <telerik:RadPanelItem Text="Account Payments Reported" Value="PaymentHistory" PostBack="false" />
                            <telerik:RadPanelItem Text="Account Edit Requests" Value="EditHistory" PostBack="false" />
                            <telerik:RadPanelItem Text="Account Cancellation Requests" Value="CancelHistory" PostBack="false" />
                            <telerik:RadPanelItem Text="Populated at Page_Load" Value="PrecollectActions" PostBack="false" />
                        </Items>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelBar>
        </telerik:RadPane>
        <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" EnableResize="false" />
        <telerik:RadPane ID="RadPane2" runat="server" Height="100%" Scrolling="None">

                <telerik:RadMultiPage ID="AccountSearchMultiPage" runat="server" SelectedIndex="0" Height="100%" >

                    <telerik:RadPageView ID="AccountSearchPageView" runat="server" Height="100%" Width="100%">
                        <div class="PageViewHeader">
                            <asp:Label ID="InquiryLabel" runat="server" CssClass="GridLabel" />
                        </div>
                        <telerik:RadGrid ID="AccountSearchGrid" runat="server" AutoGenerateColumns="false" ShowFooter="true"
                         OnItemCommand="AccountSearchGrid_ItemCommand" ShowHeader="True">
                            <MasterTableView DataKeyNames="Id" ClientDataKeyNames="Id" TableLayout="Auto">
                                <ItemStyle Wrap="false" />
                                <Columns>
                                    <telerik:GridBoundColumn HeaderText="Agency ID" DataField="HostID" UniqueName="HostID" Aggregate="Count" FooterStyle-HorizontalAlign="Left" FooterAggregateFormatString="Showing {0} Matches" />
                                    <telerik:GridBoundColumn HeaderText="Account ID" DataField="ClientAccountID" UniqueName="ClientAccountID" />
                                    <telerik:GridTemplateColumn HeaderText="Name" UniqueName="Name">
                                        <ItemTemplate>
                                            <asp:LinkButton runat="server" CommandName="ShowDetail" CommandArgument='<%# Eval("ID") %>' Text="<%# DisplayAccountName() %>" />
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridButtonColumn HeaderText="Packet #" DataTextField="PacketNumber" UniqueName="PacketNumber" ButtonType="LinkButton" CommandName="ShowPacket" />
                                    <telerik:GridTemplateColumn HeaderText="Address" UniqueName="Address">
                                        <ItemTemplate>
                                            <%# FormatEval("Address1", "{0}<br/>") %>
                                            <%# FormatEval("Address2", "{0}<br/>") %>
                                            <%# FormatEval("City", "{0}, ")%>
                                            <%# FormatEval("State")%>
                                            <%# FormatEval("Zip") %>
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridBoundColumn HeaderText="Date Assigned" DataField="DateAssigned" DataFormatString="{0:d}" UniqueName="DateAssigned" FooterStyle-HorizontalAlign="Left" Aggregate="Max" DataType="DateTime" FooterAggregateFormatString="Most Recent: {0:d}" />
                                    <telerik:GridNumericColumn HeaderText="Principal" DataField="AmountAssigned" DataFormatString="{0:C}" UniqueName="AmountAssigned" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" />
                                    <telerik:GridNumericColumn HeaderText="Balance" DataField="CurrBalance" DataFormatString="{0:C}" UniqueName="CurrBalance" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" />
                                </Columns>
                                <FooterStyle HorizontalAlign="Right" />
                            </MasterTableView>
                            <ClientSettings>
                                <Scrolling AllowScroll="true" UseStaticHeaders="true" Scrollheight="100%" />
                                <ClientEvents OnGridCreated="ResizeAccountSearchGrid" />
                            </ClientSettings>
                        </telerik:RadGrid>
                    </telerik:RadPageView>

                    <telerik:RadPageView ID="AccountDetailPageView" runat="server">
                        <caw:AccountDetail ID="AccountDetailControl" runat="server" OnAccountLoaded="UpdateRecentlyViewedList" />
                    </telerik:RadPageView>

                </telerik:RadMultiPage>

        </telerik:RadPane>
    </telerik:RadSplitter>
    </div>
    <telerik:RadScriptBlock ID="InquiryScriptBlock" runat="server">
        <script type="text/javascript">
            function InquiryPanelBarRedirect(sender, args) {
                var value = args.get_item().get_value();
                if (value == "PaymentHistory") {
                    <%= Navigator.OnlineActivity(OnlineActivityType.PaymentHistory, Configuration[Vars.PrecollectName]).ToEventScript() %>
                }
                if (value == "EditHistory") {
                    <%= Navigator.OnlineActivity(OnlineActivityType.EditHistory, Configuration[Vars.PrecollectName]).ToEventScript() %>
                }
                if (value == "CancelHistory") {
                    <%= Navigator.OnlineActivity(OnlineActivityType.CancelHistory, Configuration[Vars.PrecollectName]).ToEventScript() %>
                }
                if (value == "PrecollectActions") {
                    <%= Navigator.OnlineActivity(OnlineActivityType.PrecollectActions, Configuration[Vars.PrecollectName]).ToEventScript() %>
                }
            }

            function SetCustomTextBoxFocus(sender, args) {
                $('#<%= InquiryOptions.FindControl("CustomTextBox").ClientID %>').focus();
            }

            function ResizeAccountSearchGrid(sender, args) {

                ResizeGrid($find("<%= AccountSearchGrid.ClientID %>"));
            }
        </script>
    </telerik:RadScriptBlock>
</asp:Content>

protected void AccountSearch(object sender, EventArgs eventArgs)
{
    //reset the grid to the default list of columns - removing any extras added by the Custom search box
    var defaultColumns = new List<string> { "Name", "HostID", "ClientAccountID", "PacketNumber", "Address", "AmountAssigned", "CurrBalance", "DateAssigned", "ViewDetailsLink" };
    defaultColumns.AddRange(Configuration[Vars.InquirySearchSummaryAdditionalFields].ToString().Split(new[] { ", " }, StringSplitOptions.RemoveEmptyEntries));

    var columnsToRemove = AccountSearchGrid.Columns.Cast<GridColumn>().Where(column => !defaultColumns.Contains(column.UniqueName)).ToList();
    foreach (var column in columnsToRemove)
        AccountSearchGrid.Columns.Remove(column);

    var searchParameters = new Dictionary<IList<AccountField>, string>();
    var inquiryBar = InquiryPanelBar.FindItemByValue("InquiryOptions");

    //iterate all RadControls within the InquiryOptions panel bar item
    foreach (var control in inquiryBar.Controls)
    {
        //make sure the control is a RadInput
        var input = control as RadInputControl;
        if (input == null) continue;

        var id = input.ID;
        //if the control uniqueId starts with the word Custom, skip until later
        if (id.StartsWith("Custom")) continue;
        //verify the input has a value
        var value = input.Text.Trim();
        if (String.IsNullOrEmpty(value)) continue;

        //get the search group from the Id of the input.  eg. NameTextBox ID value equals InquiryNameSearchFields - a Configuration Variable from database
        var searchGroup = String.Format("Inquiry{0}SearchFields", id.Replace("TextBox", String.Empty));
        //the searchGroup is a comma space separated list of database column names to search with this input
        var fieldNames = Configuration[searchGroup].ToString().Split(new[] { ", " }, StringSplitOptions.RemoveEmptyEntries);
        //get the AccountField objects from the field names, will automatically be trimmed by the client field permissions
        var fields = User.ParentCawClient.AccountFields.Where(field => fieldNames.Contains(field.ColumnName)).ToList();

        //if we are searching using a masked input we want to use the literals
        var radMaskedTextBox = control as RadMaskedTextBox;
        if (radMaskedTextBox != null) value = radMaskedTextBox.TextWithLiterals.Trim();

        //add the field list and the value to the search parameters
        searchParameters.Add(fields, value);
    }
    //check the custom search box
    var custom = ((RadTextBox)InquiryOptions.FindControl("CustomTextBox")).Text;
    var combo = (RadComboBox)InquiryOptions.FindControl("CustomComboBox");
    //using Text property here since the SelectedText and SelectedValue come back as empty strings for some reason
    var selected = combo.Text;
    if (!String.IsNullOrEmpty(custom) && !String.IsNullOrEmpty(selected))
    {
        var customField = User.ParentCawClient.AccountFields.Single(fld => fld.DisplayName == selected);
        searchParameters.Add(new List<AccountField> { customField }, custom);
        var column = new GridBoundColumn();
        AccountSearchGrid.Columns.Add(column);
        column.HeaderText = customField.DisplayName;
        column.DataField = customField.ColumnName;
        column.UniqueName = customField.ColumnName;
    }

    InquiryLabel.Text = @"Inquiry results";

    //send the dictionary to the account search for handling, bind the results to the searchgrid
    AccountSearchGrid.DataSource = _accountService.AccountInquiry(searchParameters);
    AccountSearchGrid.Rebind();

    InquiryPanelBar.ClearSelectedItems();

    //if only one result was found take the user directly to the detail screen.
    if (AccountSearchGrid.Items.Count == 1)
    {

        var row = AccountSearchGrid.Items[0];
        var id = int.Parse(row.GetDataKeyValue("Id").ToString());
        ViewAccountDetails(id, custom);
    }
    else
        AccountSearchMultiPage.SelectedIndex = AccountSearchPageView.Index;
}

[Maria Ilieva]

Hi Kelson,

Could you please test the same RadGrid settings out of the RadSplitter control and verify if the same rendering issue appear? Also please remove the Ajax settings and see if this makes any difference.

Regards,
Maria Ilieva
the Telerik team

[KO]

After removing the RadSplitter I noticed that the RadGrid was not rendering correctly. I guess whatever happens when the splitter is done with its initial rendering or pane resizing was taking care of the issue for me which was making it seem like the initial render was correct.

So the issue seems to be setting a width for the FooterStyles. I ended up assigning FooterStyle-CssClass="BoundFooterStyle" to each column that has a footer being rendered.

.BoundFooterStyle
{
    width: 5px;
}

At first I tried using width: auto; and then width: 0px; just to troubleshoot, but that had the same affect with no width at all. So I guess whatever happens intrinsically when rendering the columns must have a width integer value greater than zero? Hopefully this stays good cross browser but it still baffles me a bit.

[KO]

I am so confused as to whats going on because with the rule of 5px applied in the column page markup the footer aggregates will render fine. But should they? Because they don't get rendered at five pixels. Its like some magic just occurs that renders the column as if width: auto was applied correctly. Please see the first upload picture, boundfooterstyle.png. All columns with footer aggregates are defined in page markup and render fine, even though with a CssClass width at 5px, should they be rendering fine? Something seems wrong.

However, if a column is being generated server side, no such class needs to be applied and if it does get applied, it will literally destroy the footer alignment in relation to columns and will crop the footer's cell content as if it was 5px (or whatever width defined). The second and third screenshots so a grid that has the first column defined in the page markup but the rest (and the last two) are generated in code behind and you can see the rendering. This scenario isn't really an issue because I can just leave out the width specifications and have it render fine.

I'm guessing we just don't apply such classes in code behind generated columns and only on page markup? Why won't page markup Footerstyle-CssRule with width: auto work in page markup?

[Maria Ilieva]

Hi Kelson,

The described issue seems to be really rather strange and should not apply in a correct setting of the RadGrid control. Therefore in order to be able to further research on the issue it will be best to send us live url and exact steps for replicating the issue on your site. Thus we will investigate the problem and advise you further.

Greetings,
Maria Ilieva
the Telerik team