Telerik RadlistBox / Fai alcune cose in Hover & Seleziona di un elemento all'interno di RadListBox ... (lato client)
https://stackoverflow.com/questions/5990033
-
13-11-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Sto usando RadListBox nel mio progetto (ASP.NET con C# con VS2010)
Inoltre sto usando alcuni pulsanti di collegamento in itemTemplate ...
Voglio cambiare il colore di questi linkbutton quando litiamo o selezioniamo un elemento nella casella di elenco! (Programmazione lato client)
Il mio RadlistBox è così:
<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>
<asp:LinkButton ID="lbEditOfIG" CssClass="lbEditOfIGclass" runat="server" CausesValidation="False"
CommandName="Edit">Edit</asp:LinkButton>
<asp:LinkButton ID="lbDeleteOfIG" CssClass="lbDeleteOfIGclass" runat="server" CausesValidation="False"
CommandName="Delete">Delete</asp:LinkButton>
</ItemTemplate>
</telerik:RadListBox>
Voglio cambiare il colore di lbtitleofig durante il mouse e selezionare un articolo!
Come posso fare questo lavoro?
grazie per l'attenzione
La domanda superiore risolta dalla prima risposta - grazie fratello ...
================================
Ma ho un nuovo problema dopo aver fatto alcune modifiche come di seguito:
<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>
Modifica n. 1: come vedi metto Radlistbox nel radajaxpanel (si comporta come updatepanel) ...
Modifica n. 2: Aggiungi evento selezionatoIndexChanged (lato server) con autopostback = "true" ...
Ho dei codici in un evento selezionato da Indexhange che funziona bene in modalità Ajax ...
Ma il mio nuovo problema è quando cambio il selectedItem facendo clic su un altro elemento (o faccio clic su uno dei pulsanti di collegamento come Ldeitig o LBDeleteig) e il callback si verifica per questo, perdo il colore lbtitleofig che avevamo impostato dal CSS seguente:
.rlbActive .rlbTemplate span.lbl_ListBox_IG_Title
{
color:#9EDA29 !important;
}
.rlbTemplate:hover span.lbl_ListBox_IG_Title
{
color:#9EDA29 !important;
}
Ma l'area selezionata è ancora evidenziata ...
So che questa roba di colore non è così importante, ma molti mesi fa ho avuto un problema simile a RadCombObox (perde concentrarsi dopo il callback selezionato da IndectExambhange)
Sarei davvero apprezzato per darmi una soluzione, quindi posso usarla per gli altri scopi ...
Grazie per aver letto questo e dedica il tuo prezioso tempo su questo thread
Soluzione
Prima di tutto non ha nulla a che fare con la programmazione lato client ma con CSS. Ovviamente puoi farlo con jQuery o altra biblioteca, ma sembra non essere necessario a meno che tu non debba fare cose sofisticate.
Mancia: Dovresti usare propriamente Firebug Estensione a Firefox per lavorare con JS, CSS.
Finalmente il codice che hai recuperato sembra così:
.rlbActive .rlbTemplate a.lbTitleOfIGclass{color:Red !important;}
.rlbTemplate:hover a.lbTitleOfIGclass{color:Red !important;}
Il primo è per l'elemento elenco attivo e il secondo per l'elemento hover all'interno dell'elenco.
Saluti!
MODIFICAREEcco il codice che funziona dopo il 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>
Ecco piccole spiegazioni di ciò che sta accadendo dietro la scena:
- Dobbiamo avere un campo nascosto per archiviare l'indice hoverd di RadListbox che è semplicemente elemento HTML UL. Impostiamo il valore su "-1" per indicare che il primo carico non dovrebbe aggiungere particolare classe CSS.
- Pageload è la funzione JavaScript che viene sempre chiamata quando il server restituisce i dati al browser client EG. tramite Ajax (ogni esecuzione di aggiornamento). Qui facciamo cose importanti.
- Dopo che quando vengono caricati nuovi contenuti riceviamo infine un indice in bilico di UL (il campo nascosto è al di fuori dell'intervallo di aggiornamento, quindi il suo contenuto non viene cancellato).
- Se si verifica un evento in bilico in precedenza aggiungiamo una particolare classe CSS all'elemento che ha reso selezionato l'indice.
- Ora foreach rlbitem: visibile aggiungiamo funzionalità per modificare il valore del campo nascosto in base all'indice degli elementi hoverd nell'elenco.
- Alla fine abbiamo impostato un nuovo valore dell'elemento livo.
È tutta magia :-)
