Programmatically Scroll GridView Control

I have an AJAX enabled web form with several data-filled GridView controls. The users accessing this web app will navigate the site via touch-screen monitors (i.e.: no mouse). As a result, I need an easy way for them to scroll the GridViews when the data is not visible. I want them to click on a button, which will then accordingly scroll the grid up or down. I have tried all the various combinations of the suggestions that I could find:

GridView.Rows(20).RowState = DataControlRowState.Selected

and

GridView.Rows(20).Focus()

and

GridView.SelectedIndex = 20

and

'Set focus to a hidden button control (column)
GridView.SelectedRow.Cells(5).Focus()

If I could set focus to a particular row, I think it should scroll to show that row. This would be fine, but nothing seems to work. Anyone have any suggestions on how I could programatically scroll a GridView control?

Thanks!

Hi AxeRose,

Did you find any solution for this problem?

I have asimilar purpose and meantime I don't have no idea, how to do this.

No, I never found a solution. I ended up using Paging instead -- which works fine for my situation.

Good luck!

I do not know if this works (and probably only in IE or in everything but IE ) but there is a javascript function called scrollIntoView that you could try. Just a suggestion.

Seehttp://forums.asp.net/t/1162570.aspx

You can use the JavaScript function: scrollTo(...)

-Damien

<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_beginRequest(beginRequest);

function beginRequest()
{
prm._scrollPosition = null;
}
</script>

http://forums.asp.net/t/1156877.aspx

programmatically shrink (collapse) up accordion pane

Hi there,

new here, please direct if this has been asked before.

Is it possible to programmtically scroll/shrink/collapse up an accordion pane?, I have a gridview with detailsview inside it which is inside an accordion. I want to scroll up the accordion (container for detailsview) once user clicks on 'update', 'insert', 'cancel'.

I've tried the following with little success

Protected Sub dvEventMeetings_ModeChanging(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DetailsViewModeEventArgs) Handles dvEventMeetings.ModeChanging

If e.CancelingEdit = True Then
Me.DrawupAccordion(Me.gvEventMeetings, "accdvEventMeeting")
e.Cancel = True
End If

End Sub

Protected Sub DrawupAccordion(ByVal aControltoDrawUp As Control, ByVal controlID As String)

Dim aControl As Control = Nothing
aControl = me.FindControlIterative(aControltoDrawUp, controlID)

If TypeOf aControl Is AjaxControlToolkit.Accordion Then
CType(aControl, AjaxControlToolkit.Accordion).SelectedIndex = -1
End If

End Sub

Protected Function FindControlIterative(ByVal root As Control, ByVal id As String) As Control

Dim ctl As Control = root
Dim ctls As LinkedList(Of Control) = New LinkedList(Of Control)

Do While (ctl IsNot Nothing)
If ctl.ID = ID Then
Return ctl
End If
For Each child As Control In ctl.Controls
If child.ID = ID Then
Return child
End If
If child.HasControls() Then
ctls.AddLast(child)
End If
Next
ctl = ctls.First.Value
ctls.Remove(ctl)
Loop

Return Nothing

End Function

Thanks!

Hi Roshec,

I think you can toggle the accordion programmatically.

Just a few questions:

do you want the actions to happen clientside/ serverside?

Hi Wim,

Thanks

A1 It doesn't matter, client would be good

A2 'Events' are listed in a gridview, one column is 'Add Meeting', clicking on this will expand a detailsview inside an accordion, once the user clicks on 'update','insert' or cancel I want to collapse the accordion back up.

Hey roshec,

I'm looking into this problem ...

Yet another question:
You say your detailsView is on an accordionPane, but are their any other controls on other panes of the accordion?

Based on what you say in A2, why don't you use a collapsiblePanelExtender and place the detailsView on that?

Kind regards,
Wim

Hi Wim,

Thanks. Will look into collapsiblepanelextender.

The accordion, which contains the detailsview, is inside a templatefield of the gridview. There is only pane in this accordion. Having said that, there is another accordion in the same gridview (different column) that also contain one pane which contains a gridview, this isn't a problem though 'coz it's just a list. It's only the detailsview I want to collapse programmatically.

Below is cut down version on the client aspx

<asp:GridView id="gvEvents" runat="server" DataKeyNames="eventID" DataSourceID="DataInstoEvents" AutoGenerateColumns="False" AllowPaging="True" CssClass="gridview">
<Columns>

<asp:CommandField ShowSelectButton="True" />

<asp:TemplateField HeaderText="Add an Event Meeting">
<ItemStyle Wrap="False"></ItemStyle>
<HeaderStyle Wrap="False"></HeaderStyle>
<ItemTemplate>
<ajaxToolkit:Accordion ID="accdvEventMeeting" runat="server" SelectedIndex="-1"
HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected"
ContentCssClass="accordionContent" FadeTransitions="true" FramesPerSecond="40"
TransitionDuration="250" AutoSize="None" RequireOpenedPane="false" SuppressHeaderPostbacks="true">
<Panes>
<ajaxToolkit:AccordionPane ID="accPaneDvEventMeeting" runat="server">
<Header><a href="http://links.10026.com/?link=" mce_href="" class="subheader2">Add Meeting</a></Header>
<Content>
<asp:DetailsView id="dvEventMeetings" runat="server" cellpadding="5" Font-Size="Small" Font-Names="sans-serif" BackColor="Gainsboro" DefaultMode="Insert" DataKeyNames="eventID" DataSourceID="DataInstoEventMeeting" Width="125px" Height="50px" AutoGenerateRows="False" OnItemInserting="dvEventMeetings_ItemInserting">
<Fields>

<asp:BoundField DataField="subject" SortExpression="subject" HeaderText="Subject">
<ItemStyle Wrap="False"></ItemStyle>
<HeaderStyle Wrap="False"></HeaderStyle>
</asp:BoundField>

<asp:BoundField DataField="location" SortExpression="location" HeaderText="Location">
<ItemStyle Wrap="False"></ItemStyle>
<HeaderStyle Wrap="False"></HeaderStyle>
</asp:BoundField>

<asp:CommandField InsertText="Save and Send Invite" ShowDeleteButton="True" ShowInsertButton="True" ShowEditButton="True" />

</Fields>
</asp:DetailsView>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>

</ItemTemplate>
</asp:TemplateField>

<asp:TemplateField HeaderText="View Meetings for Event">
<ItemStyle Wrap="False"></ItemStyle>
<HeaderStyle Wrap="False"></HeaderStyle>
<ItemTemplate>
<ajaxToolkit:Accordion ID="accgvEventMeetings" runat="server" SelectedIndex="-1"
HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected"
ContentCssClass="accordionContent" FadeTransitions="true" FramesPerSecond="40"
TransitionDuration="250" AutoSize="None" RequireOpenedPane="false" SuppressHeaderPostbacks="true">
<Panes>
<ajaxToolkit:AccordionPane ID="accPaneGvEventMeetings" runat="server">
<Header><a href="http://links.10026.com/?link=" mce_href="" class="subheader2">View Meetings</a></Header>
<Content>
<asp:GridView id="gvEventMeetings" runat="server" DataKeyNames="eventMeetingID" DataSourceID="DataInstoEventMeetings" AutoGenerateColumns="False" AllowPaging="True" CssClass="gridview" PageSize="10">
<Columns>
<asp:BoundField DataField="summary" HeaderText="Summary" SortExpression="summary" HeaderStyle-Wrap="false" ItemStyle-Wrap="true" />
</Columns>
</asp:GridView>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>

</ItemTemplate>
</asp:TemplateField>

<asp:BoundField DataField="organizerName" SortExpression="organizerName" HeaderText="Organizer">
<ItemStyle Wrap="False"></ItemStyle>
<HeaderStyle Wrap="False"></HeaderStyle>
</asp:BoundField>

</Columns>
</asp:GridView>

Hi

Euhm, I would like to add the following:

You can close the accordion by setting the SelectedIndex property to -1

I just can't implement it into your code because IMO the set up of the controls is kinda weird ....

Kind regards,
Wim

Thanks, but that's what I tried doing (see my first post) with my DrawUpAccordion sub. Not to worry anymore, I've figured it out myself.

Providing Scroll Bars to update panel

Hi,
I am using ajax for loading different user controls . I have two main problems
1. I have a main page where i have 4 update panels . the structure is like the the following( i removed the atributes for each elemnet like id , runat etc
<table>
<tr>
<td><updatepanel><contenttemplate><uc1:ststicbar><ontenttemplate></updatepanel><td>
<td><updatepanel><contenttemplate><uc1:dynbar><ontenttemplate></updatepanel><td>
</tr>
<tr>
<td colspan=2><updatepanel><contenttemplate>content here<ontenttemplate></updatepanel></td>
</tr>
<tr>
<td colspan=2><updatepanel><contenttemplate><uc1:statusbar><contenttemplate></updatepanel><td>

</tr>
</table>

where i have two user controls on top
and one at the bottom representing toobars and ststus bar(bottom)
in the middle update panel i am loading different user controls.
my problems are.

1. I need the keep the top toolbars and bottom status bar always visible
ie when i load a user control in the midddle update panel if its height is more there should be a scroll bar
I tried with adiv tag for the content but not worked properly i find update panels emit div tag in the client.
is there any way to provide scrolling for the update panel.ie the div tag which is get emitted for the update panel.

Thanks and Regards
Jereesh

All the Style Tag works also with the table tr and td tag

apply ur style to the Table like

<table id=tbl1 style="OVERFLOW:auto;WIDTH:200px;HEIGHT:230px;">

<tr><td></td></tr>

</table>

It will sork fine iam using it.

any proble get back to me.

Hey,

Just put the update panel for which you wanna have the scrollbars, inside a panel saypanel1.

Set the height and width of the panel and set the scrollbar property of the panel as you like.