Telerik RadlistBox / Faire des trucs dans Hover et sélectionnez un élément à l'intérieur de Radlistbox… (côté client)

Question

J'utilise RadlistBox dans mon projet (ASP.NET avec C # avec VS2010)

J'utilise également des boutons de liaison dans itemTemplate ...

Je souhaite modifier la couleur de ces linkbuttons lorsque nous planons ou sélectionnons un élément dans Listbox! (Programmation côté client)

Mon radlistbox est comme ceci:

            <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>

Je veux changer la couleur de lbtitleofig pendant le survol et sélectionner un élément!

Comment puis-je faire ce travail?

Merci pour l'attention

La question supérieure résolue par la première réponse - merci bro ...

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

Mais j'ai un nouveau problème après avoir fait quelques changements comme ci-dessous:

<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>

Changement # 1: Comme vous le voyez, je mets RadlistBox dans le RadajaxPanel (il agit comme UpdatePanel) ...

Modifier # 2: Ajouter l'événement sélectionné enChanged (côté serveur) avec autoPostback = "true" ...

J'ai quelques codes dans l'événement sélectionné en indication utile qui fonctionne bien en mode Ajax ...

Mais mon nouveau problème est lorsque je modifie le SELECTENITEM en cliquant sur un autre élément (ou cliquez sur l'un des boutons de liaison tels que Lbedittig ou LBDeleteig) et que le rappel se produit à cause de cela, je perds la couleur lbtitleofig que nous avions définie par le CSS ci-dessous:

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

Mais la zone sélectionnée est toujours mise en évidence ...

Je sais que ce truc de couleur n'est pas si important, mais il y a plusieurs mois, j'ai eu un problème similaire sur RadcomboBox (perd une concentration après un rappel sélectionné)

Je serais vraiment apprécié de me donner une solution, donc je peux l'utiliser à d'autres fins ...

Merci d'avoir lu ceci et de mettre votre temps précieux sur ce fil

Answer 1

Tout d'abord, cela n'a rien à voir avec la programmation côté client mais avec CSS. Bien sûr, vous pouvez le faire avec jQuery ou une autre bibliothèque, mais cela semble inutile à moins que vous n'ayez à faire des choses sophistiquées.

Pointe: Vous devriez utiliser de manière proches Extension Firebug à Firefox Pour travailler avec JS, CSS.

Enfin, le code que vous avez rendu semble être comme ça:

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

Le premier est destiné à l'élément de liste active et deuxième pour l'élément Hover à l'intérieur de la liste.

Acclamations!

ÉDITERVoici le code qui fonctionne après le post-dos:

(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>

Voici de petites explications de ce qui se passe derrière la scène:

1. Nous devons avoir un champ caché Pour stocker l'indexation de Radlistbox qui est simplement un élément HTML UL. Nous définissons la valeur sur "-1" pour indiquer que la première charge ne doit pas ajouter une classe CSS particulière.
2. pageload est la fonction JavaScript qui est toujours appelée lorsque le serveur renvoie des données au navigateur client, par exemple. via ajax (chaque exécution de mise à jour). Ici, nous faisons des choses importantes.
3. Après quand un nouveau contenu est chargé, nous recevons enfin un indexation sur plané d'UL (le champ Hidden est en dehors de la plage de mise à jour de mise à jour, donc son contenu n'est pas effacé).
4. Si un événement sur plané se produit précédemment, nous ajoutons une classe CSS particulière à l'élément qui a fait sélectionner Indexchanged.
5. Maintenant, ForEach RlBitem: Visible, nous ajoutons des fonctionnalités pour modifier la valeur de champ cachée en fonction de l'indice d'élément plané dans la liste.
6. Nous définissons enfin une nouvelle valeur de l'élément plané.

C'est tout de magie :-)