asp.net – add style for item in datalist – Education Career Blog

by

I had Datalist and I want to give item style when I click on it to show user the he select this item I did my code but when I selected item It didnot have any style

protected void DataList3_ItemDataBound(object sender, DataListItemEventArgs e)
    {
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)    
            e.Item.Attributes"onmouseover" = "this.style.cursor='hand';this.style.textDecoration='underline';";

        e.Item.Attributes"onmouseout" = "this.style.textDecoration='none';";    
        e.Item.Attributes"onclick" = ClientScript.GetPostBackClientHyperlink(this.DataList3, "Select$" + e.Item.ItemIndex);
    }

,

e.Item.Attributes are not rendered as html, they just don’t show up. Add some kind of Control, a panel for example:

<asp:DataList ID="DataList3" runat="server">
    <ItemTemplate>
        <asp:Panel ID="Panel1" runat="server">
            <%#Container.DataItem%>
        </asp:Panel>
    </ItemTemplate>
</asp:DataList>

And then alter your ItemDataBound event

protected void DataList3_ItemDataBound(object sender, DataListItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {   
        Panel p = (Panel)e.Item.FindControl("Panel1");
        p.Attributes.Add("onmouseover", "this.style.cursor='hand';this.style.textDecoration='underline';");
        p.Attributes.Add("onmouseout", "this.style.textDecoration='none';");    
        // ?? p.Attributes"onclick" = ClientScript.GetPostBackClientHyperlink(this.DataList3, "Select$" + e.Item.ItemIndex);
    }    
}

Or an even better solution for the style part of your question is using css and a classname, add <ItemStyle CssClass="item" /> to your datalist.

css:

.item{cursor:pointer;text-decoration:underline;}
.item:hover{text-decoration:none;}

The “onlick” should be handled by a LinkButton if you ask me, but I don’t exactly understand what you are trying to do with that.

Leave a Comment