Строка ретранслятора расширяется при нажатии

Я хочу, чтобы моя строка повторителя - при нажатии расширялась с несколькими текстовыми полями на панели. Здесь я сделал повторитель в формате таблицы с данными из базы данных. Когда нажимается каждая строка в повторителе, мне нужно, чтобы панель была видна с текстовым полем it.when строка щелкнута снова, тогда панель должна стать невидимой.

Заранее спасибо за помощь

<asp:Repeater ID="RepSample" runat="server" DataSourceID="SqlDataSource1">
    <HeaderTemplate>
        <table cellpadding="1" cellspacing="1" width="100%" style="font-family: Verdana;
            border: 1px solid #C0C0C0; background-color: #D8D8D8">
            <tr bgcolor="#FF781E">
                <th>
                    LicenseID
                </th>
                <th>
                    LicenseName
                </th>
                <th>
                    StartDate
                </th>
                <th>
                    EndDate
                </th>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr style="background-color: White">
            <td>
                <%#DataBinder.Eval(Container, "DataItem.LicenseID")%>
            </td>
            <td>
                <%#DataBinder.Eval(Container, "DataItem.LicenseName")%>
            </td>
            <td>
                <%#DataBinder.Eval(Container, "DataItem.StartDate")%>
            </td>
            <td>
                <%#DataBinder.Eval(Container, "DataItem.EndDate")%>
            </td>
        </tr>
    </ItemTemplate>
    <AlternatingItemTemplate>
        <tr>
            <td>
                <%#DataBinder.Eval(Container, "DataItem.LicenseID")%>
            </td>
            <td>
                <%#DataBinder.Eval(Container, "DataItem.LicenseName")%>
            </td>
            <td>
                <%#DataBinder.Eval(Container, "DataItem.StartDate")%>
            </td>
            <td>
                <%#DataBinder.Eval(Container, "DataItem.EndDate")%>
            </td>
        </tr>
    </AlternatingItemTemplate>
    <FooterTemplate>
        </table></FooterTemplate>
</asp:Repeater>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:KTestConnectionString %>"
    SelectCommand="SELECT LicenseID, LicenseName, StartDate, EndDate FROM Krish">
</asp:SqlDataSource>

asp.net vb.net panel repeater
person user2745021    schedule 12.09.2013    source источник
comment
вам нужно переписать свой вопрос, что вы пытаетесь сделать .. что вы пробовали до сих пор .. если вы получаете ошибки, каковы они   -  person Michael B.    schedule 12.09.2013
comment
Деврадж Спасибо за помощь   -  person user2745021    schedule 12.09.2013

Ответы (1)


arrow_upward
1
arrow_downward

jquery может помочь...

Создайте свой плагин jQuery с помощью приведенного ниже кода jQuery...

(function($) {
    $.fn.extend({
        collapsiblePanel: function() {
            //Call the ConfigureCollapsiblePanel function for the selected element
            return $(this).each(ConfigureCollapsiblePanel);
        }
    });
})(jQuery);

function ConfigureCollapsiblePanel() {
    //Wrap the contents of the container within a new div.
    $(this).children().wrapAll("<div class='collapsibleContainerContent'></div>");

    //Create a new div as the first item within the container.
    $("<div class='collapsibleContainerTitle'></div>").prependTo($(this));

    //Assign a call to CollapsibleContainerTitleOnClick for the click event of the new div.
    $(".collapsibleContainerTitle", this).click(CollapsibleContainerTitleOnClick);
}

function CollapsibleContainerTitleOnClick() {
    //The item clicked is the new div... get this parent (the overall container) and toggle the content within it.
    $(".collapsibleContainerContent", $(this).parent()).slideToggle();
}

часть разметки aspx

Поместите div внутри вашего Repeater ItemTemplate и дайте ему класс collapsibleContainer

<asp:Repeater ID="Repeater1" runat="server">
    <ItemTemplate>
        <div class="collapsibleContainer">
            <%-- Put your text boxes and other contents here --%>
        </div>
    </ItemTemplate>
</asp:Repeater>

Теперь осталась только функция $().ready на вашей странице.

$().ready(function() {
    $(".collapsibleContainer").collapsiblePanel();
});

Конечно, вам нужно будет включить ссылку на плагин jQuery в качестве тега скрипта на вашей странице.

person Devraj Gadhavi    schedule 12.09.2013