Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 674
  • Last Modified:

How to have a calendar popup in gridview control column in edit mode?

Hi,I use VS2012.
In the last column of my gridview, it's a date column.  If user click on the Edit button, Autogenerated by gridview, is it possible to have a calendar pop up for selecting date when user clicks on the last date column in Edit mode?  How to implement that?
thank you.
0
lapucca
Asked:
lapucca
  • 22
  • 15
1 Solution
 
leakim971PluritechnicianCommented:
$("#<%= GridView1.ClientID %>").on("click", "tr td:last-child text:last", function() {
        $(this).datepicker();
        $(this).datepicker("show");
});

Open in new window

0
 
lapuccaAuthor Commented:
Hi,
Need help understanding your code and how to modify it for my program.  I think is is jquery script but do I put in the header section in <script> tags? or is it in the aspx page?

GridView1 is to replaced it with my gridview name?  What about ClientID?  What is that?  Anything else I need to replace for my code to work?

And the gridview is databind with a datasource so this will put whatever user selects in the datepicker to the column?

  Thank you.
0
 
leakim971PluritechnicianCommented:
Yes GridView1 is in my code the ID of the GridView

to use it in your page, be sure to have jQuery plugin

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
    $("#<%= GridView1.ClientID %>").on("click", "tr td:last-child text:last", function() {
        $(this).datepicker();
        $(this).datepicker("show");
    });
});
</script>

Open in new window


all about client id :
http://msdn.microsoft.com/en-US/library/system.web.ui.control.clientid(v=vs.110).aspx
and no, there's no wizard in the box to bind automatically with the datasource
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
lapuccaAuthor Commented:
I see in VS Intellisense there is a ClientID.  Am I supposed to get that?  Do I need to replace the ClientID in your code with a certain ClientID?  Thank you.
0
 
lapuccaAuthor Commented:
Also, I need to allow users to be able to select date and time for this.  Thank you.
0
 
leakim971PluritechnicianCommented:
did you try the code and understand it ?
0
 
lapuccaAuthor Commented:
I put the ref to the jquery in the Site master file header section.  
I then put the script code block in the aspx file inside the </asp:Content>.  The project compiles fine but nothing happens when i click on the cell where the date columns is defined, this is after I click the Edit button and the gridview control, one of the row, is in edit mode.
No, I don't know how the selector works here.  I get the gridview name or ID.  but how does it know or how does it select  to pop up the calendar only when I click on the date column. I don't see how it's specified int he jquery script.  Maybe that where the client ID comes in?  Where and how do I define that?
Thank you
0
 
leakim971PluritechnicianCommented:
between line 5 and 6, put this :
   alert("found : " + $("#<%= GridView1.ClientID %>").length + " griview(s)");

if you get the message : found 0 gridview(s)

try this :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
    $(document).on("click", "tr td:last-child text:last", function() {
        $(this).datepicker();
        $(this).datepicker("show");
    });
});
</script>

Open in new window

0
 
lapuccaAuthor Commented:
I got this pop up message so it finds the gridview control no problem.  I also figure out the code is letting jquery select the gridview using the asp.net redered client ID for the gridview control.  Very cool!
found: 1 gridview(s)
However, when I click the Edit button on the grid then click on the last column of the edit row which is a datetime type, no calendar pop up.  I also noticed there are red error count on the bottom right of the Firefox browser that increase by 2 each time I click on the cell.   I click on that and took a screen shot attaching it here.  I then click on the debug of the firebug, break point at the script, " $(this).datepicker();"  then clicking on the cell again and that break point was never hit.  

This is what I have in code
<script type="text/javascript">
    jQuery(function ($) {
        alert("found : " + $("#<%= GridView1.ClientID %>").length + " griview(s)");
        $(document).on("click", "tr td:last-child text:last", function () {
            $(this).datepicker();
            $(this).datepicker("show");
        });
    });
</script>
</asp:Content>
0
 
lapuccaAuthor Commented:
I see query is selecting the gridview and then on the Click event of a table row's last column but what is "text:last" is?
and what if users click on the last column but is not in Edit mode, would that also trigger the script?
I can get the client ID of the grid control in C# in Debug mode.  Maybe try using that id directly?
0
 
leakim971PluritechnicianCommented:
how are you loading the pages ?
you need an internet connexion
try to replace (third times) : src="//
by : src="https://
0
 
leakim971PluritechnicianCommented:
if you got an error on  $(this).datepicker();
that mean the click work fine but jquery.datepicker function is not find
which mean not loaded by any reason in your context
0
 
lapuccaAuthor Commented:
Yes, i have Internet connection.  I'm running this from VS2012 in Debug mode.  what do you mean "replace (third times) : src="// by : src="https://"?  You mean the url?  
I don't know where I'm getting the error.  I only see in Firefox browser, right lower corner in red number count of error.  And no pop up calendar.
The VS project has jQuery reference in the Content and Scripts.  But I still copy your reference to jquery in the head tags of the Site.master file.  The actual script code I copy and paste to end of the aspx page where the grid control is.

Okay, in C# and in Firebug, the grid client ID is evaluated correctly.  However, I set break points in Firefox on every line of the script and it doesn't get hit when I click on the cell in Edit mode.  It does hit the last braces when when the alert box is displayed, that's all.

I removed your reference to jquery library.  I also put in the grid's client id into the jquery script, moved it to the top of the page Content section and still no pop up calendar.  Where is the Page Content section in aspx I don't see it.  Does it matter that i put the script code inside of the <asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">  ?

I do appreciate you tirelessly helping me.   This is the only last thing I need to do for this project.  I tried changing that column to template field instead of boundfield but it's too cumbersome for users to enter dates that way and complicate regualar express, field format...  Anyway, I can't get it to work till late last night.
0
 
leakim971PluritechnicianCommented:
The VS project has jQuery reference in the Content and Scripts.

Which version?
Removing mine it's OK but you still need to add datepicker which is from jQuery UI.
jQuery UI is a jQuery plugin, be sure to add one compatible with your jQuery version with its CSS
0
 
lapuccaAuthor Commented:
I added https to the jQuery refereces that you provided but that didn't bring up the calendar either.

I've tried both yours and from VS.  I drag and dropped to site.master file from the refereces as follow:
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="Scripts/jquery-ui-1.8.24.min.js"></script>

Using either yours or VS jQuery reference didn't bring up the calendar.  Should I attach a page source code from the FF browser?
0
 
lapuccaAuthor Commented:
I'm going to check to make sure my FF browser allows javascript and popup in the setting.
0
 
lapuccaAuthor Commented:
Odd, when I enter this url, from your jQuery ref link, https//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js
in the browser it doesn't bring up the js file.
0
 
leakim971PluritechnicianCommented:
semi colons are missing << : >>

https://
not
http//
0
 
lapuccaAuthor Commented:
Typo, my bad. They were missing : after https
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

However, after correcting that, the calendar still not popping up.
0
 
leakim971PluritechnicianCommented:
on chrome or firefox, do a right click to the page, aound the gridview, choose view source and post it here
0
 
lapuccaAuthor Commented:
In FF, the Block Popup windows checkbox is not checked.  I don't find in FF to enable Javascript.  I think by default it's enabled.  I think FF removed the option to disable javascript?
0
 
lapuccaAuthor Commented:
What about testing this using a button?  I'm going to try to add a button to my page and then try wiring the jquery to pop up calendar.  Will need your help to make sure I'm doing this correct.  This at least will let me know if my page is having problem loading up the calendar or is the problem just loading it from the gridview control.  i will work on that test now.
0
 
leakim971PluritechnicianCommented:
on firefox, do a right click on the gridview and choose "inspect element"
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector
0
 
lapuccaAuthor Commented:
I use the code to test the button, please see if that is correct.  But no pop up calender either.  After  I click the button the page reload, and bottom left of browser says "Localhost reload".
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <script type="text/javascript">
        jQuery(function ($) {
            $("#<%= btnTest.ClientID %>").on("click", function () {
        $(this).datepicker();
        $(this).datepicker("show");
    });
});
</script>
0
 
leakim971PluritechnicianCommented:
Post the source page
0
 
lapuccaAuthor Commented:
I used this script below for when page is loaded but no calendar.  Do you have any recommendation on testing what is going wrong here?  It doesn't seem to matter from any page it's not popping up.  Next i will try a new project and see if I can get it to come up.

 <script type="text/javascript">
     $(document).ready(function () {
         $(this).datepicker();
         $(this).datepicker("show");
     });
</script>
0
 
leakim971PluritechnicianCommented:
Your code try to creatz a datepicher over thé document....
Not sûre why you dont want to post your page source from the browser...
0
 
leakim971PluritechnicianCommented:
Try the following code, here a demo BASED on it :  http://jsfiddle.net/2zvwsgx3/

jQuery(function($) {
    $("#<%= GridView1.ClientID %>").on("click", "tr td:last-child :text", function() {
        $(this).datepicker();
        $(this).datepicker("show");
    });
});

Open in new window

0
 
lapuccaAuthor Commented:
Okay, I created a asp.net C# Web Form project.  All I did is just added the jquery reference and the script to pop up the calendar when document is loaded but nothing happens.  Please take a look. I'm attaching the solution file.  

Can't upload the file because of extension restriction.  I put it on dropbox, https://www.dropbox.com/s/ecnxv5yje7uv5t2/TestCalendar.7z?dl=0
0
 
leakim971PluritechnicianCommented:
I don't want the source code or a file, just a copy paste of what you've in your page

1 - Open your browser to the page
2 - Do a right click on the GridView1 once the page is loaded totally
3 - Choose "Inspect Element"
4 - Locate the Gridview1 or any parent, the full page (body tag) is acceptable if you can't find it
5 - Do a right click on the HTML element (GridView1 table tag or BODY tag)
6 - Choose copy outerElement
7 - Paste it here
0
 
lapuccaAuthor Commented:
Wow, the demo looks really nice.  However, I don't know why I can't it to work in asp.net.
0
 
lapuccaAuthor Commented:
I right click to insepct item with Firebug.  Right click on the table tag and it only has copy InnerHtml.  I don't see copy outerElement.  Attached is the html.
grid-inner.html
0
 
lapuccaAuthor Commented:
Just found how to save the outer html.  I have to select Inspect element(O) and not inspect with Firefox.  Attached is the outer html but it looks the same as the inner html.  Thank you
outer.html
0
 
lapuccaAuthor Commented:
Attached is the page source from FF.  Thank you.
page-source.html
0
 
leakim971PluritechnicianCommented:
check this :  http://jsfiddle.net/2zvwsgx3/12/
jQuery(function($) {
    $("#GridView1").on("click", "tr td:last-child", function() {
        $textbox = $("<input type='text' style='width:0px;'/>");
        $textbox.appendTo(this);
        var string_date = $(this).text();
        var time_part = string_date.split(" ")[1] + string_date.split(" ")[2];    
        $textbox.datepicker({
            defaultDate: string_date,
            onClose:function() { 
                $(this).closest("td").text($(this).val()+ " " + time_part);
            }
        });
        $textbox.datepicker("show");
    });
});

Open in new window

0
 
lapuccaAuthor Commented:
This is crazy but still no calendar for me.  I tried both below but both doesn't work.
 $("#GridView1").on("click", "tr td:last-child", function () {
$("#<%= GridView1.ClientID %>").on("click", "tr td:last-child", function () {

I took another copy of the page source, this time I first click the Edit button, click on the Date/time text box then take the copy of the source code.

Also, I notice the error at the bottom right corner of the FF browser now increment by 1 when I click on that cell.  It was incrementing by 2 before.

Thank you.  If I can give you a million point just for what you're done so far I would.
page-source2.html
0
 
lapuccaAuthor Commented:
Leakim,
I found the problem but not yet the answer.  I think your jQuery will work once I figure out how to resolve the stupid asp.net Scripting Bundle that came with asp.net Web Form Application Template solution.  You see, it came with a bundle of js reference.  I tried using the ref you gave me only, or just their bundle only, either doesn't work but for sure that's what's causing the problem.  
I built a test project using asp.net Empty asp.net application template.  Sure enough, I put a textbox and clicking on it would make the datepicker calender pop up, which I haven't been able to do for a week when there is a scripting bundle in the site.master.  
Thank you so much for all your help and appreciate all your effort and patience.  This scripting bundle is also new for me since I haven't coded for about 4 years.

  <asp:ScriptManager runat="server">
        <Scripts>
            <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=272931&clcid=0x409 --%>
            <%--Framework Scripts--%>
           
            <asp:ScriptReference Name="MsAjaxBundle" />
            <asp:ScriptReference Name="jquery" />
            <asp:ScriptReference Name="jquery.ui.combined" />
            <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
            <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
            <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
            <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
            <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
            <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
            <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
            <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
            <asp:ScriptReference Name="WebFormsBundle" />
            <%--Site Scripts--%>

        </Scripts>
    </asp:ScriptManager>
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 22
  • 15
Tackle projects and never again get stuck behind a technical roadblock.
Join Now