Telerik RadListBox / Do Some Stuff In Hover & Select Of An Item Inside RadListBox …(Client Side)

Question

i am using RadListBox in my Project (asp.net with c# with vs2010)

also i am using some link buttons in itemTemplate...

i want to change the color of these LinkButtons when we hover or select an item in ListBox! (Client Side Programming)

my RadListBox Is Like This :

            <telerik:RadListBox ID="RadlbOfImageGroup" runat="server" DataKeyField="ID" DataSortField="Title"
                DataSourceID="sdsImagesGroup" DataTextField="Title" DataValueField="ID" Skin="BlackByMe"
                EnableEmbeddedSkins="False" EmptyMessage="No Records!">
                <ButtonSettings TransferButtons="All" />
                    <HeaderTemplate> <div id="Header_RadlbOfImageGroup"><h5>Header Area</h5></div>
</HeaderTemplate>

                <ItemTemplate>
                    <asp:LinkButton ID="lbTitleOfIG" CssClass="lbTitleOfIGclass" runat="server" CausesValidation="False"><%# Eval("Title") %></asp:LinkButton>
                    <asp:Label ID="lblTitleOfIG" CssClass="lblTitleOfIGclass" runat="server" Text='<%# Eval("Title") %>'></asp:Label>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <asp:LinkButton ID="lbEditOfIG" CssClass="lbEditOfIGclass" runat="server" CausesValidation="False"
                        CommandName="Edit">Edit</asp:LinkButton>
                    &nbsp;&nbsp;
                    <asp:LinkButton ID="lbDeleteOfIG" CssClass="lbDeleteOfIGclass" runat="server" CausesValidation="False"
                        CommandName="Delete">Delete</asp:LinkButton>
                </ItemTemplate>
            </telerik:RadListBox>

i want to change the color of lbTitleOfIG during hover and select of an item !

how can i do this job?

thanks for attention

The Upper Question Solved By First Answer - Thanks bro...

================================

but i have A New problem after doing some changes as below :

<telerik:RadAjaxPanel ID="RadAjaxPanelInrpvImageGroup" runat="server" Height="290px" Width="400px">

<telerik:RadListBox ID="RadlbOfImageGroup" runat="server" DataKeyField="ID" DataSortField="Title"
                                    DataSourceID="sdsImagesGroup" DataTextField="Title" DataValueField="ID" Skin="BlackByMe"
                                    EnableEmbeddedSkins="False" Width="260px" Height="365px" 
                                    EmptyMessage="no records!" AutoPostBack="True" 
                                    onselectedindexchanged="RadlbOfImageGroup_SelectedIndexChanged">
                                    <ItemTemplate>
                                        <table style="width: 100%;">
                                            <tr style="width: 100%;">
                                                <td style="width: 64%;">
                                                    <asp:Label ID="lblTitleOfIG" runat="server" CssClass="lbl_ListBox_IG_Title" Text='<%# Eval("Title") %>'></asp:Label>
                                                </td>
                                                <td style="width: 18%; text-align: center;">
                                                    <asp:LinkButton ID="lbEditIG" runat="server" CausesValidation="False" CommandName="Edit"
                                                        CssClass="lb_ListBox_IG" OnClick="lbEditIG_Click">Edit</asp:LinkButton>
                                                </td>
                                                <td style="width: 18%; text-align: center;">
                                                    <asp:LinkButton ID="lbDeleteIG" runat="server" CausesValidation="False" CommandName="Delete"
                                                        CssClass="lb_ListBox_IG" OnClick="lbDeleteIG_Click">Delete</asp:LinkButton>
                                                </td>
                                            </tr>
                                        </table>
                                    </ItemTemplate>
                                </telerik:RadListBox>
                    </telerik:RadListBox>
</telerik:RadAjaxPanel>

change#1 : as you see i put RadListBox Into The RadAjaxPanel(it Acts Like UpdatePanel)...

change#2 : Add SelectedIndexChanged event (server side) with AutoPostBack="True"...

i have some codes in SelectedIndexChanged event that works nicely in ajax mode...

but my new problem is when i change the selecteditem by click on another item (or click on one of the Link Buttons such as lbEditIG or lbDeleteIG) and callback occurs because of that , i lose lbTitleOfIG color that we had set by the below css :

.rlbActive .rlbTemplate span.lbl_ListBox_IG_Title
{
    color:#9EDA29 !important;
    }
.rlbTemplate:hover span.lbl_ListBox_IG_Title
{
    color:#9EDA29 !important;
    }

but the selected area is still highlighted...

i know this color stuff is not so important , but many months ago i had a similiar problem about RadComboBox (loses focus after selectedIndexChanged CallBack)

i would be really appreciate for give me a solution , so i can use it for the other purposes...

thanks for reading this and put ur valuable time on this thread

Answer 1

First of all It has nothing to do with client side programming but with CSS. Of course you can do it with jQuery or other library but it seems to be unnecessary unless you don't have to do sophisticated stuff.

Tip: You should use propably Firebug extension to Firefox to work with js, css.

Finally the code you reqested seems like that:

.rlbActive .rlbTemplate a.lbTitleOfIGclass{color:Red !important;}
.rlbTemplate:hover a.lbTitleOfIGclass{color:Red !important;}

First is for active list item and second for hover element inside list.

Cheers!

EDIT Here is the code that works after postback:

(1)<asp:HiddenField runat="server" ID="HoveredIndex"  Value="-1" />
    <telerik:RadAjaxPanel ID="RadAjaxPanelInrpvImageGroup" runat="server" Height="290px"
        Width="400px">
        <telerik:RadListBox ID="RadlbOfImageGroup" runat="server" DataKeyField="ID" DataSortField="Title"
            DataTextField="Title" DataValueField="ID" Skin="BlackByMe"
            EnableEmbeddedSkins="False" Width="260px" Height="365px" EmptyMessage="no records!"
            AutoPostBack="True" OnSelectedIndexChanged="RadlbOfImageGroup_SelectedIndexChanged">
            <ItemTemplate>
                <table style="width: 100%;">
                    <tr style="width: 100%;">
                        <td style="width: 64%;">
                            <asp:Label ID="lblTitleOfIG" runat="server" CssClass="lbl_ListBox_IG_Title" Text='<%# Eval("Title") %>'></asp:Label>
                        </td>
                        <td style="width: 18%; text-align: center;">
                            <asp:LinkButton ID="lbEditIG" runat="server" CausesValidation="False" CommandName="Edit"
                                CssClass="lb_ListBox_IG">Edit</asp:LinkButton>
                        </td>
                        <td style="width: 18%; text-align: center;">
                            <asp:LinkButton ID="lbDeleteIG" runat="server" CausesValidation="False" CommandName="Delete"
                                CssClass="lb_ListBox_IG" >Delete</asp:LinkButton>
                        </td>
                    </tr>
                </table>
            </ItemTemplate>
        </telerik:RadListBox>
        <script type="text/javascript">
            function pageLoad()(2)
            {
                var indexbefore = $('input:hidden[id*="HoveredIndex"]').val();(3)
                if (indexbefore != -1)(4)
                    $('.rlbItem').eq(indexbefore).addClass('rlbActive .rlbTemplate span.lbl_ListBox_IG_Title');

                $('.rlbItem:visible').each(function (index)(5)
                {
                    $(this).hover(function ()
                    {
                        $("#result").html("Index is: " + index);
                        $('input:hidden[id*="HoveredIndex"]').val(index);(6)
                    });
                });
            }
        </script>

    </telerik:RadAjaxPanel><div id="result"></div>

Here is small explainations of what is happening behind the scene :

1. We need to have a hidden field to store hovered index of RadListBox which is simply html ul element. We set value to "-1" for indicate that first load should not add particular css class.
2. pageLoad is javascript function which is always called when server return data to client browser eg. via Ajax (each UpdatePanel execution). Here we do important stuff.
3. After when new content is loaded we receive lastly hovered index of ul (hidden field is outside UpdatePanel range so it's content is not cleared).
4. If hovered event happen previously we add particular css class to element which made SelectedIndexChanged.
5. Now foreach rlbItem:visible we add functionality to change hidden field value according to hovered element index in the list.
6. We finally set new value of hovered element.

That's all of magic :-)