Mantener la posición en un Treeview con ASP.Net y ASP.Net Ajax después de un postback
En este post veremos como mantener a la vista la posición actual de un nodo elegido en un treeview después de que este ha sido seleccionado y que por lo tanto se produce un postback.
Lo he traducido en parte (solo el de asp) ycreo que mejorado de un artículo que leí en developer.com
Si no se han dado cuenta, después de elegir un nodo en el treeview y al producirse dicho postback, el treeview vuelve a a posicionarse en el primer nodo superior del mismo, si el elegido no cabe en pantalla, pues ¿que sucedera?, pues que no se verá.
Veremos como solucionarlo tanto con ASP.Net como con ASP.Net Ajax.
Lo lograremos gracias a ejecutar un código javascript cada vez que se realice el postback.
Veamos primero dos imágenes que muestran lo que sucede sin dicho código javascript.
Después de elegir nodo se reposiciona el treeview en su lado superior.
ASP.Net
El código asp.net es bien sencillo, simplemente ponemos el treeview dentro de un panel y en la sección body cargamos el script en cuestión.
Lo he traducido en parte (solo el de asp) y
Si no se han dado cuenta, después de elegir un nodo en el treeview y al producirse dicho postback, el treeview vuelve a a posicionarse en el primer nodo superior del mismo, si el elegido no cabe en pantalla, pues ¿que sucedera?, pues que no se verá.
Veremos como solucionarlo tanto con ASP.Net como con ASP.Net Ajax.
Lo lograremos gracias a ejecutar un código javascript cada vez que se realice el postback.
Veamos primero dos imágenes que muestran lo que sucede sin dicho código javascript.
Después de elegir nodo se reposiciona el treeview en su lado superior.
ASP.Net
El código asp.net es bien sencillo, simplemente ponemos el treeview dentro de un panel y en la sección body cargamos el script en cuestión.
<body onload="CargarScriptLoad()">
<form id="form1" runat="server">
<div>
<asp:Panel ID="Panel1" runat="server">
<asp:TreeView ID="TreeView1" runat="server">
</asp:TreeView>
</asp:Panel>
</div>
</form>
Y en el codebehind.
Esto es todo, quizás lo más complicado de entender es el javascript, realmente lo único que hace es crear una función, que trabaja con el elemento seleccionado del treeview, y mueve el scroll del panel hasta la posición correcta.
ASP.Net Ajax
En ASP.Net Ajax el codebehind es exactamente igual, lo único que cambia es la adición de un scriptmanager, el updatepanel, el contentpanel y el trigger correspondiente.
<body onload="CargarScriptLoad()">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server">
<asp:TreeView ID="TreeView1" runat="server">
</asp:TreeView>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="TreeView1" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
Resultado final. 
Bueno espero haberme explicado.
No hay comentarios:
Publicar un comentario