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

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

Answer 1

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