Solved

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

Posted on 2014-12-20
37
391 Views
Last Modified: 2014-12-27
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
Comment
Question by:lapucca
  • 22
  • 15
37 Comments
 
LVL 82

Expert Comment

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

Open in new window

0
 

Author Comment

by:lapucca
ID: 40511368
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40511533
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
 

Author Comment

by:lapucca
ID: 40517722
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
 

Author Comment

by:lapucca
ID: 40517758
Also, I need to allow users to be able to select date and time for this.  Thank you.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40517950
did you try the code and understand it ?
0
 

Author Comment

by:lapucca
ID: 40518085
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40518367
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
 

Author Comment

by:lapucca
ID: 40518644
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
 

Author Comment

by:lapucca
ID: 40518652
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40518654
how are you loading the pages ?
you need an internet connexion
try to replace (third times) : src="//
by : src="https://
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40518655
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
 

Author Comment

by:lapucca
ID: 40518740
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40518750
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
 

Author Comment

by:lapucca
ID: 40518850
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
 

Author Comment

by:lapucca
ID: 40518857
I'm going to check to make sure my FF browser allows javascript and popup in the setting.
0
 

Author Comment

by:lapucca
ID: 40518860
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40518866
semi colons are missing << : >>

https://
not
http//
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:lapucca
ID: 40518867
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40518869
on chrome or firefox, do a right click to the page, aound the gridview, choose view source and post it here
0
 

Author Comment

by:lapucca
ID: 40518884
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
 

Author Comment

by:lapucca
ID: 40518889
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40518891
on firefox, do a right click on the gridview and choose "inspect element"
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector
0
 

Author Comment

by:lapucca
ID: 40518899
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40518904
Post the source page
0
 

Author Comment

by:lapucca
ID: 40518913
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40518917
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40518924
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
 

Author Comment

by:lapucca
ID: 40518937
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40518952
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
 

Author Comment

by:lapucca
ID: 40518953
Wow, the demo looks really nice.  However, I don't know why I can't it to work in asp.net.
0
 

Author Comment

by:lapucca
ID: 40519013
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
 

Author Comment

by:lapucca
ID: 40519025
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
 

Author Comment

by:lapucca
ID: 40519053
Attached is the page source from FF.  Thank you.
page-source.html
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 40519077
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
 

Author Comment

by:lapucca
ID: 40519110
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
 

Author Closing Comment

by:lapucca
ID: 40520147
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

This article discusses how to create an extensible mechanism for linked drop downs.
Performance in games development is paramount: every microsecond counts to be able to do everything in less than 33ms (aiming at 16ms). C# foreach statement is one of the worst performance killers, and here I explain why.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now