Telerik RadListBox / 마우스를 올려서 몇 가지 작업을 수행하고 RadListBox 내부 항목 선택…(클라이언트 측)

https://stackoverflow.com/questions/5990033

13-11-2019
|

문제

내 프로젝트에서 RadListBox를 사용하고 있습니다(asp.net, vs2010의 C# 포함).

또한 itemTemplate의 일부 링크 버튼을 사용하고 있습니다.

ListBox에서 항목을 가리키거나 선택할 때 LinkButton의 색상을 변경하고 싶습니다!(클라이언트 측 프로그래밍)

내 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:AutoPostBack="True"로 SelectedIndexChanged 이벤트(서버 측) 추가...

Ajax 모드에서 잘 작동하는 SelectedIndexChanged 이벤트에 일부 코드가 있습니다.

하지만 내 새로운 문제는 다른 항목을 클릭하여(또는 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에 대해 비슷한 문제가 있었습니다(selectIndexChanged CallBack 후에 포커스를 잃음).

다른 용도로 사용할 수 있도록 솔루션을 제공해 주시면 정말 감사하겠습니다...

읽어주셔서 감사합니다. 이 스레드에 귀중한 시간을 투자해 주세요.

해결책

첫째, 클라이언트 측 프로그래밍과 함께 할 일이 없지만 CSS 와 아무 관련이 없습니다. 물론 jQuery 또는 다른 도서관으로 그것을 할 수는 있지만 정교한 물건을 할 필요가 없으면 불필요한 것 같습니다.

팁 : "NotFireBug.com/"hr>"nofollow"> Firebug 확장자가 JS, CSS로 작동하도록

마지막으로 requsted 코드가 그런 것처럼 보입니다.

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

여기에 장면 뒤에 일어나는 일에 대한 작은 설명이 있습니다.

숨겨진 필드 가있어서 단순히 HTML UL 요소 인 RadlistBox의 호버가있는 인덱스를 저장해야합니다. 첫 번째로드가 특정 CSS 클래스를 추가하지 않아야 함을 나타내는 "-1"값을 설정합니다.
pageload 은 서버가 클라이언트 브라우저에 데이터를 반환 할 때 항상 호출되는 JavaScript 함수입니다. Ajax (각 updatePanel 실행)를 통해. 여기에 우리는 중요한 것들을합니다.
새 콘텐츠가로드 된 후 마지막으로 호버 된 UL을 수신합니다 (숨겨진 필드는 업데이트 패널 범위 가외의 범위이므로 콘텐츠가 지워지지 않으므로).
이벤트를 호전 한 이벤트가 이전에 선택한 CSS 클래스를 선택한 요소에 추가합니다.
이제 foreach rlbitem : 표시됨 목록의 호버가 지정된 요소 색인에 따라 숨겨진 필드 값을 변경하는 기능을 추가합니다.
우리는 마침내 호버링 된 요소의 새로운 가치를 설정했습니다.
모든 마술입니다. -)

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow