This is a migrated thread and some comments may be shown as answers.

Stop Footer + CommandItemTemplate scrolling horizontally

11 Answers 115 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jeremy
Top achievements
Rank 1
Jeremy asked on 12 Nov 2010, 06:45 AM
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>

11 Answers, 1 is accepted

Sort by
0
Jeremy
Top achievements
Rank 1
answered on 16 Nov 2010, 04:00 AM
<bump>
0
Jeremy
Top achievements
Rank 1
answered on 17 Nov 2010, 01:19 AM
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
0
Pavlina
Telerik team
answered on 17 Nov 2010, 03:58 PM
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.
0
Jeremy
Top achievements
Rank 1
answered on 18 Nov 2010, 02:39 AM
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
0
Pavlina
Telerik team
answered on 18 Nov 2010, 03:37 PM
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.
0
Jeremy
Top achievements
Rank 1
answered on 19 Nov 2010, 01:39 AM
Sorry Pavlina I don't want to stop the headers scrolling either - just the GridPagerItem and GridCommandItem.
0
Jeremy
Top achievements
Rank 1
answered on 22 Nov 2010, 07:18 AM
So I should submit a feature request? This really isn't possible?
0
Pavlina
Telerik team
answered on 24 Nov 2010, 03:01 PM
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.
0
Jeremy
Top achievements
Rank 1
answered on 25 Nov 2010, 12:53 AM
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.
0
Jeremy
Top achievements
Rank 1
answered on 25 Nov 2010, 01:53 AM
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 :)
0
Pavlina
Telerik team
answered on 25 Nov 2010, 10:31 AM
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.
Tags
Grid
Asked by
Jeremy
Top achievements
Rank 1
Answers by
Jeremy
Top achievements
Rank 1
Pavlina
Telerik team
Share this question
or