Stop Footer + CommandItemTemplate scrolling horizontally

12 posts, 0 answers
  1. Jeremy
    Jeremy avatar
    96 posts
    Member since:
    Mar 2010

    Posted 12 Nov 2010 Link to this post

    Hi

    I am using a RadGrid with many colums that is wider than the screen. So, in the ClientSettings markup I have set <Scrolling AllowScroll="true" />. But this means that I have to scroll all the way to the right to see my "150 items in 15 pages" label on the footer, along with my right-aligned commanditems. I have fixed the Commanditems appearance by using jQuery to resize the "tblcommand" table, but struggling with the footer. It all seems a bit hacky - is there a better way?

    <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false"
            OnNeedDataSource="RadGrid1_NeedDataSource" AllowSorting="True"
            AllowFilteringByColumn="True" AllowPaging="True">
        <MasterTableView CommandItemDisplay="Bottom">
            <Columns>
            .
            .
            .
            <Columns>
            <CommandItemTemplate>
                <table id="tblCommand"><tr><td>
                    <div style="height: 30px; line-height: 30px; position: relative; float: left; padding-left: 5px;">
                        <asp:LinkButton ID="lnkInsert" runat="server" CommandName="InitInsert"><img style="border:0px" alt="" src="/App_Images/Add.png" />  Add new record</asp:LinkButton>
                    </div>  
                    <div style="height: 30px; line-height: 30px; position: relative; float: left; padding-left: 15px;">
                        <asp:LinkButton ID="lnkDelete" runat="server" CommandName="Delete"><img style="border:0px" alt="" src="/App_Images/Delete.png" />  Delete record(s)</asp:LinkButton>
                    </div>
                    </td><td>
                    <div style="height: 30px; text-align: right; position: relative; float: right;">
                        <asp:Image ID="imgCancelChanges" runat="server" ImageUrl="/App_Images/cancel.gif"
                            AlternateText="Cancel changes" ToolTip="Cancel changes" Height="24px" Style="cursor: pointer;
                            margin: 2px 5px 0px 0px;" onclick="CancelChanges();" />
                        <asp:Image ID="imgProcessChanges" runat="server" ImageUrl="/App_Images/ok.gif"
                            AlternateText="Process changes" ToolTip="Process changes" Height="24px" Style="cursor: pointer;
                            margin: 2px 5px 0px 0px;" onclick="ProcessChanges();" />
                    </div>
                    </td></tr>
                </table>
            </CommandItemTemplate>
            <PagerStyle AlwaysVisible="true" />
        </MasterTableView>
        <ClientSettings>
            <ClientEvents OnGridCreated="GridCreated" />
            <Scrolling AllowScroll="true" />
        </ClientSettings>
    </telerik:RadGrid>
     
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            jQuery(document).ready(function ($) {       
             $('#tblCommand').width(cphContent_ctl00$cphContent$RadGrid1Panel.offsetWidth);
            });
     
            function GridCreated(sender, args) {
                var scrollArea = sender.GridDataDiv;
                var dataHeight = sender.get_masterTableView().get_element().clientHeight;
                if (dataHeight < 350) {
                    scrollArea.style.height = dataHeight + 18 + "px";
                }
            }
        </script>
    </telerik:RadCodeBlock>
  2. Jeremy
    Jeremy avatar
    96 posts
    Member since:
    Mar 2010

    Posted 15 Nov 2010 Link to this post

    <bump>
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jeremy
    Jeremy avatar
    96 posts
    Member since:
    Mar 2010

    Posted 16 Nov 2010 Link to this post

    I guess another way of putting it is that I need to know how to get a static footer.
    <edit> Not a static footer - a static pager and static commandbar
  5. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 17 Nov 2010 Link to this post

    Hi Jeremy,

    You can access the GridFooterItem in ItemCreated event and use the column UniqueName property to identify the cell of interest as shown below::
    GridFooterItem footerItem = RadGrid1.MasterTableView.GetItems(GridItemType.Footer)[0] as GridFooterItem;
    //fetch the data with footerItem["ColumnUniqueName"].Text

    More information about accessing cells and rows is available here.

    Give it a try and see if it helps.

    Greetings,
    Pavlina
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  6. Jeremy
    Jeremy avatar
    96 posts
    Member since:
    Mar 2010

    Posted 17 Nov 2010 Link to this post

    Hi

    Sorry I haven't explained myself very well! I don't want to access any columns in the footer. I just had another look at the documentation to find the correct terms. I don't want the GridPagerItem and GridCommandItem to scroll horizontally with the rest of the grid. UseStaticHeaders stops them from scrolling vertically, but I want to stop them scrolling horizontally. The only way I can see to do it is by resizing them with javascript to the width of the visible part of the grid rather than the scrollwidth?

    Cheers,
    Jeremy
  7. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 18 Nov 2010 Link to this post

    Hi Jeremy,

    I'm afraid there's no easy way to achieve the desired functionality. Note that If you stop the column headers from scrolling horizontally, the columns data and header will not mach.

    All the best,
    Pavlina
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  8. Jeremy
    Jeremy avatar
    96 posts
    Member since:
    Mar 2010

    Posted 18 Nov 2010 Link to this post

    Sorry Pavlina I don't want to stop the headers scrolling either - just the GridPagerItem and GridCommandItem.
  9. Jeremy
    Jeremy avatar
    96 posts
    Member since:
    Mar 2010

    Posted 22 Nov 2010 Link to this post

    So I should submit a feature request? This really isn't possible?
  10. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 24 Nov 2010 Link to this post

    Hello Jeremy,

    To stop the CommandItem and PagerItem from scrolling you should set UseStaticHeaders property to true as shown below:
    ASPX:
    <ClientSettings>
       <Scrolling AllowScroll="true" UseStaticHeaders="true" />
    </ClientSettings>

    Regards,
    Pavlina
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  11. Jeremy
    Jeremy avatar
    96 posts
    Member since:
    Mar 2010

    Posted 24 Nov 2010 Link to this post

    Hi Pavlina that does not work at all. That setting just makes all the columns really skinny and removes scrolling (pic attached). According to the demo description that setting is for scrolling vertically? I want horizontal scrolling ONLY.
  12. Jeremy
    Jeremy avatar
    96 posts
    Member since:
    Mar 2010

    Posted 24 Nov 2010 Link to this post

    So in conclusion I am assuming this is not provided out of the box.

    Here is my eventual solution improved from the 1st post:
    resizing the commandbar and pager in the javascript GridCreated event:
    function GridCreated(sender, args) {
        //resize commandbars (top and bottom) so they don't scroll with data
        $("*[id='tblCommand']").css('width', scrollArea.offsetWidth);
        //resize pager same as commandbar
        $("*[class='rgPager']")[0].getElementsByTagName('table')[0].style.width = scrollArea.offsetWidth;
    }

    I am overriding the rgWrap class to position the pager items relative to the visible part of the grid rather than the whole grid:
    <style type="text/css">
        .rgWrap { position: relative; }
    </style>

    and the commandbar is pretty much as before. The important part is that all the command buttons are inside divs that float.

    Hope someone else finds this useful and saves a week of frustration for them.

    And if someone from Telerik can change the word "footer" to "pager" in the post title that would be great :)
  13. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 25 Nov 2010 Link to this post

    Hello Jeremy,

    If you are using scrolling with static headers, the master table's layout is "auto" and there are no column widths specified, then the columns will shrink to fill the minimum required space - this is expected.

    In order to avoid this, please either set column widths (through their HeaderStyle -> Width property), or set TableLayout="Fixed" for the MasterTableView.

    I hope this helps.

    Greetings,
    Pavlina
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017