locked
How to change listview selected index from JavaScript RRS feed

  • Question

  • User-1171858434 posted

    Hello 

    I appreciate for help.

    Im new in asp.net and no experiance about JavaScript.

    I have a list view inside a div. From java script i want to change selected index and scroll the div which could be able to show the listview selected value if needed. 

    I can scroll by JavaScript but can not change the listview selected index. 

    This is the listview inside the div.

    <div style="overflow: scroll; width: 900px" id="div_PeaceSmallImage" onscroll="myFunction()">
                                            <asp:ListView ID="lstv_PeaceImages" runat="server" ClientIDMode="AutoID">
                                                <AlternatingItemTemplate>
                                                    <td id="tdPeacesAlterTem" runat="server" style="text-align: center; margin-right: 20px;
                                                        margin-left: 20px; padding-right: 30px; padding-left: 30px;">
                                                        <asp:ImageButton ID="imgPeaces" runat="server" Width="76" Height="107" ImageUrl='<%# Eval("ImageUrl") %>' />
                                                        <br />
                                                        <asp:Label ID="lbl_index" runat="server" Text='<%# Eval("Index") %>'></asp:Label>
                                                    </td>
                                                </AlternatingItemTemplate>
                                                <EmptyDataTemplate>
                                                    <table style="">
                                                        <tr>
                                                            <td>
                                                                No data was returned.
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </EmptyDataTemplate>
                                                <ItemTemplate>
                                                    <td id="tdEnsembleTempl" runat="server" style="text-align: center; margin-right: 20px;
                                                        margin-left: 20px; padding-right: 30px; padding-left: 30px;">
                                                        <asp:ImageButton ID="imgPeaces" runat="server" Width="76" Height="107" ImageUrl='<%# Eval("ImageUrl") %>' />
                                                        <br />
                                                        <asp:Label ID="lbl_index" runat="server" Text='<%# Eval("Index") %>'></asp:Label>
                                                    </td>
                                                </ItemTemplate>
                                                <SelectedItemTemplate>
                                                <tr>
                                                    <td>
    
                                                 
                                                    <asp:Image ID="Image1" runat="server" Width="300" Height="350" ImageUrl='<%# Bind("ImageUrl") %>'
                                                        BorderColor="#CC9900" BorderStyle="Outset"/>
                                                    <asp:ImageButton ID="SelimgPeaces" runat="server" Width="300" Height="350" ImageUrl='<%# Eval("ImageUrl") %>'
                                                        BorderColor="#CC9900" BorderStyle="Outset" />
                                                    <br />
                                                    <asp:Label ID="Sellbl_index" runat="server" Text='<%# Eval("Index") %>'></asp:Label>
                                                       </td>
                                                </tr>
                                                </SelectedItemTemplate>
                                                <LayoutTemplate>
                                                    <table id="Table1" runat="server" border="0" style="">
                                                        <tr id="itemPlaceholderContainer" runat="server">
                                                            <td id="itemPlaceholder" runat="server">
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </LayoutTemplate>
                                            </asp:ListView>
                                        </div>

    and this image control must change index and scroll the div

      <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" />

    In which it call this javascript function,

     function scrollDivLeft(id) {
                                                
                                                var elm = document.getElementById(id);
                                                elm.scrollLeft -= 140;
                                                PageMethods.lstv_changeindex();
    
                                           
                                            }

    The scroll is find, later on i will correct it to fitt to visible selected record. but it call lstv_changeindex() serverside function defined bellow, in which the selected index of listview changing, but it not work.

        Public Shared lstvPI As ListView = HttpContext.Current.Items("lstv_PeaceImages")
    
     <System.Web.Services.WebMethod()> _
        Public Shared Sub lstv_changeindex()
         
            lstvPI.SelectedIndex = lstvPI.SelectedIndex + 1
    
    
        End Sub

    I appreciate for your kind help. 

    It took 3 weeks of my tome, but no progress.

    Best regards

    hosein

    Sunday, September 20, 2020 4:40 AM

Answers

  • User1535942433 posted

    Hi hriaz,

    <script type="text/javascript">
                                            function scrollDivLeft(id) {
                                                // id is the div, scroll corectly
                                                var elm = document.getElementById(id);
                                                elm.scrollLeft -= 140;
                                                PageMethods.lstv_changeindex();
                                                alert("t1");
    // sofar work
    // now access the listview
    
                                                var lstvImP = document.getElementById("<%= lstv_PeaceImages.ClientID %>");
                                                alert("t2");
    // now can not access selectedindex
                                               alert(lstvImP.selectedIndex);
                                            }

    Accroding to your codes,I have created a test and press F12 to check your codes.You cann't find listview clientID.

    Howerver,The table in which we used that can be refer to find the controls of that listview and the controls clientID can be find from page prerendered with client Register object.

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 21, 2020 9:24 AM
  • User-1171858434 posted

    Thank you again for help

    Now, i have this javascript

     <script type="text/javascript">
             function scrollDivLeft2(id) {
                 alert("t1");
                 var elm = document.getElementById(id);
                 elm.scrollLeft -= 140;
             }
        </script> 

    and a button

     <asp:Button ID="Button1" runat="server" Text="Button" />
                           , for which when i press it call the code behind

       Protected Sub Button1_Click(sender As Object, e As System.EventArgs) Handles Button1.Click
         lstv_PeaceImages.SelectedIndex = lstv_PeaceImages.SelectedIndex + 1
            lstv_PeaceImages.DataSource = ViewState("dt")
            lstv_PeaceImages.DataBind()
           ScriptManager.RegisterClientScriptBlock(Me.UpdatePanel1, Me.GetType, "scrollDivLeft2", "scrollDivLeft2('div_PeaceSmallImage')", True)
        
        End Sub

    It work, but scroll the div for only one, it scroll forward first time i click the button,  but second time i press buton, index change but not scroll.

    Best appreciation for any help

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 21, 2020 1:20 PM
  • User-1171858434 posted

    I found the problem

    Since the listview data is dynamic, everytime i have to bind the data, it cause loose data also, and scroll position is in fact zero.

    Some how i have to calculate position everytime, or bind data permanently.

    Best appreciation

    hosein

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 21, 2020 1:43 PM

All replies

  • User-1171858434 posted

    In lstv_changeindex (serverside) function the selected index of the listview is changing, but since it called from client side javascript it doesn't display the new selected index of listview. 

    Therefore the question is how to update the listview while the server side function running from client side?

    Note the controls are inside update panel.

    Best appreciation for help

    Sunday, September 20, 2020 12:57 PM
  • User1535942433 posted

    Hi hriaz,

    Accroding your description and codes,as far as I think,you could use ajax to call webthod and return the listview updated.

    More details,you could refer to below article:

    https://www.aspsnippets.com/Articles/Populate-Bind-ListView-using-jQuery-AJAX-in-ASPNet.aspx

    Best regards,

    Yijing Sun

    Monday, September 21, 2020 5:51 AM
  • User-1171858434 posted

    Hi Yiji

    Thank you for reply.

    I never used AJAX and JQUERY, but I will try to understand that. From the link you noticed, i think that is about populating a list view to data. 

    My question is now simpler, how can i access listview selected index from javascript, for example the bellow code not work.

    <script type="text/javascript">
                                            function scrollDivLeft(id) {
                                                // id is the div, scroll corectly
                                                var elm = document.getElementById(id);
                                                elm.scrollLeft -= 140;
                                                PageMethods.lstv_changeindex();
                                                alert("t1");
    // sofar work
    // now access the listview
    
                                                var lstvImP = document.getElementById("<%= lstv_PeaceImages.ClientID %>");
                                                alert("t2");
    // now can not access selectedindex
                                               alert(lstvImP.selectedIndex);
                                            }
                           

    Best appreciation for helping

    Monday, September 21, 2020 7:14 AM
  • User1535942433 posted

    Hi hriaz,

    <script type="text/javascript">
                                            function scrollDivLeft(id) {
                                                // id is the div, scroll corectly
                                                var elm = document.getElementById(id);
                                                elm.scrollLeft -= 140;
                                                PageMethods.lstv_changeindex();
                                                alert("t1");
    // sofar work
    // now access the listview
    
                                                var lstvImP = document.getElementById("<%= lstv_PeaceImages.ClientID %>");
                                                alert("t2");
    // now can not access selectedindex
                                               alert(lstvImP.selectedIndex);
                                            }

    Accroding to your codes,I have created a test and press F12 to check your codes.You cann't find listview clientID.

    Howerver,The table in which we used that can be refer to find the controls of that listview and the controls clientID can be find from page prerendered with client Register object.

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 21, 2020 9:24 AM
  • User-1171858434 posted

    Thank you for reply

    should i register clinet object?

    Unfortunatly i'm not familiar with these concepts.

    This command can not access list view

     var lstvImP2 = document.getElementById('lstv_PeaceImages');

    Monday, September 21, 2020 10:30 AM
  • User-1171858434 posted

    ok

    Now i change direction, trying to change listview index from server side and call div scroll from client side. 

    Using this command in small size project it work, but not in the main page.

    I add this line in a server side function.

     ClientScript.RegisterClientScriptBlock(Me.GetType, "myScript", "scrollDivLeft2('div_PeaceSmallImage');", True)

    and Javascript function:

        function scrollDivLeft2(id) {
            alert("t1");
            var elm = document.getElementById(id);
            elm.scrollLeft -= 140;
        }

    no result yet

    Monday, September 21, 2020 12:32 PM
  • User-1171858434 posted

    Thank you again for help

    Now, i have this javascript

     <script type="text/javascript">
             function scrollDivLeft2(id) {
                 alert("t1");
                 var elm = document.getElementById(id);
                 elm.scrollLeft -= 140;
             }
        </script> 

    and a button

     <asp:Button ID="Button1" runat="server" Text="Button" />
                           , for which when i press it call the code behind

       Protected Sub Button1_Click(sender As Object, e As System.EventArgs) Handles Button1.Click
         lstv_PeaceImages.SelectedIndex = lstv_PeaceImages.SelectedIndex + 1
            lstv_PeaceImages.DataSource = ViewState("dt")
            lstv_PeaceImages.DataBind()
           ScriptManager.RegisterClientScriptBlock(Me.UpdatePanel1, Me.GetType, "scrollDivLeft2", "scrollDivLeft2('div_PeaceSmallImage')", True)
        
        End Sub

    It work, but scroll the div for only one, it scroll forward first time i click the button,  but second time i press buton, index change but not scroll.

    Best appreciation for any help

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 21, 2020 1:20 PM
  • User-1171858434 posted

    I found the problem

    Since the listview data is dynamic, everytime i have to bind the data, it cause loose data also, and scroll position is in fact zero.

    Some how i have to calculate position everytime, or bind data permanently.

    Best appreciation

    hosein

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 21, 2020 1:43 PM