Telerik RadListBox / 在悬停和悬停中做一些事情选择 RadListBox 内的项目...(客户端)

发布于 2024-11-07 04:19:55 字数 4929 浏览 0 评论 0原文

我在我的项目中使用RadListBox(asp.net with c# with vs2010)

我也在itemTemplate中使用一些链接按钮...

我想当我们悬停或选择ListBox中的项目时更改这些LinkBut​​tons的颜色! (客户端编程)

我的 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>
                    &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>

我想在悬停和选择项目期间更改 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

夜血缘 2024-11-14 04:19:55

首先,它与客户端编程无关,而是与CSS有关。
当然,您可以使用 jQuery 或其他库来完成此操作,但似乎没有必要,除非您不需要做复杂的事情。

提示
您应该正确使用 Firefox 的 Firebug 扩展 来处理 js、css。

最后,您请求的代码如下所示:

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

第一个用于活动列表项,第二个用于列表内的悬停元素。

干杯!

编辑
下面是回发后工作的代码:

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

下面是对幕后发生的事情的一些小解释:

  1. 我们需要一个隐藏字段来存储 RadListBox 的悬停索引,它只是 html ul 元素。我们将值设置为“-1”表示首次加载不应添加特定的 css 类。
  2. pageLoad 是 javascript 函数,当服务器将数据返回到客户端浏览器时,它总是被调用,例如。通过 Ajax(每次 UpdatePanel 执行)。我们在这里做重要的事情。
  3. 加载新内容后,我们收到最后悬停的 ul 索引(隐藏字段超出 UpdatePanel 范围,因此其内容不会被清除)。
  4. 如果悬停事件之前发生,我们将特定的 css 类添加到使 SelectedIndexChanged 的​​元素。
  5. 现在,对于每个 rlbItem:visible,我们添加了根据列表中悬停元素索引更改隐藏字段值的功能。
  6. 我们最终设置了悬停元素的新值。

这就是魔法的全部:-)

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文