Extension de la ligne gridview

Question

L'une des colonnes de gridview est une colonne "Contenu" qui peut contenir quelques lignes de texte (littérale, texte ou étiquette).

En mode "par défaut" je veux qu'il affiche seulement la première ligne et un bouton de lien: "(plus)" ou "(lire)".

En cliquant sur ce lien, vous devez développer la colonne et afficher le contenu complet.

Quelle est la meilleure façon de faire cela?

Answer 1

Sélectionner les 10 premiers caractères du texte du contenu et l'utiliser comme texte de lien est une meilleure approche. Cela permettra de réduire la taille des données extraites de la base de données qui comme:

SELECT ContentId, SUBSTRING(Content, 0, 10) AS Content 
FROM ContentTable; 

Ensuite, vous pouvez utiliser la colonne de modèle pour cette colonne qui comprend une étiquette et un lien. Lbel pour le texte de description, lien pour les détails.

<asp:TemplateColumn> 

    <ItemTemplate> 
     <asp:Label 
      Text='<%# Eval("Content") %>' 
      runat="server"/> 
     <a href='<%# Eval("ContentId", "contentdetails.aspx?id={0}") %>'>More</a> 
    </ItemTemplate> 

</asp:TemplateColumn> 

Answer 2

Cela va vous aider.

http://www.asp.net/community/control-gallery/Item.aspx?i=1465

Answer 3

essayer. http://mosesofegypt.net/post/BuildingjQueryAndASPNetAJAXEnabledControlsjQueryCollapsiblePanelExtenderPart2.aspx

Answer 4

Utilisez la puissance de CSS!

Placez-le dans votre rangée gridview. Il va naturellement pousser la ligne à la hauteur de votre contenu, ou la quantité de lignes requises.

<div class="toggle"> 
    <div class="toggle-header"> 
    Toggle! 
    </div> 
    <div class="toggle-height"> 
    <div class="toggle-transform"> 
     <p>2nd line of text</p> 
     <p>3rd line</p> 
     <p>4th line</p> 
     <p>etc</p> 
    </div> 
    </div> 
</div> 

Et utiliser ce CSS ...

body { 
    font-family: sans-serif; 
} 

.toggle { 
    position: relative; 
    border: 2px solid #333; 
    border-radius: 3px; 
    margin: 5px; 
    width: 200px; 
} 

.toggle-header { 
    margin: 0; 
    padding: 10px; 
    background-color: #333; 
    color: white; 
    text-align: center; 
    cursor: pointer; 
} 

.toggle-height { 
    background-color: tomato; 
    overflow: hidden; 
    transition: max-height .6s ease; 
    max-height: 0; 
} 

.toggle:hover .toggle-height { 
    max-height: 1000px; 
} 

.toggle-transform { 
    padding: 5px; 
    color: white; 
    transition: transform .4s ease; 
    transform: translateY(-100%); 
} 

.toggle:hover .toggle-transform { 
    transform: translateY(0); 
} 

Vous pouvez masquer la ligne « bascule » avec une zone de texte de votre « (plus) » pour développer le reste.

Dites-nous si cela a fonctionné.