ListView OnSelectedIndexChanging event on client side

Can we write OnSelectedIndexChanging event on client side for ListView using Java script, please provide some help.

It depends… What triggers the selectedindexchanged?

On Click it triggers the OnSelectedIndexChanging event

I understand on click, but on click of what?

Hi Anunay,

According to your description, my understanding is that you would like to use
Javascript
to trigger the SelectedChanged event of ListView.

If so, please try using __doPostBackplease(‘’,’’) to trigger the event, and about the parameter of the methond, we can according to your DataPager ID to generate it, please try to refer to the following code:

In the aspx file:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ListViewPage.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ListView ID="ListView1" runat="server" OnPagePropertiesChanging="ListView1_PagePropertiesChanging">
        <LayoutTemplate>
            <ul>
                <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
            </ul>
        </LayoutTemplate>
        <ItemTemplate>
            <li>
                <%# Eval("Name") %> (<%# Eval("Currency") %> <%# Eval("Price") %>)
            </li>
        </ItemTemplate>
        <EmptyDataTemplate>
            No data
        </EmptyDataTemplate>
        </asp:ListView>
<asp:DataPager ID="lvDataPager1" runat="server" PagedControlID="ListView1" PageSize="5">
            <Fields>
                <asp:NumericPagerField ButtonType="Link" />
            </Fields>
        </asp:DataPager>
        <input type="button" onclick="__doPostBack('lvDataPager1$ctl00$ctl00', '');" value="previous" />
        <input type="button" onclick="__doPostBack('lvDataPager1$ctl00$ctl01', '');" value="next" />
        
    </div>
    </form>
</body>
</html>

In the asp.cs file:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace ListViewPage
{
    public partial class WebForm1 : System.Web.UI.Page
    {
       protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindListView();
            }
        }

        void BindListView()
        {
            ListView1.DataSource = SampleData();
            ListView1.DataBind();
        }
        List<Product> SampleData()
        {
            List<Product> p = new List<Product>();
            p.Add(new Product() { Name = "Microsoft Windows 7", Price = 70, Currency = "USD" });
            p.Add(new Product() { Name = "HP ProBook", Price = 320, Currency = "USD" });
            p.Add(new Product() { Name = "Microsoft Office Home", Price = 60, Currency = "USD" });
            p.Add(new Product() { Name = "NOKIA N900", Price = 350, Currency = "USD" });
            p.Add(new Product() { Name = "BlackBerry Storm", Price = 100, Currency = "USD" });
            p.Add(new Product() { Name = "Apple iPhone", Price = 400, Currency = "USD" });
            p.Add(new Product() { Name = "HTC myTouch", Price = 200, Currency = "USD" });
            return p;
        }
        protected void ListView1_PagePropertiesChanging(object sender, PagePropertiesChangingEventArgs e)
        {
            //set current page startindex, max rows and rebind to false
            lvDataPager1.SetPageProperties(e.StartRowIndex, e.MaximumRows, false);

            //rebind List View
            BindListView();
        }
    }
}

In the Product.cs file:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace ListViewPage
{
    public class Product
    {
        public string Name { get; set; }
        public decimal Price { get; set; }
        public string Currency { get; set; }
    }
}

Hope it can help you.

If there is anything unclear, please let me know.

Best Regards,
Terry Guo

Thanks Terry for you helpful reply, however please try to understand my problem below:

I have used ListView to populate List from Database and it should have selection changed event raised after changing the selected list item in the list. Below is the code:

   <asp:ListView ID="GroupList" runat="server" OnSelectedIndexChanging="GroupList_SelectedIndexChanging" ItemType="Group">
            <ItemTemplate>
                <li>
                    <asp:LinkButton runat="server" ID="LinkItem" Text=’<%#Item.Name%>’ CommandName="Select" CommandArgument=’<%#Item.Id%>’></asp:LinkButton>
                </li>
            </ItemTemplate>
            <SelectedItemTemplate>
                <li id="selectedItem">
                    <asp:LinkButton runat="server" ID="LinkItem" Text=’<%#Item.Name%>’ CommandName="Select" CommandArgument=’<%#Item.Id%>’ CssClass="active"></asp:LinkButton>
                </li>
            </SelectedItemTemplate>
        </asp:ListView>
   

Problem is I do not want to use LinkButton to avoid postback on each click for selection changed , could you please tell some other way to populate List other than ListView or LinkButton

and issue with LinkButton it does postback everytime and thus binds the listview everytime it does postback for that resolution i need help.

What is the purpose of selecting an item?  Are you doing any processing on it?

Yes, on the basis of selected item I want to display some other fields in other TextBlock controls.

Leave a Reply