グリッドビューの項目テンプレートの列幅を固定し、詳細をリンクで表示ボタン

ここに私のGridviewテンプレート..ここで私は私の列の幅を修正したいが、それは動作していません。グリッドビューの項目テンプレートの列幅を固定し、詳細をリンクで表示ボタン

<asp:TemplateField HeaderText="Remarks"> 
    <HeaderStyle Width="20" /> 
     <ItemStyle HorizontalAlign="Left" Width="20px" /> 
       <ItemTemplate> 
         <%#Eval("Comments")%> 
         <asp:LinkButton ID="LinkButton1" runat="server"         CausesValidation="False" CommandName="Select" CssClass="accordionButton" Text="Select"> 
    </asp:LinkButton> 
</ItemTemplate> 
</asp:TemplateField>

その後、私はコメント欄には、私は、このJavaスクリプトを使用しています。..詳細を同じ列内のこれらの列の値が表示されますリンクボタンが含まれていますしたいです。

<script type="text/javascript"> 
     $(document).ready(function() { 

      //ACCORDION BUTTON ACTION 
      $('.accordionButton').click(function() { 
       alert("HERE!"); 
       $(this).next().slideToggle(); 
      }); 
     }); 
    </script> 


    <style> 
     .accordionButton { 
      width: 100%; 
      cursor: pointer; 
      line-height: 20px; 
     } 

     .accordionContent { 
      width: 100%; 
      display: none; 
     }

この写真では、結果が表示されています。私はdeatilsを見るために動作するリンクボタンが欲しいです。

enter image description here

出典

2016-08-09 Nafiz Chow

コメント？ –

私はアイデアが好きですが、最初の数単語だけを表示し、次に（もっと見る）ボタンを表示して既存のテキストを表示したいとします。 –

あなたが列にMaxWidthの設定しようとしたことがありますか？テキストが消えるのをそして、あなたはTextTrimmingを使用することができます。

は

<asp:TemplateField HeaderText="Remarks"> 
    <HeaderStyle Width="20" /> 
     <ItemStyle HorizontalAlign="Left" Width="20px" MaxWidth="150" TextTrimming="CharacterEllipsis"/> 
       <ItemTemplate> 
         <%#Eval("Comments")%> 
         <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Select" CssClass="accordionButton" Text="Select"> 
    </asp:LinkButton> 
</ItemTemplate> 
</asp:TemplateField>

MaxWidthのは、列に最大幅を提供します。私は、これはここで

出典

2016-08-09 09:31:08 Giellez

'System.Web.UI.WebControls.TableItemStyle'には、 'MaxWidth'という名前のパブリックプロパティがありません。 ....これらのエラーが発生します.... –

を助け願っています、それはもはやそれがであるフィールドの場合=「CharacterEllipsis」はテキスト消えるを作る

TextTrimming（写真参照）

は簡単です。 jQueryとTwitterのブートストラップを使用した例：

<head runat="server"> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script type="text/javascript"> $(function() { $('.accordionButton').click(function() { $(".modal-body").empty(); var remark = $(this).data('remark'); $(".modal-body").html(remark); $('#myModal').modal('show'); }); }); </script> </head> <body> <form id="form1" runat="server"> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"> <Columns> <asp:TemplateField HeaderText="Name"> <ItemTemplate> <asp:Label ID="Label1" runat="server" Text='<%# Eval("Name") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Remarks"> <HeaderStyle Width="20" /> <ItemStyle HorizontalAlign="Left" Width="20px" /> <ItemTemplate> <%# Eval("Comments").ToString().Length >= 10 ? Eval("Comments").ToString().Substring(0,10) + "..." : "" %> <a href="#" class="accordionButton" data-remark='<%# Eval("Comments") %>'>See more</a> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </form> <div id="myModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Modal Header</h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </body>

出力：あなたは備考の唯一の最初のいくつかの単語を表示し、ユーザーが選択した表示にフルでモーダルポップアップをクリックしたときに、それ自身のcolumn.Thenにセレクトボタンを移動しないのはなぜ

出典

2016-08-09 10:20:05

グリッドビューの項目テンプレートの列幅を固定し、詳細をリンクで表示ボタン

答えて

関連する問題