Remove From My Forums

Gijgo DatePicker in a Gridview Problem

Question

User-1844898522 posted

Hello Masters:

Can someone point me in the right direction on this one please!? I need help DateTimePicker in ASP.Net GridView no work properly, date picker just work in the firt row. My code is below. I would be really grateful for an help. Thank you.

show problem

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>  
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
    <link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns = "false">
    <Columns>
    <asp:BoundField DataField = "PName" HeaderText = "PName" />
    <asp:TemplateField HeaderText = "BDate">
    <ItemTemplate>
        <asp:TextBox ID="bDate" runat="server" ReadOnly = "true" class = "Calender"></asp:TextBox>
    <script type="text/javascript">
        //$('[id$=bDate]').datepicker({ format: 'yyyy-mm-dd', uiLibrary: 'bootstrap4' });
 
        $(".Calender").datepicker({ format: 'yyyy-mm-dd', uiLibrary: 'bootstrap4' });
    </script>
    </ItemTemplate>
    </asp:TemplateField>
    </Columns>
    </asp:GridView>
    </form>
</body>
</html>

--------------

using System;
using System.Data;
 
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("PName");
        dt.Columns.Add("BDate");
        dt.Rows.Add();
        dt.Rows.Add();
        dt.Rows.Add();
        dt.Rows.Add();
        dt.Rows.Add();
        dt.Rows.Add();
        dt.Rows[0]["PName"] = "Adams";
        dt.Rows[1]["PName"] = "Tom";
        dt.Rows[2]["PName"] = "Jack";
        dt.Rows[3]["PName"] = "Omar";
        dt.Rows[4]["PName"] = "Hashim";
        dt.Rows[5]["PName"] = "Solomon";
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}

Tuesday, September 3, 2019 9:29 PM

All replies

User-719153870 posted

Hi TahaSuliman,

date picker just work in the firt row.

To figure this out, you will need to put your JS code in the right place which means after you rendered your gridview. Please refer to below code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>  
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
    <link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns = "false">
    <Columns>
    <asp:BoundField DataField = "PName" HeaderText = "PName" />
    <asp:TemplateField HeaderText = "BDate">
    <ItemTemplate>
        <asp:TextBox ID="bDate" runat="server" ReadOnly = "true" class = "Calender"></asp:TextBox>
    </ItemTemplate>
    </asp:TemplateField>
    </Columns>
    </asp:GridView>
    </form> 
<script type="text/javascript">
$(".Calender").datepicker({ format: 'yyyy-mm-dd', uiLibrary: 'bootstrap4' }); 
</script>
</body>
</html>

HOWEVER, i won't suggest you to modify it, at least not only this part.

Becauese, you can see after you update your code like i suggested above, you browse your page and pick a date in one of your textboxes, your browser will literally crashing slowly.

This is caused by the <script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script> i guess.

Thus, i suggest you can just choose other datepicker rather than the gijgo one. For example, this one from w3schools is fine or this jQuery UI datepicker.

In this case, please refer to below:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
            <Columns>
                <asp:BoundField DataField="PName" HeaderText="PName" />
                <asp:TemplateField HeaderText="BDate">
                    <ItemTemplate>
                        <asp:TextBox ID="bDate" runat="server" ReadOnly="true" class="Calender"></asp:TextBox>

                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <asp:TextBox ID="TextBox1" runat="server" ReadOnly="true" class="Calender"></asp:TextBox>
    </form>
    <script type="text/javascript">
        $(".Calender").datepicker({ format: 'yyyy-mm-dd', uiLibrary: 'bootstrap4' });
    </script>
</body>
</html>

Best Regard,

Yang Shen

Wednesday, September 4, 2019 5:16 AM

0

Sign in to vote

User-1844898522 posted

Yang Shen

Best Regard,

Yang Shen

Thank you for the beautiful solutions and for your precious advice, it seems that I will work with the tool you showed me.

Wednesday, September 4, 2019 10:04 AM
0

Sign in to vote

User475983607 posted

Place the script after the HTML form there is no reason to run the script for each row as you are using a class selector. Secondly, you've set the text input to read-only. It is not clear how you got the first input to work. I suspect the calendar image has something to do with toggling read-only?

Wednesday, September 4, 2019 11:43 AM

Asked by:

Gijgo DatePicker in a Gridview Problem

Question

All replies

Yang Shen