WebSurfer's Home

トップ > Blog 1   |   Login
Filter by APML

GridView と jQuery UI DatePicker

by WebSurfer 26. October 2014 15:47

ASP.NET の GridView で jQuery UI の Datepicker を使用する例の紹介です。

GridView に jQuery UI の Datepicker

GridView と組み合わせるなら Ajax Control Toolkit の CalendarExtender を使う方が簡単で、かつ 日付表示の日本語対応 もやりやすいと思いますが、外観の統一を図るなどの理由で jQuery UI の Datapicker を使用したい場合があると思います。

その場合、どのように GridView 内で Datapicker を表示する TextBox を探して、その jQuery オブジェクトを取得し、それに datepicker() メソッドを適用するかを書きます。

通常、GridView では編集モードになった行に TextBox を表示してユーザー入力を受け付けるようにします。その時に datepicker() メソッドを当該 TextBox に適用すればいいわけです。

編集モードになった行は GridView.EditIndex プロパティで判定できますが、Page.Load のタイミングでは早すぎて判定できません。

GridView.RowEditing のタイミングでは、ユーザー入力用の TextBox が生成されていないので FindControl では取得できず、このタイミングでもダメです。

GridView.RowCreated のタイミングでは、最終的な TextBox.ClientID が取得できないので、これまたダメです。(このタイミングでは TextBox.ClientID にはまだ名前つきコンテナの id が付与されておらず TextBox1_x のようになります。最終的な TextBox.ClientID が取得できないと、クライアントスクリプトでその jQuery オブジェクトを取得できません)

GridView.PreLender のタイミングなら、編集モードになっているか否かおよび編集モードになっている行のインデックスは正しく判定できます。最終的な TextBox.ClientID も取得できます。

GridView の[編集]ボタンクリックでポストバックされた際に、GridView.PreLender イベントのハンドラで編集モードになっている行の中の Datapicker を適用する TextBox を探し、その ClientID を取得し、RegisterClientScriptBlock メソッド を使って当該 TextBox に datepicker() メソッドを適用するスクリプトを登録してやることで Datapicker を表示することができます。

以下のコードの GridView1_PreRender イベントハンドラののコードような感じです。GridView で[編集]ボタンをクリックして表示される TextBox にフォーカスを当てると、上の画像のように Datapicker が表示されます。

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">    
  protected void GridView1_PreRender(object sender, EventArgs e)
  {
    int index = GridView1.EditIndex;

    if (index >= 0)
    {
      TextBox tb = 
        (TextBox)GridView1.Rows[index].FindControl("TextBox1");

      if (tb != null)
      {
        ClientScriptManager cs = Page.ClientScript;
        Type cstype = this.GetType();
        string csname = "jQueryUiDatepicker";

        if (!cs.IsClientScriptBlockRegistered(cstype, csname))
        {
          string cstext = "$(function () { $('#" 
              + tb.ClientID + "').datepicker(); });";

          cs.RegisterClientScriptBlock(
              cstype, 
              csname, 
              cstext, 
              true);
        }
      }
    }
  }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>jQuery UI Datepicker in GridView</title>
  <script src="Scripts/jquery.js" type="text/javascript">
  </script>
  <script src="Scripts/jquery-ui.js" type="text/javascript">
  </script>
  <link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <form id="form1" runat="server">
  <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
    ConnectionString="<%$ ConnectionStrings:Northwind %>" 
    SelectCommand="SELECT TOP 10 
      [OrderID], [CustomerID], [ShippedDate] 
      FROM [Orders]" 
    UpdateCommand="UPDATE [Orders] 
      SET [CustomerID] = @CustomerID, 
          [ShippedDate] = @ShippedDate 
      WHERE [OrderID] = @OrderID">
    <UpdateParameters>
      <asp:Parameter Name="CustomerID" Type="String" />
      <asp:Parameter Name="ShippedDate" Type="DateTime" />
      <asp:Parameter Name="OrderID" Type="Int32" />
    </UpdateParameters>
  </asp:SqlDataSource>

  <asp:GridView ID="GridView1" 
    runat="server" 
    AutoGenerateColumns="False" 
    DataKeyNames="OrderID" 
    DataSourceID="SqlDataSource1" 
    OnPreRender="GridView1_PreRender">
    <Columns>
      <asp:CommandField ShowEditButton="True" />
      <asp:BoundField DataField="OrderID" 
        HeaderText="OrderID" 
        InsertVisible="False" 
        ReadOnly="True" 
        SortExpression="OrderID" />
      <asp:BoundField DataField="CustomerID" 
        HeaderText="CustomerID" 
        SortExpression="CustomerID" />
      <asp:TemplateField HeaderText="ShippedDate" 
        SortExpression="ShippedDate">
        <EditItemTemplate>
          <asp:TextBox ID="TextBox1" 
            runat="server" 
            Text='<%# Bind("ShippedDate") %>'>
          </asp:TextBox>
        </EditItemTemplate>
        <ItemTemplate>
          <asp:Label ID="Label1" 
            runat="server" 
            Text='<%# Bind("ShippedDate") %>'>
          </asp:Label>
        </ItemTemplate>
      </asp:TemplateField>
    </Columns>
  </asp:GridView>
  </form>
</body>
</html>

サーバー側のコードで TextBox.ClientID を取得してピンポイントなスクリプトを設定しなくても、クライアント側で jQuery のセレクタで当該 TextBox を探して、それに datepicker() 適用する方が簡単ですが、ClientID の命名規則が変わるとうまくいかなくなる可能性があります。

そのリスクが許容できるのであれば、GridView1_PreRender イベントハンドラに代えて、以下のようなクライアントスクリプトを使っても同等なことが可能です。

<script type="text/javascript">
//<![CDATA[
  $(function () { 
    $('#<%=GridView1.ClientID%> input:text[id*=TextBox1]')
      .datepicker(); 
  });
//]]>
</script>

Tags: , ,

JavaScript

Paging 機能付 GridView の行選択

by WebSurfer 19. December 2013 16:59

GridView に CheckBox を配置し、ユーザーに複数行を選択してもらうというシナリオはよくあると思います。この場合、GridView にページング機能が実装されていると問題です。

Paging 機能付 GridView の行選択結果取得

例えば、Page 1 でいくつかの行を選択して CheckBox にチェックを入れてから Page 2 に移動し、再び Page 1 に戻った場合、先に Page 1 で CheckBox に入れたはずのチェックが消えてしまいます。

この問題に対処するためには、以前のチェック情報を ViewState に保持しておき、ページが変わったら ViewState からそのページのチェック情報を取得して CheckBox.Checked プロパティを true に設定してやるというような操作が必要になります。

ページャーがクリックされるとポストバックが発生しますので、そのタイミングでクライアントスクリプトによってチェック結果を取得して隠しフィールドに格納し、それをサーバーに送信して ViewState に保存するようにしてみました。

CheckBox の ID には、GridView.DataKeys プロパティから主キー値を取得し、それを設定しています。それゆえ、クライアントスクリプトでもチェックされた CheckBox の name 属性から当該レコードの主キー値が分かります。

ただし、ID から name への名付けルールが変わるとうまく行かなくなる可能性がありますので、できれば主キー値を GridView に表示して、それから取得するようにした方がいいかもしれません。

以下のソースコードは主キー値を name 属性から取得する場合の例です。上の画像がソースコードの実行結果です。

注意事項はソースコード内のコメントに書きましたので、詳しくはそれを見てください。手抜きですみません。(汗)

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
  // CheckBox をクリックするたびポストバックしないで、ページン
  // グでポストバックした際に、まとめてチェック結果を取得し、
  // チェックされた行の主キー (ID) リストを更新する。

  // クライアント側で、input type="checkbox" 要素の id 属性また
  // は name 属性から、その要素のある行の主キー (ID) を取得する
  // ため、CheckBox.ID に主キー値を設定。主キー値が 17 の場合
  // id="GridView1_17_0" name="GridView1$ctl02$17" のようになる。
  // このサンプルでは、クライアントスクリプトで name 属性から
  // 主キー値を取得している。名前付けルールが変わってうまくいか
  // なくなる可能性があるので注意。
    
    
  // チェック入り行の主キー (ID) のリスト。ViewState に保持。    
  protected List<String> checkedIds;
    
  protected void Page_Load(object sender, EventArgs e)
  {
    // ViewState から ID リスト checkedIds を取得。
    if (checkedIds == null)
    {
      object obj = ViewState["CheckedIds"];
      if (obj != null)
      {
        checkedIds = (List<String>)obj;
      }
      else
      {
        // ViewState が未設定の場合は新たに初期化。
        checkedIds = new List<String>();
      }
    }

    // form を送信する際、CheckBox のチェック有無を調べて、
    // その結果をサーバーに送信するスクリプトを設定。
    String csname = "OnSubmitScript";
    Type cstype = this.GetType();
    ClientScriptManager cs = Page.ClientScript;
    if (!cs.IsOnSubmitStatementRegistered(cstype, csname))
    {
      String cstext = 
          "getCheckedIDs('" + GridView1.ClientID + "');";
      cs.RegisterOnSubmitStatement(cstype, csname, cstext);
    }
  }

  // ページャクリックの場合のイベント発生順序に注意:
  // 現ページの GridView.RowCreated ⇒ Page.Load ⇒ GridView.
  // PageIndexChanging ⇒ 次ページの GridView.RowCreated

  // ちなみに、ボタンクリックによるイベント発生順序は:
  // 現ページの GridView.RowCreated ⇒ Page.Load ⇒ 
  // Button.Click
    
  // CheckBox.ID を動的に設定するのを RowDataBound イベント
  // で行うのは NG。ボタンクリックではデータバインドが起こ
  // らないので、CheckBox.ID が設定されず(ASP.NET が勝手に
  // 独自の ID を生成する)、うまくいかない。
  protected void GridView1_RowCreated(object sender, 
        GridViewRowEventArgs e)
  {
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
      // ViewState から ID リスト checkedIds を取得。
      // ボタンクリックまたはページングによるポストバック
      // では Page.Load よりこちらのイベントが先に発生す
      // るのでここでも必要。
      if (checkedIds == null)
      {
        object obj = ViewState["CheckedIds"];
        if (obj != null)
        {
          checkedIds = (List<String>)obj;
        }
        else
        {
          // ViewState が未設定の場合は新たに初期化。
          checkedIds = new List<String>();
        }
      }
            
      // この行の id(主キー)値を取得。
      string id = ((GridView)sender).
          DataKeys[e.Row.RowIndex].Value.ToString();

      // e.Row.Cells[0] の中から CheckBox を探す。
      foreach (Control control in e.Row.Cells[0].Controls)
      {
        if (control is CheckBox)
        {
          CheckBox cb = (CheckBox)control;

          // CheckBox.ID に id を設定。クライアントスクリプト
          // で CheckBox の name 属性から id を取得できるよう
          // にするため。
          // このサンプルでは name は GridView1$ctl02$17 のよ
          // うになり、最後の 17 が id に該当。
          cb.ID = id;

          // id がリスト checkedIds にあればチェックを入れる。
          foreach (string checkedid in checkedIds)
          {
            if (checkedid == id)
            {
              cb.Checked = true;
              return;
            }
          }

          cb.Checked = false;
          break;
        }
      }
    }
  }

  // ページが変更される際にリスト checkedIds を更新する。
  protected void GridView1_PageIndexChanging(object sender, 
        GridViewPageEventArgs e)
  {
    // form の onsubmit イベントで、クライアントスクリプトが
    // CheckBox のチェック有無の情報を取得し、当該行の id を
    // 隠しフィールドに格納するので、それから id を取得する。
    char[] chars = new char[] { ',' };
    string s = Request.Form["__CHECKEDIDLIST"].Trim(chars);
    string[] check = s.Split(chars);
    s = Request.Form["__UNCHECKEDIDLIST"].Trim(chars);
    string[] uncheck = s.Split(chars);

    // 重複を避けるため、一旦、GridView 上のすべての ID を
    // リスト checkedIds から削除してから、
    foreach (string id in check)
    {
      checkedIds.Remove(id);
    }

    foreach (string id in uncheck)
    {
      checkedIds.Remove(id);
    }

    // チェック済の ID をリスト checkedIds に加える。
    foreach (string id in check)
    {
      if (!String.IsNullOrEmpty(id))
      {
        checkedIds.Add(id);
      }
    }

    // リスト checkedIds を ViewState に保持する。
    ViewState["CheckedIds"] = checkedIds;
  }
        
  // ボタンクリックでチェックされた全行の id を書き出す。
  protected void Button1_Click(object sender, EventArgs e)
  {
    // ボタンクリック直前のチェック結果をここで取得。
    char[] chars = new char[] { ',' };
    string s = Request.Form["__CHECKEDIDLIST"].Trim(chars);
    string[] check = s.Split(chars);
    s = Request.Form["__UNCHECKEDIDLIST"].Trim(chars);
    string[] uncheck = s.Split(chars);
        
    // チェック入り行の主キー (ID) リスト checkedIds を更新。
    foreach (string id in check)
    {
      checkedIds.Remove(id);
    }

    foreach (string id in uncheck)
    {
      checkedIds.Remove(id);
    }
        
    foreach (string id in check)
    {
      if (!String.IsNullOrEmpty(id))
      {
        checkedIds.Add(id);
      }
    }
        
    ViewState["CheckedIds"] = checkedIds;

    // リスト checkedIds の内容を書き出す。
    string str = "Selected Ids:";
    foreach (string id in checkedIds)
    {
      str += " " + id;
    }
    Label1.Text = str;
  }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title></title>
  <script src="Scripts/jquery-1.8.3.js" type="text/javascript">
  </script>
  <script type="text/javascript">
  //<![CDATA[
    // CheckBox のチェック有無を調べて、その結果を隠し
    // フィールドに設定するスクリプト。
    function getCheckedIDs(gridViewClientId) {
      var checked = "";
      var unchecked = "";

      $('#' + gridViewClientId + ' input:checkbox').each(
        function () {
          // このサンプルでは name は GridView1$ctl02$17 
          // のようになり、最後の 17 が id に該当。
          // ただし MasterPage を使うなど、名前付コンテナ
          // に GridView を入れると違ってくるので注意。
          var name = $(this).attr('name');
          var arrayOfString = name.split('$');
          var id = arrayOfString[arrayOfString.length - 1];
          if ($(this).attr('checked') == "checked") {
            checked += ',' + id;
          } else {
            unchecked += ',' + id;
          }
        });

      $('#__CHECKEDIDLIST').val(checked);
      $('#__UNCHECKEDIDLIST').val(unchecked);
    }
  //]]>
  </script>
</head>
<body>
  <form id="form1" runat="server">

  <%--チェック結果をサーバに送信する隠しフィールド。--%>
  <input type="hidden" 
    name="__CHECKEDIDLIST" 
    id="__CHECKEDIDLIST" 
    value="" />
  <input type="hidden" 
    name="__UNCHECKEDIDLIST" 
    id="__UNCHECKEDIDLIST" 
    value="" />

  <div>        
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
      ConnectionString="<%$ ConnectionStrings:Northwind %>" 
      SelectCommand= "SELECT [ProductID], [ProductName] 
          FROM [Products] ORDER BY [ProductID]">
    </asp:SqlDataSource>
    <asp:GridView ID="GridView1" 
      runat="server" 
      AllowPaging="True" 
      AutoGenerateColumns="False" 
      DataKeyNames="ProductID" 
      DataSourceID="SqlDataSource1" 
      OnPageIndexChanging="GridView1_PageIndexChanging" 
      OnRowCreated="GridView1_RowCreated">
      <Columns>                
        <asp:TemplateField HeaderText="Select">                    
          <ItemTemplate>
            <asp:CheckBox runat="server" />
          </ItemTemplate>                    
        </asp:TemplateField>                
        <asp:BoundField DataField="ProductID" 
          HeaderText="ProductID" 
          InsertVisible="False" 
          ReadOnly="True" 
          SortExpression="ProductID" />
        <asp:BoundField DataField="ProductName" 
          HeaderText="ProductName" 
          SortExpression="ProductName" />
      </Columns>
    </asp:GridView>
    <asp:Button ID="Button1" 
      runat="server" 
      Text="Show Checked Ids" 
      OnClick="Button1_Click" />
    <asp:Label ID="Label1" runat="server"></asp:Label>
  </div>
  </form>
</body>
</html>

Tags: ,

ASP.NET

GridView 上の DropDownList に ToolTip

by WebSurfer 2. November 2013 18:33
注意:
以下の記事の例では、Products テーブルの CategoryID が NULL の場合、および更新の際に NULL を入力する場合の対応は考えていません。NULL 対応は別の記事 DropDownList での NULL の処置 を見てください。

GridView などで更新操作を行う際、DropDownList を利用してユーザー入力に便宜を図ることがあります。その際、ツールチップを利用して DropDownList 上の各項目の説明を表示するという話です。

GridView 上の DropDownList に ToolTip 表示

ここで紹介する例には Microsoft が提供している Northwind サンプルデータベースの Products テーブルと Categories テーブルを使用しています。

Products テーブルの中の ProductName, CategoryID フィールドを GridView 上で更新する際、CategoryID の列に DropDownList を表示するようにします。

DropDownList には、ユーザーが見ても何だか分からない ID (CategoryID) を表示するのでははなくて、ユーザーが読んで理解できる名前 (CategoryName) を表示します。

さらに DropDownList を開いて項目一覧を表示し、それにマウスカーソルを当てると各項目の説明 (Description) をツールチップに表示するようにします。上の画像を見てください。

DropDownList が閉じている時に DropDownList にマウスカーソルを当てると、選択された項目の説明がツールチップに表示されるようにしています。

上の画像を表示したサンプルコードは以下の通りです。詳細はコメントに説明を書きましたので、それを参考にしてください。手抜きでスミマセン。(汗)

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

  // DropDownList には RowDataBound や ItemDataBound に該当す
  // るイベントがないので、各項目にツールチップを追加するには
  // 以下のような方法を取らざるを得ない。
  // 
  // GridView の[編集]ボタンがクリックされるとポストバック
  // され、当該行内に DropDownList がレンダリングされる。その
  // 際に DropDownList.DataBound イベントが発生するので、そこ
  // で DropDownList およびその中の ListItem にツールチップを
  // 設定する。
  protected void DropDownList1_DataBound(object sender, 
        EventArgs e)
  {
      DropDownList ddl = (DropDownList)sender;

      // 再度 DB にクエリを投げてデータを取得。(他に方法が
      // 見つからない)
      DataView dv = (DataView)SqlDataSource2.
            Select(DataSourceSelectArguments.Empty);

      foreach (ListItem item in ddl.Items)
      {
          dv.RowFilter = 
                String.Format("CategoryID='{0}'", item.Value);
          string description = (string)dv[0]["Description"];
            
          // ListItem には ToolTip プロパティはないので、直接
          // title 属性に description を設定する。
          item.Attributes["title"] = description;

          // DropDownList の ToolTip には、選択されている項目の
          // description を設定する。
          if (item.Selected)
          {
              ddl.ToolTip = description;
          }
      }

      // ユーザーが DropDownList 中の項目をクリックして選択され
      // ている項目を変更した場合、それに応じて DropDownList の
      // ToolTip を書き換えるためのスクリプトを追加        
      string csname1 = "jQuery1.8.3";
      string csurl = "~/Scripts/jquery-1.8.3.js";
      string csname2 = "ChangeDropDownListToolTipScript";
      Type cstype = this.GetType();
      ClientScriptManager cs = Page.ClientScript;

      // jQuery を利用するので参照を追加。
      if (!cs.IsClientScriptIncludeRegistered(cstype, csname1))
      {
          cs.RegisterClientScriptInclude(
                cstype, csname1, ResolveClientUrl(csurl));
      }

      // DropDownList の ToolTip 書き換え用スクリプト追加。
      if (!cs.IsClientScriptBlockRegistered(cstype, csname2))
      {
          StringBuilder cstext = new StringBuilder();
          cstext.Append("$(function () {");
          cstext.Append("$('#" + ddl.ClientID + "').change(");
          cstext.Append("function () {");
          cstext.Append("$(this).attr('title', $('#" +
                ddl.ClientID +
                " option:selected').attr('title'));");
          cstext.Append("});");
          cstext.Append("});");
          cs.RegisterClientScriptBlock(
              cstype, csname2, cstext.ToString(), true);
      }
  }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title></title>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <asp:SqlDataSource ID="SqlDataSource1" 
      runat="server" 
      ConnectionString="<%$ ConnectionStrings:Northwind %>" 
      SelectCommand=
        "SELECT TOP 10 
          p.[ProductID], p.[ProductName], 
          p.[CategoryID], c.[CategoryName] 
        FROM [Products] AS p 
        INNER JOIN [Categories] AS c 
        ON p.[CategoryID] = c.[CategoryID] 
        ORDER BY p.[ProductID]" 
      UpdateCommand=
        "UPDATE [Products] 
        SET [ProductName] = @ProductName, 
            [CategoryID] = @CategoryID 
        WHERE [ProductID] = @ProductID">
      <UpdateParameters>
        <asp:Parameter Name="ProductID" Type="Int32" />
        <asp:Parameter Name="ProductName" Type="String" />
        <asp:Parameter Name="CategoryID" Type="Int32" />                
      </UpdateParameters>
    </asp:SqlDataSource>

    <asp:SqlDataSource ID="SqlDataSource2" 
      runat="server" 
      ConnectionString="<%$ ConnectionStrings:Northwind %>" 
      SelectCommand=
        "SELECT [CategoryID], [CategoryName], [Description] 
        FROM [Categories]">
    </asp:SqlDataSource>
        
    <asp:GridView ID="GridView1" 
      runat="server" 
      AutoGenerateColumns="False" 
      DataKeyNames="ProductID" 
      DataSourceID="SqlDataSource1">
      <Columns>
        <asp:CommandField ShowEditButton="True" />
        <asp:BoundField DataField="ProductID" 
          HeaderText="ID" 
          InsertVisible="False" 
          ReadOnly="True" 
          SortExpression="ProductID" />
        <asp:BoundField DataField="ProductName" 
          HeaderText="Product Name" 
          SortExpression="ProductName" />
        <asp:TemplateField HeaderText="Category" 
          SortExpression="CategoryName">
          <EditItemTemplate>                        
            <asp:DropDownList ID="DropDownList1" 
              runat="server" 
              DataSourceID="SqlDataSource2" 
              DataTextField="CategoryName" 
              DataValueField="CategoryID" 
              SelectedValue='<%# Bind("CategoryID") %>' 
              OnDataBound="DropDownList1_DataBound">
            </asp:DropDownList>
          </EditItemTemplate>
          <ItemTemplate>
            <asp:Label ID="Label1" 
              runat="server" 
              Text='<%# Bind("CategoryName") %>'>
            </asp:Label>
          </ItemTemplate>
        </asp:TemplateField>
      </Columns>
    </asp:GridView>
  </div>
  </form>
</body>
</html>

Tags: , ,

ASP.NET

About this blog

2010年5月にこのブログを立ち上げました。その後 ブログ2 を追加し、ここは ASP.NET 関係のトピックス、ブログ2はそれ以外のトピックスに分けました。

Calendar

<<  December 2021  >>
MoTuWeThFrSaSu
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789

View posts in large calendar