Grid columns resizeToFit - bound after pageLoad in ModalPopupExtender

[Dennis]

I have a Grid with link buttons inside of template fields.  This grid is created after various drop down selections are made.  Once a link button is clicked from inside this "Master" grid, information from that button gets passed to a SQL query to populate a second Grid that is contained within a ModalPopupExtender.  When this grid is databound I would like to resize all the columns to fit the contents.  I have found this on this site: http://www.telerik.com/forums/radgrid-columns-width-fit-the-content-of-the-columns

However, my grid is not bound on pageLoad.  How can I get my "Pop Up" grid to set columns to autowidth when it is bound after the link button click from the "Master" grid?  The Grid is bound to a datatable that is returned from a stored procedure and then the ModalPopupExtender is called with mpe.Show(); .  At present I am setting the width of the grid and all the bound columns to get the desired look.  I have many more grids to populate on this page in similar ModalPopupExtender's.  I would hate to have to set the width's for all grids.

Here is the aspx code for the MPE and RadGrid:

<input id="hidden4" type="hidden" name="hddclick" runat="server" />
<ajaxToolkit:ModalPopupExtender ID="mpIRH" runat="server" PopupControlID="pnlIRH" TargetControlID="hidden4" CancelControlID="lbIRHClose" BackgroundCssClass="modalBackground" />
<asp:Panel ID="pnlIRH" runat="server" CssClass="modalPopup" HorizontalAlign="Center" Style="display: none;">
    <h1 class="bold">Invoice Reg Hours</h1>
    <asp:Panel ID="Panel5" runat="server" CssClass="inputSet">
        <span>Labor Code:</span>
        <asp:Label ID="pnlIRH_lblLC" runat="server" />
    </asp:Panel>
    <asp:Panel ID="Panel6" runat="server" CssClass="inputSet">
        <span>ROM:</span>
        <asp:Label ID="pnlIRH_lblROM" runat="server" />
    </asp:Panel>
    <asp:UpdatePanel ID="pnlIRH_UP" runat="server" UpdateMode="Conditional" AssociatedUpdatePanelID="updateProgress">
        <ContentTemplate>
            <telerik:RadGrid ID="pnlIRH_RadGrid" runat="server" RenderMode="Lightweight" CssClass="box_shadow round-corners AddBorders" AllowPaging="false" AllowSorting="true" CellSpacing="0" GridLines="None" ClientSettings-Scrolling-AllowScroll="true" ClientSettings-Scrolling-UseStaticHeaders="true"
                                ClientSettings-Resizing-AllowColumnResize="true" ClientSettings-AllowColumnsReorder="true" ClientSettings-Animation-AllowColumnReorderAnimation="true" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Font-Size="8pt" MasterTableView-TableLayout="auto" Width="825px"
                                AlternatingItemStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" ClientSettings-ReorderColumnsOnClient="true" ClientSettings-Animation-ColumnReorderAnimationDuration="1" AlternatingItemStyle-Font-Bold="true" ItemStyle-Font-Bold="true" >
                <ClientSettings>
                    <Resizing AllowColumnResize="true" ResizeGridOnColumnResize="true" AllowResizeToFit="true" />
                </ClientSettings>
                <MasterTableView AutoGenerateColumns="false" AllowMultiColumnSorting="true">
                    <Columns>
                        <telerik:GridBoundColumn HeaderText="Payroll" DataField="Payroll" SortExpression="Payroll" ItemStyle-Width="55px" HeaderStyle-Width="55px" />
                        <telerik:GridBoundColumn HeaderText="Employee" DataField="Employee" SortExpression="Employee" />
                        <telerik:GridBoundColumn HeaderText="PLC" DataField="PLC" SortExpression="PLC" ItemStyle-Width="55px" HeaderStyle-Width="55px" />
                        <telerik:GridBoundColumn HeaderText="Week Ending" DataField="Weekending" SortExpression="Weekending" DataFormatString="{0:MM/dd/yyyy}" ItemStyle-Width="55px" HeaderStyle-Width="95px" />
                        <telerik:GridBoundColumn HeaderText="WO Number" DataField="WO Number" SortExpression="WO_Number" ItemStyle-Width="55px" HeaderStyle-Width="130px" />
                        <telerik:GridBoundColumn HeaderText="Fri" DataField="Fri" SortExpression="Fri" ItemStyle-CssClass="width1" HeaderStyle-CssClass="width1" />
                        <telerik:GridBoundColumn HeaderText="Sat" DataField="Sat" SortExpression="Sat" ItemStyle-CssClass="width1" HeaderStyle-CssClass="width1" />
                        <telerik:GridBoundColumn HeaderText="Sun" DataField="Sun" SortExpression="Sun" ItemStyle-CssClass="width1" HeaderStyle-CssClass="width1" />
                        <telerik:GridBoundColumn HeaderText="Mon" DataField="Mon" SortExpression="Mon" ItemStyle-CssClass="width1" HeaderStyle-CssClass="width1" />
                        <telerik:GridBoundColumn HeaderText="Tue" DataField="Tue" SortExpression="Tue" ItemStyle-CssClass="width1" HeaderStyle-CssClass="width1" />
                        <telerik:GridBoundColumn HeaderText="Wed" DataField="Wed" SortExpression="Wed" ItemStyle-CssClass="width1" HeaderStyle-CssClass="width1" />
                        <telerik:GridBoundColumn HeaderText="Thu" DataField="Thu" SortExpression="Thu" ItemStyle-CssClass="width1" HeaderStyle-CssClass="width1" />
                        <telerik:GridBoundColumn HeaderText="Total" DataField="Total" SortExpression="Total" ItemStyle-CssClass="width2" HeaderStyle-CssClass="width2" />
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>
        </ContentTemplate>
    </asp:UpdatePanel>
    <br />
    <asp:LinkButton ID="lbIRHClose" runat="server" class="button icon fa-info-sign" Style="cursor: pointer;" Text="Close" />
</asp:Panel>

Here is the all the CSS code that is called:

div.RadGrid .rgRow td,
div.RadGrid .rgAltRow td {
    padding: 0px;
}
.modalBackground {
    background-color: Black;
    filter: alpha(opacity=90);
    opacity: 0.8;
}
.modalPopup {
    background-color: #FFFFFF;
    border-width: 3px;
    border-style: solid;
    border-color: black;
    padding: 10px;
    width: auto;
    height: auto;
    max-width: 90%;
}
.width1 {
    width: 35px;
}
.width2 {
    width: 50px;
}
/* Add vertical lines to RadGrid */
div.AddBorders .rgHeader:first-child,
div.AddBorders th.rgResizeCol:first-child,
div.AddBorders .rgFilterRow td:first-child,
div.AddBorders .rgRow td:first-child,
div.AddBorders .rgAltRow td:first-child,
div.AddBorders .rgEditRow td:first-child,
div.AddBorders .rgFooter td:first-child
{
    border-left-width:0;
}
div.AddBorders .rgHeader,
div.AddBorders th.rgResizeCol,
div.AddBorders .rgFilterRow td,
div.AddBorders .rgRow td,
div.AddBorders .rgAltRow td,
div.AddBorders .rgEditRow td,
div.AddBorders .rgFooter td
{
    border-style:solid;
    border-color:#aaa;
    border-width:0 0 1px 1px; /*top right bottom left*/
}

[Viktor Tachev]

Hello Dennis,

Note that the pageLoad event will be fired automatically when the page is loaded. If the grid you would like to resize is placed in a popup and bound later you can use another event. You can handle the client-side OnGridCreated event and implement the resizing logic there.

Regards,
Viktor Tachev
Telerik by Progress

[Dennis]

So I added this to the grid:

<ClientSettings>
    <Resizing AllowColumnResize="true" ResizeGridOnColumnResize="true" AllowResizeToFit="true" />
    <ClientEvents OnGridCreated="resizeGrid" />
</ClientSettings>

 

I have my javascript as this:

<script type="text/javascript">
    function resizeGrid(sender) {
        debugger;
        var grid = sender;
        if (grid != null) {
            var master = grid.get_masterTableView();
            if (master != null) {
                var rows = master.get_dataItems();
                if (rows != null) {
                    if (rows.length > 0) {
                        var columns = master.get_columns();
                        for (var i = 0; i < columns.length; i++) {
                            columns[i].resizeToFit(false, true);
                        }
                    }
                }
            }
        }
    }
</script>

 

Attached is what I get from the above versus what I need.

[Viktor Tachev]

Hi Dennis,

Please note that the AjaxControlToolkit and the controls from the UI for ASP.NET AJAX suite are not fully compatible. Check out the following thread that discusses the causes for this in more detail.

• http://www.telerik.com/forums/telerik-ui-for-asp-net-ajax-and-ajax-control-toolkit

With that said, try to remove all components from the AjaxControlToolkit and make sure that you have a ScriptManager or RadScriptManager on the page and see how the behavior changes.


Regards,
Viktor Tachev
Telerik by Progress