How to get and modify the selectedIndex of a listview from Javascript RSS

• • Reply
  hriaz

  Member

  14 Points

  50 Posts

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

  Sep 21, 2020 07:25 AM|hriaz|LINK

  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

• • Reply
  XuDong Peng

  Contributor

  2350 Points

  742 Posts

  Re: How to get and modify the selectedIndex of a listview from Javascript

  Sep 22, 2020 09:39 AM|XuDong Peng|LINK

  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

  ASP.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today. Learn more >