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?
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
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
<edit> Not a static footer - a static pager and static commandbar
0
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::
More information about accessing cells and rows is available here.
Give it a try and see if it helps.
Greetings,
Pavlina
the Telerik team
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
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
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
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
Hello Jeremy,
To stop the CommandItem and PagerItem from scrolling you should set UseStaticHeaders property to true as shown below:
ASPX:
Regards,
Pavlina
the Telerik team
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:
I am overriding the rgWrap class to position the pager items relative to the visible part of the grid rather than the whole grid:
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 :)
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
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
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.