Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
384 views
in Technique[技术] by (71.8m points)

c# - How to Add datepicker in asp.net Gridview control

I am trying to add datepicker into a Asp.net Gridview control with column name (cheque_date), when i hardcode the id of Gridview column of a particular row it works fine but for only for that row, but i want to add datepicker for each and every row of Gridview. Below is my Html and jquery code that dose not work as expected. can anyone explain and solve my problem. Thanks in advance

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div id="loading" style="display: none"></div>
        <div class="table-responsive">
            <asp:GridView ID="gvBankPayment" CssClass="table table-bordered table-hover dataTable" runat="server" ShowHeaderWhenEmpty="true" ShowFooter="true" AutoGenerateColumns="False" OnRowEditing="gvBankPayment_RowEditing" OnRowDataBound="gvBankPayment_RowDataBound">
                <Columns>
                    <asp:TemplateField HeaderText="Chart of Account">
                        <ItemTemplate>
                            <asp:DropDownList ID="coa_id" CssClass="form-control" AppendDataBoundItems="true" runat="server"></asp:DropDownList>
                            <asp:RequiredFieldValidator ID="RFVCOA" ControlToValidate="coa_id" ForeColor="Red" runat="server" Display="Dynamic" ErrorMessage="Select COA"></asp:RequiredFieldValidator>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Remarks">
                        <ItemTemplate>
                            <asp:TextBox ID="remarks" CssClass="form-control" Text='<%#Eval("remarks")%>' runat="server"></asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Cheque Date">
                        <ItemTemplate>
                            <asp:TextBox ID="cheque_date" AutoPostBack="false" CssClass="form-control myDatePickerClass" placeholder="Cheque Date" Text='<%#Eval("cheque_date") %>' runat="server"></asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Cheque No">
                        <ItemTemplate>
                            <asp:TextBox ID="cheque_no" CssClass="form-control" Text='<%#Eval("cheque_no") %>' runat="server"></asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Amount">
                        <ItemTemplate>
                            <asp:TextBox ID="amount" CssClass="form-control" Text='<%#Eval("amount") %>' runat="server"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RFVAmount" ControlToValidate="amount" ForeColor="Red" runat="server" ErrorMessage="Enter Amount"></asp:RequiredFieldValidator>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Tax Type">
                        <ItemTemplate>
                            <asp:DropDownList ID="tax_id" CssClass="form-control" runat="server"></asp:DropDownList>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="WHT(%)">
                        <ItemTemplate>
                            <asp:TextBox ID="wht_tax_percent" CssClass="form-control calculateWhtAmount" Text='<%#Eval("wht_tax_percent") %>' runat="server"></asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="WHT Amount">
                        <ItemTemplate>
                            <asp:TextBox ID="wht_tax_amount" CssClass="form-control" Text='<%#Eval("wht_tax_amount") %>' runat="server"></asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Total Amount">
                        <ItemTemplate>
                            <asp:TextBox ID="total_amount" CssClass="form-control tamount" Text='<%#Eval("total_amount") %>' runat="server"></asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="">
                        <ItemTemplate>
                            <asp:ImageButton ID="deleteButton" CssClass="mydelete" runat="server" ImageUrl="~/img/x.png" OnClick="deleteButton_Click" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="">
                        <ItemTemplate>
                            <asp:ImageButton ID="ButtonAdd" CssClass="" ImageUrl="~/img/plus-sign-button.png" runat="server" OnClick="ButtonAdd_Click" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
                <EmptyDataTemplate>No Record Available</EmptyDataTemplate>
            </asp:GridView>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

My jquery code is below:

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
    $("#ContentPlaceHolder1_gvBankPayment").on('click', '.myDatePickerClass', function () {
        var currentRow = $(this).closest("tr");

        var input = ('#' + currentRow.find("td:eq(2) input").attr('id'));
        $(input).datepicker({
            dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true, yearRange: '1950:2013', yearRange: '1950:2050'
        });
    });
});
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You should change your script to this. It is also better to make a function and not place it inside the endRequest. Because as your code is now it will not bind the datepicker on first load, but only after a UpdatePanel update. Note the use of ClientID

<script type="text/javascript">

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_endRequest(function () {
        bindDatePicker();
    });

    bindDatePicker();

    function bindDatePicker() {
        $("#<%=gvBankPayment.ClientID %> .myDatePickerClass").focusin(function () {
            $(this).datepicker({
                dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true, yearRange: '1950:2013', yearRange: '1950:2050'
            });
        });
    }
</script>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...