Grid columns resizeToFit - bound after pageLoad in ModalPopupExtender

4 posts, 0 answers
  1. Dennis
    Dennis avatar
    7 posts
    Member since:
    Dec 2014

    Posted 18 Jan 2017 Link to this post

    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*/
    }
  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2377 posts

    Posted 23 Jan 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Dennis
    Dennis avatar
    7 posts
    Member since:
    Dec 2014

    Posted 23 Jan 2017 Link to this post

    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.

  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2377 posts

    Posted 26 Jan 2017 Link to this post

    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.


    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top