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

Amiram Korach · Accepted Answer · 2012-07-19 11:31:01Z

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, 2012 at 11:31

Amiram Korach

13.3k3 gold badges32 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

B1GB0Y Over a year ago

Thank you so much Amiram Korach, you made my day! Solved

Aristos Over a year ago

@B1GB0Y Accept and vote for the answer that help you, especial if make it work.

Community · Accepted Answer · 2017-05-23 12:15:35Z

1

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

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Jul 19, 2012 at 11:34

Aristos

66.7k16 gold badges117 silver badges154 bronze badges

Comments

granadaCoder · Accepted Answer · 2013-03-22 21:29:11Z

0

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);
   }
}

answered Mar 22, 2013 at 21:29

granadaCoder

28.2k11 gold badges124 silver badges166 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related