How can i get Jquery UI datepicker to show up in asp.net gridview edit field

Question

I have a gridview inside an update panel, that is doing inline editing. When edit is clicked, I need on of the textboxes to be a Jquery UI datepicker;

I've tried class and id selectors, tried child selector but Jquery can't set the thing as a datepicker because the element isn't really on the page yet. So I tried adding a function to OnClientClick of the edit command and set the datepicker there but also doesn't seem to find the textbox. It always stays a regular textbox.

Any other way?

Answer 1

If the textbox is added in UpdatePanel, then you need to hook up to the end request.

// If my memory is good there was this pageLoad function that is 
// automatically called by the MS AJAX Framework when the DOM has finished loading
function pageLoad(sender, args) { 
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(
        function(sender, args) {
            $('your_textbox_selector').datepicker();
    }); 
}

If you have multiple update panels on your page you might need to tweak a little bit the end_request callback by checking the sender and args parameters, so that it attaches the datapicker only if the UpdatePanel that holds your GridView is triggered.