Click the row cell in the list in the Repeater control. Data is displayed below the row.

In this demo, when we need to open a column on the list page, we want to display a row of data or a text under the column. Here we use the Repeater control that comes with asp.net.

Below is the js to be called
<Script language = "javascript">
Var $ = function (I ){
Return document. getElementById (I)
};
Function moreshow (ml, mr ){
If (mr = null | mr = ""){
Var e = $ (ml );
If (e. style. display! = 'Block '){
E. style. display = 'block ';
} Else {
E. style. display = 'none ';
}
Return false
}
Return true;
};
Function moreddhide (e ){
If (! E) var e = window. event;
If (e. srcElement ){
Var a = e. srcElement. getAttribute ("id ")
} Else {
Var a = e.tar get. getAttribute ("id ")
}
If (! = "More "){
$ ('Morelist'). style. display = 'none'
}
};
Document. onclick = moreddhide;
</Script>

 

<Asp: Repeater ID = "Repeater1" runat = "server">
<ItemTemplate>
<Div style = "height: 30px; width: 100%;">
<Ul>

// Call the js moreshow (s1, s2) s2 here to expand the next div by clicking that column
<Li style = "width: 150px;"> <a href = "Javascript:" id = "more" onclick = "moreshow ('<% # Eval (" Qid ") %> ',' <% # Eval ("QReplytime") %> '); "> </li>

<Li style = "width: 200px;"> <% # Eval ("Qsource") %> </li>

</Ul>
</Div>

// This div is used to display the position where data is displayed after the click column.
<Div style = "height: 100px; width: 100%; display: none;" id = '<% # Eval ("Qid") %>'>
<Ul>
<Li> question: </li> <li style = "width: 50%;"> <% # Eval ("QContent") %> </li> <br/>
</Ul>
</Div>
</ItemTemplate>
</Asp: Repeater>