Telerik RadListBox / 在悬停和悬停中做一些事情选择 RadListBox 内的项目...(客户端)
我在我的项目中使用RadListBox(asp.net with c# with vs2010)
我也在itemTemplate中使用一些链接按钮...
我想当我们悬停或选择ListBox中的项目时更改这些LinkButtons的颜色! (客户端编程)
我的 RadListBox 是这样的:
<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>
我想在悬停和选择项目期间更改 lbTitleOfIG 的颜色!
我怎样才能做这份工作?
感谢关注
第一个答案解决了上面的问题 - 谢谢兄弟...
============================= =====
但我在做了一些更改后遇到了一个新问题,如下所示:
<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:如你所见,我将 RadListBox 放入 RadAjaxPanel(它的行为类似于 UpdatePanel)...
change#2:添加 SelectedIndexChanged 事件(服务器端) )与 AutoPostBack="True"...
我有一些代码SelectedIndexChanged 事件在 ajax 模式下运行良好...
但我的新问题是,当我通过单击另一个项目(或单击链接按钮之一,如 lbEditIG 或 lbDeleteIG)来更改所选项目时,并且因此发生回调,我输了我们通过下面的 css 设置的 lbTitleOfIG 颜色:
.rlbActive .rlbTemplate span.lbl_ListBox_IG_Title
{
color:#9EDA29 !important;
}
.rlbTemplate:hover span.lbl_ListBox_IG_Title
{
color:#9EDA29 !important;
}
但所选区域仍然突出显示...
我知道这个颜色的东西并不那么重要,但很多个月前我遇到了类似的问题RadComboBox(在 selectedIndexChanged 回调后失去焦点)
我非常感谢给我一个解决方案,这样我就可以将它用于其他目的...
感谢您阅读本文并在这个线程上投入宝贵的时间
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>
<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>
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
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
首先,它与客户端编程无关,而是与CSS有关。
当然,您可以使用 jQuery 或其他库来完成此操作,但似乎没有必要,除非您不需要做复杂的事情。
提示:
您应该正确使用 Firefox 的 Firebug 扩展 来处理 js、css。
最后,您请求的代码如下所示:
第一个用于活动列表项,第二个用于列表内的悬停元素。
干杯!
编辑
下面是回发后工作的代码:
下面是对幕后发生的事情的一些小解释:
这就是魔法的全部:-)
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:
First is for active list item and second for hover element inside list.
Cheers!
EDIT
Here is the code that works after postback:
Here is small explainations of what is happening behind the scene :
That's all of magic :-)