Edit mode in grid view can't find the textbox id using getElementById()

Question

In my gridview I have a date column and in edit mode, I place there a date picker. The date picker is in javascript which uses a getElementById() to get/set the value on the textbox.

This is the code of my gridview with the date picker if in edit mode:

<asp:TemplateField HeaderText="Effective Date" HeaderStyle-CssClass="allWidth160" ItemStyle-HorizontalAlign="Center" ControlStyle-CssClass="txtCommon allWidth80 txtCenter">
     <ItemTemplate>
          <asp:Label runat="server" ID="lblEffDate"  Text='<%#DataBinder.Eval(Container.DataItem, "EFF_DATE").ToString()%>'>
          </asp:Label>
     </ItemTemplate>
     <EditItemTemplate>
          <asp:TextBox ClientIDMode="Static" ID="EffDate" runat="server" Text='<%#Bind("EFF_DATE") %>' />
          <img alt="Calendar" src="../Images/DateTimePickerImg/cal.gif" style="cursor: pointer;" onclick="javascript: NewCssCal('txtEffDate')" />
     </EditItemTemplate>
</asp:TemplateField>

I included the javascript file in the HEAD:

<script src="../Library/DateTimePicker.js" type="text/javascript"></script>

When I click the image calendar it has an error somewhere in DateTimePicker.js file which leads to this code:

exDateTime = document.getElementById(pCtrl).value;

Where pCtrl is txtEffDate.

Error: Object required

It seems that it cannot see the object txtEffDate thats why it throws that error. I think that when it is in edit mode, it only show its drawing (the textbox appear) in the browser but its ID is still missing. Any thoughts? TIA

see the generated id of the textbox in the html on the browser. — Priyank, Dec 18 '13 at 08:28
You can either right-click/view source (in nearly any browser) or right-click directly on the textbox and inspect element (in chrome or firefox). — vinczemarton, Dec 18 '13 at 08:33
Oh I see. The ID of the textbox for the date picker is generated automatically so the paramater (txtEffDate or EffDate) is wrong. ID is like **grdViewEmpList_ctl02_EffDate**. Now, what code should I put in the parameter to get the right autogenerated ID of the textbox? — Stuart, Dec 18 '13 at 08:45
@Satpal. Error sir, **Compiler Error Message: CS0103: The name 'EffDate' does not exist in the current context** — Stuart, Dec 18 '13 at 08:58

score 1 · Accepted Answer · answered Dec 18 '13 at 08:56

1

make a new function and pass this .Like this.

 onclick = "javascript: NewCssCalClick(this)"

And in js make a new function NewCssCalClick.Like this.

function NewCssCalClick(sender) {

    var id = $(sender).prev()[0].id;
    NewCssCal(id);
}

Note: You need to add jquery plugin for $ and prev to work

answered Dec 18 '13 at 08:56

Priyank

1,353
9
13

Same result sir. Error: **Object required** – Stuart Dec 18 '13 at 09:06
jQuery, you mean like: `jquerymin.js`? – Stuart Dec 18 '13 at 09:08
i have just edited the code and put [0] after prev. Check it again. also alert the id and what is it. – Priyank Dec 18 '13 at 09:09
read this answer for adding jquery file.You can skip the UI and Css. http://stackoverflow.com/questions/20511635/using-jquery-plugin-in-aspx-page/20512316#20512316 – Priyank Dec 18 '13 at 09:11
This one did the job. Cheers sir :) – Stuart Dec 18 '13 at 10:09

score 0 · Answer 2 · answered Dec 18 '13 at 08:35

0

If you are using jQuery you can use

 $("[id*='EffDate']")

 exDateTime = $("[id*='EffDate']").val();

to get the textbox. As you will have only one text-box at a time. Because you might be editing only one row at a time.

answered Dec 18 '13 at 08:35

शेखर

17,412
13
61
117

It is javascript sir. I need to put the right ID in the parameter of `onclick="javascript: NewCssCal('txtEffDate')"` as I mention in the other comments. – Stuart Dec 18 '13 at 08:47

Sunil Gudivada · Answer 3 · 2013-12-18T09:35:53.663

0

modify the edit item template like below:

add id="imgCalander" runat="server" attributes to calander image and onclick attribute like onclick="fnShowCalander(this.id);"

in javascript define new function like below:

    function fnShowCalander(senderID) {
        NewCssCal(senderID.replace('imgCalander', 'EffDate'));
    }

</script>

edited Dec 18 '13 at 09:35

answered Dec 18 '13 at 09:30

Sunil Gudivada

184
9

Edit mode in grid view can't find the textbox id using getElementById()

3 Answers3