about 11 years ago
The blog is related to move the position of scroll according to the selected item using javascript:- Consider the following example:- Let's say you have a gridview control and a dropdown above that. If you select any item from dropdown the gridview should move the scroll position according to selected item and display the item inside the div.
Here i am writing down the snapshot of code:-
- <asp:dropdownlist id="drpPanels" runat="server" datasourceid="PanelsDataSource" datatextfield="SubCategoryName" datavaluefield="PanelID" onchange="MoveScrollPosition(this);">
- </asp:dropdownlist>
- <div id="outerholder" style="float: left">
- <asp:gridview id="Gridview1" runat="server">
- </asp:gridview>
- </div>
- <script type="text/javascript">
- function MoveScrollPosition(object) { //object here is object of dropdownlist
- var container = document.getElementById("outerholder");
- var Cpanel;
- if (object.selectedIndex < 10) {
- Cpanel = document.getElementById("ctl00_ContentPlaceHolder1_lstPanels_ctl0" + object.selectedIndex + "_pnlMain");
- }
- else {
- Cpanel = document.getElementById("ctl00_ContentPlaceHolder1_lstPanels_ctl" + object.selectedIndex + "_pnlMain");
- }
- //alert(Cpanel.offsetTop * object.selectedIndex);
- container.scrollTop = Cpanel.offsetTop ;
- //Object.scrollIntoView(false);
- }
- </script>
<asp:dropdownlist id="drpPanels" runat="server" datasourceid="PanelsDataSource" datatextfield="SubCategoryName" datavaluefield="PanelID" onchange="MoveScrollPosition(this);">
</asp:dropdownlist>
<div id="outerholder" style="float: left">
<asp:gridview id="Gridview1" runat="server">
</asp:gridview>
</div>
<script type="text/javascript">
function MoveScrollPosition(object) { //object here is object of dropdownlist
var container = document.getElementById("outerholder");
var Cpanel;
if (object.selectedIndex < 10) {
Cpanel = document.getElementById("ctl00_ContentPlaceHolder1_lstPanels_ctl0" + object.selectedIndex + "_pnlMain");
}
else {
Cpanel = document.getElementById("ctl00_ContentPlaceHolder1_lstPanels_ctl" + object.selectedIndex + "_pnlMain");
}
//alert(Cpanel.offsetTop * object.selectedIndex);
container.scrollTop = Cpanel.offsetTop ;
//Object.scrollIntoView(false);
}
</script>
0 Comment(s)