locked
ListView Selected Item Highlighting RRS feed

  • Question

  • User711375321 posted

    Hello All,

    I am trying to highlight an item in a listview right after it is clicked.  I do have highlighting working but unfortunately the highlighting is applied on the last selected item, not the most recent selected item.

    Here is my ASP.NET code:

    <asp:ListView ID="UsersListView" AutoPostBack="true" runat="server" OnSelectedIndexChanging="UsersListView_SelectedIndexChanging" OnSelectedIndexChanged="UsersListView_SelectedIndexChanged" >
    <LayoutTemplate>
    <table id="itemPlaceholderContainer" runat="server" border="0" style="">
    <tr>
    <td id="itemPlaceholder" runat="server">
    </td>
    </tr>
    </table>
    </LayoutTemplate>
    <ItemTemplate>
    <tr runat="server">
    <td>
    <asp:LinkButton ID="UserNameLinkButton" CommandName="Select" runat="server" Text='<%# Container.DataItem %>'/>
    </td>
    </tr>
    </ItemTemplate>
    <SelectedItemTemplate>
    <tr runat="server" style="background-color: #336699;">
    <td>
    <asp:LinkButton ID="UserNameLinkButton" CommandName="Select" runat="server" Text='<%# Container.DataItem %>' ForeColor="White" />
    </td>
    </tr>
    </SelectedItemTemplate>
    </asp:ListView>

    Here is my code-beside:

    protected void UsersListView_SelectedIndexChanging(object sender, ListViewSelectEventArgs e)
    {
    UsersListView.SelectedIndex = e.NewSelectedIndex;
    }

    protected void UsersListView_SelectedIndexChanged(object sender, EventArgs e)
    {
    }

    Thank you for your help!

    Friday, July 20, 2018 10:13 PM

Answers

  • User-1171043462 posted

    You will need to rebind the ListView with data in SelectedIndexChanging event

     protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                BindData();
            }
        }
    
        private void BindData()
        {
            DataTable dt = new DataTable();
            dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Name"), new DataColumn("Country") });
            dt.Rows.Add("John", "USA");
            dt.Rows.Add("Mudassar", "India");
            UsersListView.DataSource = dt;
            UsersListView.DataBind();
        }
    
        protected void UsersListView_SelectedIndexChanging(object sender, ListViewSelectEventArgs e)
        {
            UsersListView.SelectedIndex = e.NewSelectedIndex;
            BindData();  //Most important thing.
        }
    
        protected void UsersListView_SelectedIndexChanged(object sender, EventArgs e)
        {
    
        }
    <asp:ListView ID="UsersListView" AutoPostBack="true" runat="server" OnSelectedIndexChanging="UsersListView_SelectedIndexChanging"
            OnSelectedIndexChanged="UsersListView_SelectedIndexChanged">
            <LayoutTemplate>
                <table id="itemPlaceholderContainer" runat="server" border="0" style="">
                    <tr>
                        <td id="itemPlaceholder" runat="server">
                        </td>
                    </tr>
                </table>
            </LayoutTemplate>
            <ItemTemplate>
                <tr id="Tr1" runat="server">
                    <td>
                        <asp:LinkButton ID="UserNameLinkButton" CommandName="Select" runat="server" Text='<%# Eval("Name") %>' />
                    </td>
                </tr>
            </ItemTemplate>
            <SelectedItemTemplate>
                <tr id="Tr1" runat="server" style = "background:#336699">
                    <td>
                        <asp:LinkButton ID="UserNameLinkButton" CommandName="Select" runat="server" Text='<%#  Eval("Name") %>'
                            ForeColor="White" />
                    </td>
                </tr>
            </SelectedItemTemplate>
        </asp:ListView>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, July 22, 2018 3:46 PM

All replies

  • User409696431 posted

    I can't reproduce your result.   If I use your code and  display some data from my database, clicking on a row results in the style="background-color: #336699;" and ForeColor="White" being applied to that selected row, which is what I would expect.

    Friday, July 20, 2018 11:53 PM
  • User711375321 posted

    Is there some other issue that could cause the ListView selected item to not be refreshed after each click? 

    For me, the highlighting is one click behind the selection event.  So for the first click, nothing in the list is highlighted but the SelectionChanged event fires.  For the second click, the last selected item is highlighted, and so forth. This occurs in both the Chrome browser and Edge browser.

    Thank you.

    Saturday, July 21, 2018 12:14 AM
  • User409696431 posted

    I tested with IE, Edge, Chrome: same results.  They all work as they should.

    Saturday, July 21, 2018 1:45 AM
  • User711375321 posted

    @KathyW

    Just saying that something should work does not make it work.  There must be something different between our two sets of code/settings that is causing mine to not work correctly.

    Can you please show me your asp.net code and C# code beside?  I am building using .NET 5.7.1.  Which version of .NET are you building with?  Can something in the web.config file cause this problem to occur?

    Thank you.

    Saturday, July 21, 2018 1:47 PM
  • User711375321 posted

    @mudassarkhan

    This is the same example I referred to for constructing my code.  Also in the example is someone else who could not get it to work but I don't know if the issue was resolved or not.

    Thank you.

    Saturday, July 21, 2018 1:49 PM
  • User409696431 posted

    I used the exact same code you did, as I said in the first reply, only connecting to my database and picking a field to bind and eval from that database:

    Text='<%#Eval("FirstName") %>' where you have   Text='<%# Container.DataItem %>'

    If I leave it as Container.DataItem, it displays "System.Data.DataRowView " which didn't seem like a real-life scenario.  Regardless, in both cases, the highlighting works as expected.

    I"m using Net 4.6.1.

    Saturday, July 21, 2018 10:56 PM
  • User711375321 posted

    @KathyW

    Can you please do me a favor and try another test using the following Page_Load code instead of using a DB source and see if the highlighting still works for you?

    protected void Page_Load(object sender, EventArgs e)
    {
    if(!Page.IsPostBack)
    {
    List<string> users = new List<string>()
    {
    "Gary",
    "Joe",
    "Brian"
    };
    UsersListView.DataSource = users;
    UsersListView.DataBind();
    }
    }

    I tried creating a new WebForms application in VisualStudio2010 on Windows 7 and the same problem is happening for me.  I can imagine that others have had the same problem but I cannot find the answer.

    Thank you.

    Sunday, July 22, 2018 3:12 PM
  • User-1171043462 posted

    You will need to rebind the ListView with data in SelectedIndexChanging event

     protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                BindData();
            }
        }
    
        private void BindData()
        {
            DataTable dt = new DataTable();
            dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Name"), new DataColumn("Country") });
            dt.Rows.Add("John", "USA");
            dt.Rows.Add("Mudassar", "India");
            UsersListView.DataSource = dt;
            UsersListView.DataBind();
        }
    
        protected void UsersListView_SelectedIndexChanging(object sender, ListViewSelectEventArgs e)
        {
            UsersListView.SelectedIndex = e.NewSelectedIndex;
            BindData();  //Most important thing.
        }
    
        protected void UsersListView_SelectedIndexChanged(object sender, EventArgs e)
        {
    
        }
    <asp:ListView ID="UsersListView" AutoPostBack="true" runat="server" OnSelectedIndexChanging="UsersListView_SelectedIndexChanging"
            OnSelectedIndexChanged="UsersListView_SelectedIndexChanged">
            <LayoutTemplate>
                <table id="itemPlaceholderContainer" runat="server" border="0" style="">
                    <tr>
                        <td id="itemPlaceholder" runat="server">
                        </td>
                    </tr>
                </table>
            </LayoutTemplate>
            <ItemTemplate>
                <tr id="Tr1" runat="server">
                    <td>
                        <asp:LinkButton ID="UserNameLinkButton" CommandName="Select" runat="server" Text='<%# Eval("Name") %>' />
                    </td>
                </tr>
            </ItemTemplate>
            <SelectedItemTemplate>
                <tr id="Tr1" runat="server" style = "background:#336699">
                    <td>
                        <asp:LinkButton ID="UserNameLinkButton" CommandName="Select" runat="server" Text='<%#  Eval("Name") %>'
                            ForeColor="White" />
                    </td>
                </tr>
            </SelectedItemTemplate>
        </asp:ListView>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, July 22, 2018 3:46 PM
  • User711375321 posted

    @mudassarkhan

    Thank you, that solved the problem!  The items in the list are now being highlighted after clicking on them!

    Sunday, July 22, 2018 3:50 PM