Расширение строки gridview

Question

Один из столбцов gridview - это столбец «Content», который может содержать несколько строк текста (это может быть литерал, текстовое поле или метка).

В режиме «по умолчанию» я хочу, чтобы он показывал только первую строку и кнопку ссылки: «(больше)» или «(читать)».

Нажатие на эту ссылку должно развернуть столбец и отобразить полный контент.

Каков наилучший способ сделать это?

Answer 1

Используйте силу CSS!

Поместите это в вашу строку сетки. Это естественным образом вытолкнет строку на высоту вашего контента или необходимое количество строк.

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

И используйте этот 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);
}

Возможно, вы захотите замаскировать «переключатель» с помощью текстового поля вашей строки «(далее)», чтобы расширить остальные.

Дайте нам знать, если это сработало.

Answer 2

Это вам поможет.

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

Answer 3

попробуйте это. http://mosesofegypt.net/post/BuildingjQueryAndASPNetAJAXEnabledControlsjQueryCollapsiblePanelExtenderPart2.aspx

Answer 4

Лучше всего выбрать первые 10 символов текстового содержимого и использовать его в качестве текста вашей ссылки. Это уменьшит размер данных, которые извлекаются из базы данных следующим образом:

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

Тогда вы можете использовать шаблон столбца для этого столбца, который включает в себя метку и ссылку. Lbel для текста описания, ссылка для деталей.

<asp:TemplateColumn>

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

</asp:TemplateColumn>