3

以下のような列を持つ編集可能な Gridview があります。

    <asp:TemplateField HeaderText="Date" >
        <ItemTemplate>
            <asp:TextBox ID="TextBox2" runat="server" Width="160" CssClass="DateTimePicker" ></asp:TextBox>
        </ItemTemplate>
    </asp:TemplateField>

    <asp:TemplateField HeaderText="Amt $">
        <ItemTemplate>
             <asp:TextBox ID="TextBox3" runat="server" Width="160"></asp:TextBox>
        </ItemTemplate>
        <FooterStyle HorizontalAlign="Right" />
        <FooterTemplate>
         <asp:Button ID="ButtonAdd" runat="server" Text="Add Stage" onclick="ButtonAdd_Click" />
        </FooterTemplate>
    </asp:TemplateField>
    </Columns>

ご覧のとおり、このグリッドビューは、ユーザーが行をグリッドビューに追加できるようにする下部のボタンとして表示されます。

Date 列にカレンダーをポップアップ表示したいので、jQuery ( Keith Wood ) を使用して、次のように JS 関数を呼び出します。

    $(function () {

                $('.DateTimePicker').datepick({ dateFormat: 'dd MM yyyy' });
            });

グリッドビューで、[日付] テキストボックス (最初の行) を初めてクリックすると、カレンダーがポップアップします。ただし、グリッドビューに行を追加すると、カレンダー機能が表示されなくなります。

これは、コード ビハインドから gridview に新しい行を追加する方法です。

    private void AddNewRowToGrid()
    {
        int rowIndex = 0;

        if (ViewState["CurrentTable"] != null)
        {
            DataTable dtCurrentTable = (DataTable)ViewState["CurrentTable"];
            DataRow drCurrentRow = null;
            if (dtCurrentTable.Rows.Count > 0)
            {
                for (int i = 1; i <= dtCurrentTable.Rows.Count; i++)
                {
                    //extract the TextBox values
                    TextBox box1 = (TextBox)Gridview1.Rows[rowIndex].Cells[1].FindControl("TextBox1");
                    TextBox box2 = (TextBox)Gridview1.Rows[rowIndex].Cells[2].FindControl("TextBox2");
                    TextBox box3 = (TextBox)Gridview1.Rows[rowIndex].Cells[3].FindControl("TextBox3");


                    drCurrentRow = dtCurrentTable.NewRow();
                    drCurrentRow["RowNumber"] = i + 1;

                    dtCurrentTable.Rows[i - 1]["Column1"] = box1.Text;
                    dtCurrentTable.Rows[i - 1]["Column2"] = box2.Text;
                    dtCurrentTable.Rows[i - 1]["Column3"] = box3.Text;

                    rowIndex++;
                }
                dtCurrentTable.Rows.Add(drCurrentRow);
                ViewState["CurrentTable"] = dtCurrentTable;

                Gridview1.DataSource = dtCurrentTable;
                Gridview1.DataBind();
            }
        }
        else
        {
            Response.Write("ViewState is null");
        }

        //Set Previous Data on Postbacks
        SetPreviousData();
    }

グリッドビューに新しい行を追加すると、カレンダーがポップアップしない理由はありますか?

乾杯！

4

2 に答える 2

2

これが発生する唯一のケースは、UpdatePanel を使用する場合です。

UpdatePanel を使用すると、各 UpdatePanel で Dom が変更され、javascript の再初期化が必要になります。あなたの場合、新しい行を追加し、ajax を更新するため、日付ピッカーを再初期化する必要があります。

これは、次のように UpdatePanel に付属する関数から実行できます。

<script type="text/javascript"> 
   // when dom is ready we initialize the UpdatePanel requests
   $(document).ready(function () {
       var prm = Sys.WebForms.PageRequestManager.getInstance();    
       prm.add_initializeRequest(InitializeRequest);
       prm.add_endRequest(EndRequest);

       // Place here the first init of the DatePicker           
       $('.DateTimePicker').datepick({ dateFormat: 'dd MM yyyy' });
    });        

    function InitializeRequest(sender, args) {
       // make unbind before update the dom, to avoid memory leaks.
       $('.DateTimePicker').unbind();
    }

    function EndRequest(sender, args) {
       // after update occur on UpdatePanel re-init the DatePicker
       $('.DateTimePicker').datepick({ dateFormat: 'dd MM yyyy' });
    }
</script>

類似: Gridview Jquery DatePicker の Asp.Net UpdatePanel
動的に作成されたコントロールの Datepicker

于 2013-04-26T02:13:34.537 に答える
0

$(関数 () {

        $('.DateTimePicker').datepick({ dateFormat: 'dd MM yyyy' });
    });

1回ヒットするということです。次のように forEach 関数を使用してみてください。

$(function () {
        $('.DateTimePicker').each(function () {
            $(this).datepick({ dateFormat: 'dd MM yyyy' });
         });
        //$('.DateTimePicker').datepick({ dateFormat: 'dd MM yyyy' });
    });
于 2013-04-26T02:07:38.867 に答える