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.
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
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?
.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.
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);
}
<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
.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.
<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.
Member
14 Points
50 Posts
How to change listview selected index from JavaScript
Sep 20, 2020 04:40 AM|hriaz|LINK
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 SubI appreciate for your kind help.
It took 3 weeks of my tome, but no progress.
Best regards
hosein
Member
14 Points
50 Posts
Re: How to change listview selected index from JavaScript
Sep 20, 2020 12:57 PM|hriaz|LINK
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
Contributor
3730 Points
1417 Posts
Re: How to change listview selected index from JavaScript
Sep 21, 2020 05:51 AM|yij sun|LINK
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
Member
14 Points
50 Posts
Re: How to change listview selected index from JavaScript
Sep 21, 2020 07:14 AM|hriaz|LINK
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
Contributor
3730 Points
1417 Posts
Re: How to change listview selected index from JavaScript
Sep 21, 2020 09:24 AM|yij sun|LINK
Hi hriaz,
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
Member
14 Points
50 Posts
Re: How to change listview selected index from JavaScript
Sep 21, 2020 10:30 AM|hriaz|LINK
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');
Member
14 Points
50 Posts
Re: How to change listview selected index from JavaScript
Sep 21, 2020 12:32 PM|hriaz|LINK
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
Member
14 Points
50 Posts
Re: How to change listview selected index from JavaScript
Sep 21, 2020 01:20 PM|hriaz|LINK
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 SubIt 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
Member
14 Points
50 Posts
Re: How to change listview selected index from JavaScript
Sep 21, 2020 01:43 PM|hriaz|LINK
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