ASP.NET Add Jquery Datepicker to a Gridview textbox (on editing gridview)

Question

My question seems to be a little hard to understand but is pretty simple and I'm sure the solution is pretty simple too.

I have one Gridview that can Edit and Update. We all know that when we click on edit if the column is setted to ReadOnly = "True" a default Textbox control will appear...

I can return values from that Textbox's dynamically created by click on Edit button of Gridview, that's all good...

My question is: I want add the javascript code to that dynamically textbox created when the edit button is clicked inside the gridview.

This is the javascript code to a Datepicker show when a textbox is clicked:

<head runat="server">

<link rel="Stylesheet" type="text/css" href="css/jquery.datepick.css" />
<script type="text/javascript" src="js/jquery.datepick.js"></script>

<script type="text/javascript" language="javascript">
    $(function () {    
        $('#Textbox_Name').datepick({ dateFormat: 'dd/mm/yyyy' });            
    });
</script>
</head>

Now, Instead of put the textbox name on that code first i want know the name of my gridview edit textbox dynamically created and then show the datepicker on that textbox

score 1 · Answer 1 · answered Jul 19 '12 at 11:31

1

Handle the RowCreated event:

protected void grid_RowCreated(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowState == DataControlRowState.Edit)
    {
        var textBox = e.Row.FindControl("myTextBox") as TextBox;
        ClientScript.RegisterStartupScript(this.GetType(), "datepick", 
        "$(function () { $('#" + textBox.ClientID + "').datepick({ dateFormat: 'dd/mm/yyyy' });  })", true);
    }
}

answered Jul 19 '12 at 11:31

Amiram Korach

13,056
3
28
30

Thank you so much Amiram Korach, you made my day! Solved – B1GB0Y Jul 19 '12 at 13:46
@B1GB0Y Accept and vote for the answer that help you, especial if make it work. – Aristos Jul 19 '12 at 13:49

score 1 · Answer 2 · edited May 23 '17 at 12:15

The easy way here is to add a css class name to your editor and then applies the datepick to all editors that have this class as

<script type="text/javascript" language="javascript">
    $(function () {
        $('.className').datepick({ dateFormat: 'dd/mm/yyyy' });
    });
</script>

See also this question that have a solution on that including the update panel: Asp.Net UpdatePanel in Gridview Jquery DatePicker

score 0 · Answer 3 · answered Mar 22 '13 at 21:29

I got mine to work like this:

(RowDataBound event)

if (e.Row.RowType == DataControlRowType.DataRow)
{
   TextBox tbOne = e.Row.FindControl("txtMyTextBox") as TextBox;
   if (tbOne != null)
   {
       string js = "$(function() { $('#" + tbOne.ClientID + "').datepicker();  });";
       ClientScript.RegisterStartupScript(this.GetType(), "DatePickJS_" + Guid.NewGuid().ToString("N"), js, true);
   }
}

ASP.NET Add Jquery Datepicker to a Gridview textbox (on editing gridview)

3 Answers3