locked
Bootstrap Date picker only works on first row of GridView RRS feed

  • Question

  • User322452319 posted

    Hello experts,

    I have this bootstrap datepicker that only works on the first row on a asp gridview in webforms.

    The datepicker does not show in subsequent columns. How do I fix this?

    Below is my code:

    // On Page Load
            $(function () {
                SetDatePicker();
            });
            // On UpdatePanel Refresh
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            if (prm != null) {
                prm.add_endRequest(function (sender, e) {
                    if (sender._postBackSettings.panelsToUpdate != null) {
                        SetDatePicker();
                        $(".datepicker-orient-bottom").hide();
                    }
                });
            };
    
            function SetDatePicker() {
                $('#datetimepicker').datepicker
                    ({
                        format: 'dd.MM.yyyy',
                        inline: true,
                        todayHighlight: true,
                        autoclose: true
                    });
            }
     <asp:GridView ID="GridView"
                            EmptyDataText="No data found!"
                            runat="server"
                            AutoGenerateColumns="False"
                            AllowPaging="True"
                            AllowSorting="True"
                            OnRowEditing="GridView_RowEditing"
                            OnRowUpdating="GridView_RowUpdating"
                            OnPageIndexChanging="GridView_PageIndexChanging"
                            OnRowCancelingEdit="GridView_RowCancelingEdit"
                            PagerStyle-CssClass="bs-pagination"
                            CssClass="table table-striped table-bordered table-hover table-condensed">
                            <Columns>
                                <asp:TemplateField ItemStyle-Width="30px" HeaderText="#">
                                    <ItemTemplate>
                                        <asp:Label ID="lblLineNum" Text='<%# Container.DataItemIndex + 1 %>' runat="server" />
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:BoundField DataField="ItemCode" HeaderText="Item Code" />
                                <asp:BoundField DataField="Description" HeaderText="Item Name"  ItemStyle-Width="200px"/>
                                <asp:BoundField DataField="Quantity" HeaderText="Quantity" />
                                <asp:TemplateField ItemStyle-Width="120px" HeaderText="Department">
                                    <ItemTemplate>
                                        <asp:DropDownList ID="ddlDepartment" runat="server"
                                            AutoPostBack="True"
                                            SelectMethod="GetDepartments"
                                            AppendDataBoundItems="True"
                                            SelectedValue='<%# Eval("DepartmentId") %>'
                                            Width="120px"
                                            DataTextField="Value" DataValueField="Key">
                                            <asp:ListItem Value="-1" Text="Select"></asp:ListItem>
                                        </asp:DropDownList>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField ItemStyle-Width="200px" HeaderText="Date Allocated">
                                    <ItemTemplate>
                                        <div class="input-group date" id="datetimepicker">
                                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                                            <asp:TextBox ID="txtAllocateDate" runat="server" CssClass="form-control"></asp:TextBox>
                                        </div>
                                    </ItemTemplate>
                                </asp:TemplateField>

    The column name is Date Allocated.

    Any help appreciated.

    Wednesday, May 5, 2021 9:45 AM

Answers

  • User475983607 posted

    kkjay

    I have this bootstrap datepicker that only works on the first row on a asp gridview in webforms.

    The markup is invalid.  Tag Ids must be unique.   jQuery finds the first ID and does not look any further.   Remove the Id and add a class selector.

    <div class="datetimepicker">
    $('.datetimepicker').datepicker

    Please see the jQuery selector documentation.

    https://api.jquery.com/category/selectors/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 5, 2021 10:49 AM

All replies

  • User475983607 posted

    kkjay

    I have this bootstrap datepicker that only works on the first row on a asp gridview in webforms.

    The markup is invalid.  Tag Ids must be unique.   jQuery finds the first ID and does not look any further.   Remove the Id and add a class selector.

    <div class="datetimepicker">
    $('.datetimepicker').datepicker

    Please see the jQuery selector documentation.

    https://api.jquery.com/category/selectors/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 5, 2021 10:49 AM
  • User322452319 posted

    Cheers mgebhard.

    <div class="input-group date datetimepicker">

    solved it.

    Wednesday, May 5, 2021 11:01 AM