Asp.Net UpdatePanel in Gridview Jquery DatePicker

Question

<asp:UpdatePanel ID="asd" runat="server">
    <ContentTemplate>
    <asp:GridView ID="gvUpdate" runat="server">
    <Columns>
    <asp:TemplateField HeaderText="DATE">
    <ItemTemplate>
    <asp:Label ID="lblDate" runat="server" Text='<%# Eval("DATE","{0:dd.MM.yyyy}")%>'></asp:Label>
    </ItemTemplate>
    <EditItemTemplate>
    <asp:TextBox ID="txtDate" runat="server" Text='<%# Eval("DATE","{0:dd.MM.yyyy}") %>'></asp:TextBox>
    </EditItemTemplate>
    </asp:TemplateField>
    </Columns>
    </ContentTemplate>

i want jquery datepicker for "txtDate" how to make ?

Thank you...

Aristos · Accepted Answer · 2013-04-26T02:03:42.153

15

The most simple way is to place a class on your Date Text box, and just use jQuery to add the datepicker...

<EditItemTemplate>
<asp:TextBox ID="txtDate" CssClass="clDate" 
  runat="server" Text='<%# Eval("DATE","{0:dd.MM.yyyy}") %>'></asp:TextBox>
</EditItemTemplate>

and the javascript for init this is: $(".clDate").datepicker(); but the update panel is need again initialization after the Update, so the final code will be:

<script type="text/javascript"> 
   // if you use jQuery, you can load them when dom is read.
   $(document).ready(function () {
       var prm = Sys.WebForms.PageRequestManager.getInstance();    
       prm.add_initializeRequest(InitializeRequest);
       prm.add_endRequest(EndRequest);

       // Place here the first init of the DatePicker
       $(".clDate").datepicker();
    });        

    function InitializeRequest(sender, args) {
       // make unbind to avoid memory leaks.
       $(".clDate").unbind();
    }

    function EndRequest(sender, args) {
       // after update occur on UpdatePanel re-init the DatePicker
       $(".clDate").datepicker();
    }
</script>

Update:About the Sys. -> http://msdn.microsoft.com/en-us/library/bb311028.aspx

edited Apr 26 '13 at 02:03

answered Jul 27 '10 at 08:13

Aristos

66,005
16
114
150

@Aristos Error: Microsoft JScript runtime error: 'Sys' is undefined pls help me – Chicharito Jul 27 '10 at 08:28
@oraclee do you have place the ScriptManager ? (because of your update panel you need to have it) – Aristos Jul 27 '10 at 08:40
not work Microsoft JScript runtime error: 'Sys' is undefined – Chicharito Jul 27 '10 at 08:45
@oraclee you need to place the Sys. after the scriptManager !!!, or make it load when page load. See the example here : http://msdn.microsoft.com/en-us/library/bb311028.aspx – Aristos Jul 27 '10 at 08:58
This works great in an update panel on it's own, but how do I get it to work in a detailsview inside an update panel? – Nov 06 '10 at 18:05
The same way, this is working even if it is inside a detailsview. The updatePanel just need the EndRequest to reinitialize it. – Aristos Nov 03 '11 at 23:19
@Aristos - Great explanation, saved the same problem I had. Works perfectly, and well explained :) Thanks! – Ryan S Jul 11 '12 at 09:35

Asp.Net UpdatePanel in Gridview Jquery DatePicker

1 Answers1

Linked

Related