locked
How to get and modify the selectedIndex of a listview from Javascript RRS feed

  • Question

  • User-1171858434 posted

    Hello All

    It is several weaks i can not handle a simple question.

    I want to implement horizontal scrollview, by div and listview.

    I have a listview inside a horizontal scrollable div. All of my page controls are inside ajax updatepanel. 

    When i press a bottun i want the selectedindex of listview move to the next  item, and if needed scroll the div, from javascript function.

    I could scroll the div by javascript, but can not get the listview selected index value and can not change it.

    This is the list view and div definition

         <div style="overflow: scroll; width: 900px" id="div_PeaceSmallImage" onscroll="myFunction()">
                                
                                            <asp:ListView ID="lstv_PeaceImages" runat="server" SelectedIndex="0">
                                   

    then pressing this image

      <img alt=">"  id="im_Left" 
                                          onmouseout="this.src='../Icons/leftarrow.png'"
                                            onmouseover="this.src='../Icons/leftarrow_hover.png'" 
                                             onclick= "scrollDivLeft('div_PeaceSmallImage')" src="../Icons/leftarrow.png" />

    and it call the "scrollDivLeft"  javascript function

     <script type="text/javascript">
                                            function scrollDivLeft(id) {
                                                // scroll is working
                                                var elm = document.getElementById(id);
                                                elm.scrollLeft -= 140;
                                                PageMethods.lstv_changeindex();
                                                alert("t1");
                                                var lstvImP = document.getElementById("<%= lstv_PeaceImages.ClientID %>");
                                                alert("t2");
    //index not work
                                               alert(lstvImP.selectedIndex);
                                                alert("t3");
                                                var lstvImP2 = document.getElementById('lstv_PeaceImages');
                                                alert("t4");
                                                var se = lstvImP2.selectedIndex;
                                                alert(se.toString);
                                                // this not work either
                                                
                                            }

    Any help appreciated

    Monday, September 21, 2020 7:25 AM

All replies

  • User-939850651 posted

    Hi hriaz,

    According to your description, I tested the code you provided. If you need to get the current SelectIndex of ListView, you could return the corresponding value at the webMethod called by PageMethods.

    Just like this:

            function scrollDivLeft(id) {
                var elm = document.getElementById(id);
                elm.scrollLeft -= 140;
                PageMethods.lstv_changeindex(function (res) {
                    alert(res);
                });
            }
            [System.Web.Services.WebMethod()]
            public static int lstv_changeindex()
            {
                lstvPI.SelectedIndex = lstvPI.SelectedIndex + 1;
                return lstvPI.SelectedIndex;
            }

    And in the page, the ListView control will be rendered as a tabl element, so it does not have a selectedIndex property, you could press F12 to open the browser console to view the problem description.

    If I misunderstood something, please let me know.

    Best regards,

    Xudong Peng

    Tuesday, September 22, 2020 9:39 AM