how to use datetime picker in nested grid view ASP.net using JQuery c#

Question

I have implemented date time picker in ASP.net textbox, but when i use this in gridview or nested gridview it fails..

what I want is.. through this JQuery Function

$(function () {
    $("#<%= txtDate.ClientID %>").datepicker();
});

show date time picker when click on nested grid view given sample..

<asp:GridView ID="GV_Proc" runat="server" AutoGenerateColumns="false" CssClass="Grid"
DataKeyNames="Procedure_Code" OnRowDataBound="GV_ProcOnRowDataBound" 
    onselectedindexchanged="gvProc_SelectedIndexChanged" Width="512px">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>          
                <img alt = "" style="cursor: pointer" src="../images/plus.png"  />             
                <asp:Panel ID="pnldiagtype" runat="server" Style="display: none">
                    <asp:GridView ID="gvProctype" runat="server" AutoGenerateColumns="false" CssClass = "ChildGrid">
                        <Columns>
                            <asp:TemplateField HeaderText="Select" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="">
                                <ItemTemplate>
                                    <asp:CheckBox ID="chk_Select" runat="server"/>
                                </ItemTemplate>
                                <ItemStyle HorizontalAlign="Center" />
                                <ItemStyle Width="8%" />
                            </asp:TemplateField>
                            <asp:BoundField ItemStyle-Width="20%" DataField="Procedure_Type_ID" HeaderText="Procedure Type Id" />
                            <asp:BoundField ItemStyle-Width="20%" DataField="Procedure_Code" HeaderText="Procedure Code" />
                            <asp:BoundField ItemStyle-Width="100%" DataField="Procedure_Type_Desc" HeaderText="Description"  />

                            <asp:TemplateField HeaderText="Remarks" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="">
                                <ItemTemplate>
                                    <asp:TextBox ID="txt_Remarks" CssClass=".text" runat="server"></asp:TextBox>
                                </ItemTemplate>
                                <ItemStyle HorizontalAlign="Center" />
                                <ItemStyle Width="8%" />
                            </asp:TemplateField>                           

                            <asp:TemplateField HeaderText="Date" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="">
                                <ItemTemplate>                                
                                    <asp:TextBox ID="txtDate" runat="server" />                                   
                                    <img src="../calender.png" />                                    
                                </ItemTemplate>
                                <ItemStyle HorizontalAlign="Center" />
                                <ItemStyle Width="8%" />
                            </asp:TemplateField>
                        </Columns>
                    </asp:GridView>
                </asp:Panel>
            </ItemTemplate>
        <ItemStyle Width="8%" />
    </asp:TemplateField>
    <asp:BoundField ItemStyle-Width="150px" DataField="Procedure_Code" HeaderText="Procedure ID"/>
    <asp:BoundField ItemStyle-Width="150px" DataField="Procedure_Description" HeaderText="Procedure Name" />
</Columns>

When I tried to build this, it shows

The name 'txtDate' does not exist in the current context

Any help will be appriciatable

when I used same function without grid view, run successfully..

I am using following script and style sheet

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.0.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

UPDATE:

<script type="text/javascript">

$(document).ready(function () {
    $('.datepicker-text').datepicker();
});

and update textBox property as

<asp:TextBox ID="txtDate" runat="server" CssClass="datepicker-text"/>

score 0 · Answer 1 · answered Mar 18 '16 at 07:48

0

datepicker should be assigned when the DOM is ready, so that the said object exists.

Put a css class on your date textbox, use it for selecting the textboxes for datepicker as there can be multiple rows.

<asp:TextBox ID="txtDate" runat="server" CssClass="datepicker-text"/>

Then assign datepicker on document.ready as

$('.datepicker-text').datepicker();

answered Mar 18 '16 at 07:48

wonderbell

1,126
9
19

Can you post the changes you made and the exact errors you are getting. – wonderbell Mar 18 '16 at 08:40
Alright, did you check in the browser console, is there any error? Can you try to debug the statement where applying` datepicker`, does selector `$('.datepicker-text')` has any length? – wonderbell Mar 18 '16 at 09:29

score 0 · Answer 2 · answered Mar 18 '16 at 08:10

0

Why are you using multiple jquery. You must use only one jquery (min in production):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.0.js"></script>

Then you talk about a build error. Can you post the server code? You can't get txtDate using txtDate but you have to use FindControl("txtDate") starting from your gridviewrow

answered Mar 18 '16 at 08:10

Emanuele

648
12
33

when i don't use 4th one script, this doesn't expand gridview row.. that's why using this. – Faraz Ahmed Mar 18 '16 at 09:16
It's wrong! You must use only one jquery. If you need multiple version there is a script to support them – Emanuele Mar 18 '16 at 10:31
so how we support them? any idea about that? – Faraz Ahmed Mar 18 '16 at 11:54
You should not use... http://stackoverflow.com/questions/1566595/can-i-use-multiple-versions-of-jquery-on-the-same-page – Emanuele Mar 18 '16 at 13:25

score -1 · Answer 3 · answered Mar 18 '16 at 08:53

-1

How about this. Take a textbox and have a textmode attribute and specify the class

<asp:TextBox ID="txtDate" runat="server" TextMode="datepicker-text"/>

As there are multiple script tags, I think it is conflicting with the others, so call it as

$(function () {
            var jQuery_1_11_4 = $.noConflict(true);
            jQuery_1_11_4(".datepicker-text").datepicker();
        });

answered Mar 18 '16 at 08:53

Srinu A

21
2
11

@user6002727 Have you tried mine? Is it working for you? – Srinu A Mar 18 '16 at 11:08
yes I have tried , but build error in **TextMode** property came. – Faraz Ahmed Mar 20 '16 at 15:02
Use the TextMode property to specify whether a TextBox control is displayed as a single-line, multiline, or password text box. Reference :https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.textbox.textmode%28v=vs.90%29.aspx#Anchor_2 – Faraz Ahmed Mar 21 '16 at 05:50

how to use datetime picker in nested grid view ASP.net using JQuery c#

3 Answers3