Datalist scrollbar PostBack

**patrickvier** · 24/05/2017, 02h30

Bonjur à tous,
Je suppose que ce genre de problème a déjà été rencontré et résolu.
J'ai un datalist, une bar de scroll à gauche, comme vous l'imaginez, suite à la sélection d'un item en bas de la liste, le postback fait remonter la scrollbar en haut. Une vraie loose.
Voila le script trouvé en javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
    window.onload = function () {
        var div = document.getElementById("dvScroll");
        var div_position = document.getElementById("div_position");
        var position = parseInt('<%=Request.Form("div_position") %>');
   if (isNaN(position)) {
       position = 0;
   }
   div.scrollTop = position;
   div.onscroll = function () {
       div_position.value = div.scrollTop;
   };
};
</script>

Ce script est suivie de mon code asp :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
        <div id="dvScroll" style="overflow-x:hidden;overflow-y:scroll; height:500px">
            <asp:DataList ID="dl_Departements" runat="server" CssClass="DlRowsMain">
                <AlternatingItemStyle CssClass="DlAlternate" />
                <SeparatorStyle CssClass="DlSeparator" />
                <ItemTemplate>
                    <asp:Panel ID="TagItemSelected" runat="server" Width="100%" Height="30px">
                        <asp:ImageButton ID="Logo" CssClass="LogosX" runat="server" ImageUrl="~/Imgs_Data/Logo_Depts.jpg" CommandName="Select" />
                    </asp:Panel>
                </ItemTemplate>
                <SeparatorTemplate></SeparatorTemplate>
            </asp:DataList>
        </div>
        <input type="hidden" id="div_position" name="div_position" />
    </div>

Là ça marche pour ce datalist, mais j'en ai 4, et comme mes connaissances en javascript sont limitées, je me demande si vous ne pourriez pas me donner un coups de main.

Ce qui me faciliterai les choses serait de pouvoir stocker dans la page de code behind, la position du scrollbar pour chaque datalist, puis la ré-injecter apres chaque postback dans chaque datalist... mais là, je ne sais pas si c'est possible. A moins qu'il y ait une autre solution.

Merci pour votre aide

Patrick.

**Dokho1000** · 24/05/2017, 12h04

Fais un appel asynchrone en javascript. De cette manière ta page ne sera pas réinitialisé à chaque fois...normalement avec un updatepanel ca devrait fonctionner...

**patrickvier** · 25/05/2017, 09h52

Je regarde comment je peux faire ça avec UpdatePanel.
Merci Dokho1000
Patrick

**patrickvier** · 30/05/2017, 09h47

Bonjour à tous,
Ci-dessous la solution (assez simple) que j'ai pu trouver :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<body onload="javascript:document.getElementById('Scroll1').scrollTop = document.getElementById('scr1').value;
    javascript:document.getElementById('Scroll2').scrollTop = document.getElementById('scr2').value;">
 
    <form id="form1" runat="server">
 
        <input type="hidden" id="scr1" runat="server" />
        <div id="Scroll1" runat="server" style="overflow-x: hidden; overflow-y: scroll; height: 700px"
            onscroll="javascript:document.getElementById('scr1').value = this.scrollTop">
 
            <asp:DataList ID="dl_1" runat="server">
                <ItemTemplate>
                </ItemTemplate>
                <SeparatorTemplate></SeparatorTemplate>
            </asp:DataList>
        </div>
 
        <input type="hidden" id="scr2" runat="server" />
        <div id="Scroll2" runat="server" style="overflow-x: hidden; overflow-y: scroll; height: 300px"
            onscroll="javascript:document.getElementById('scr2').value = this.scrollTop">
 
            <asp:DataList ID="dl_Focus" runat="server">
                <ItemTemplate>
                </ItemTemplate>
                <SeparatorTemplate></SeparatorTemplate>
            </asp:DataList>
        </div>
 
    </form>
</body>

Il est nécessaire de mettre les lignes dans le body, et chaque div (scroll...) font référence au script du body.
Ca fonctionne, mais j trouve dommage qu'il n'y ait pas dans ASP.net, un simple commutateur (true/false) pour garder le scroll à sa position après le postback.
Bonne journée
Patrick

**Dokho1000** · 30/05/2017, 10h20

Envoyé par patrickvier

Bonjour à tous,
Ci-dessous la solution (assez simple) que j'ai pu trouver :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<body onload="javascript:document.getElementById('Scroll1').scrollTop = document.getElementById('scr1').value;
    javascript:document.getElementById('Scroll2').scrollTop = document.getElementById('scr2').value;">
 
    <form id="form1" runat="server">
 
        <input type="hidden" id="scr1" runat="server" />
        <div id="Scroll1" runat="server" style="overflow-x: hidden; overflow-y: scroll; height: 700px"
            onscroll="javascript:document.getElementById('scr1').value = this.scrollTop">
 
            <asp:DataList ID="dl_1" runat="server">
                <ItemTemplate>
                </ItemTemplate>
                <SeparatorTemplate></SeparatorTemplate>
            </asp:DataList>
        </div>
 
        <input type="hidden" id="scr2" runat="server" />
        <div id="Scroll2" runat="server" style="overflow-x: hidden; overflow-y: scroll; height: 300px"
            onscroll="javascript:document.getElementById('scr2').value = this.scrollTop">
 
            <asp:DataList ID="dl_Focus" runat="server">
                <ItemTemplate>
                </ItemTemplate>
                <SeparatorTemplate></SeparatorTemplate>
            </asp:DataList>
        </div>
 
    </form>
</body>

Il est nécessaire de mettre les lignes dans le body, et chaque div (scroll...) font référence au script du body.
Ca fonctionne, mais j trouve dommage qu'il n'y ait pas dans ASP.net, un simple commutateur (true/false) pour garder le scroll à sa position après le postback.
Bonne journée
Patrick

Ca n'existe pas pcq c'est un problème client et non serveur...je pense aussi que le soucis vient principalement de ta facon de construire ta page. Tu pourrais aussi mettre des ancre sur chaque item de ta liste et au postback executé un un bete js qui te replace au bon endroit...

**patrickvier** · 31/05/2017, 09h29

Bonjour Dokho1000

En effet, placer une ancre sur chaque item de mes datalists.
Ma page est composée de 3 div (100% de la largeur) et empilées sur la hauteur.
des dtl sont en InlineBlock (donc en ligne

dans chacune des divs.
Le but est d'avoir cela sur 1 page à l’écran sans faire de scroll de la page.
Certains des datalists peut comporter plus de 500 items.
Je ne connais pas encore bien la façon de faire pour du code html (asp) ni javascript, donc effectivement, je fais surement quelque erreurs.
As-tu un exemple simple de ces ancres dans les items ?
Merci
Patrick

Datalist scrollbar PostBack [Débutant]

ASP.NET

Vue hybride

Discussions similaires

Partager

Partager