Telerik RadListBox / Делать некоторые вещи при наведении курсора и выбирать элементы внутри RadListBox ... (на стороне клиента) - PullRequest
Новая
       25

Telerik RadListBox / Делать некоторые вещи при наведении курсора и выбирать элементы внутри RadListBox ... (на стороне клиента)

0 голосов
/ 13 мая 2011

Я использую RadListBox в моем проекте (asp.net с c # с vs2010)

также я использую несколько кнопок ссылок в itemTemplate ...

Я хочу изменить цвет этих кнопок ссылок, когда мы наводим курсор или выбираем элемент в ListBox! (Программирование на стороне клиента)

Мой 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>

изменение # 1: как вы видите, я поместил RadListBox в RadAjaxPanel (он действует как UpdatePanel) ...

изменение # 2: добавить событие SelectedIndexChanged (на стороне сервера) с AutoPostBack = "True" ...

У меня есть несколько кодов в событии SelectedIndexChanged, которые прекрасно работают в режиме AJAX ...

, но моя новая проблема заключается в том, что когда я изменяю выбранный элемент, нажимая на другой элемент (или нажимая на одну из кнопок ссылки, таких как lbEditIG или lbDeleteIG), и из-за этого возникает обратный вызов, я теряю цвет lbTitleOfIG, который мы установили с помощью ниже css: 

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

но выделенная область все еще подсвечивается ...

я знаю, что этот цвет не так важен, но много месяцев назад у меня была похожая проблема с RadComboBox (теряет фокус после selectedIndexChanged CallBack)

Я был бы очень признателен за то, что дал мне решение, так что я могу использовать его для других целей ...

спасибо, что прочитали это и посвятили свое драгоценное время этой теме

1 Ответ

1 голос
/ 13 мая 2011

Прежде всего, это не имеет ничего общего с программированием на стороне клиента, но с CSS .Конечно, вы можете сделать это с jQuery или другой библиотекой, но это кажется ненужным, если вам не нужно делать сложные вещи.

Совет : Вы должныиспользуйте возможно расширение Firebug для Firefox для работы с js, css.

Наконец, код, который вы запросили, выглядит так: 

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

Первый - для активного элемента списка ивторой для элемента hover внутри списка.

Cheers!

EDIT Вот код, который работает после обратной передачи: 

(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. После того, как при загрузке нового контента мы получаем последний hovered индекс ul (скрытое поле находится вне диапазона UpdatePanel, поэтому его содержимое не очищается).
  4. Если происходит событие hoveredранее мы добавляли определенный класс css к элементу, который сделал SelectedIndexChanged.
  5. Теперь foreach rlbItem: visible мы добавляем функциональность для изменения значения скрытого поля в соответствии с индексом скрытого элемента в списке.
  6. Наконец мы установили новыйзначение элемента нахождения.

Вот и вся магия: -)

...