Ряд ретранслятора расширяется после щелчка

Question

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

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

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

Answer 1

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 внутри RepeaterItemTemplate и дать ему класс collapsibleContainer

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

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

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

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