getElementById with edit mode of datagrid control

G

Gilles T.

How I can get element ID in the edit mode of datagrid control?

If I not in the edit mode, there are no problem.
<asp:TemplateColumn ItemStyle-CssClass="grid_column_width_3"
ItemStyle-HorizontalAlign="center" ItemStyle-VerticalAlign="top">
<ItemTemplate><%#
CType(Container.DataItem("DateStatut"),DateTime).ToString("yyyy-MM-dd")
%></ItemTemplate>
<EditItemTemplate>
<asp:TextBox width="80" CssClass="edit_item" id="txtDateStatut"
runat="server" Text='<%#
CType(Container.DataItem("DateStatut"),DateTime).ToString("yyyy-MM-dd")
%>'/>
<a href='javascript:showCalendar(frmForm.imgDateStatut,
document.getElementById("txtDateStatut"), "yyyy-mm-dd","",1)'><img
src="images/cal.gif" name="imgDateStatut" width="16" height="16" border="0"
align="middle"></a>
</EditItemTemplate>
</asp:TemplateColumn>

The command document.getElementById("txtDateStatut") don't working in edit
mode.
Tried frmForm.txtDateStatut but don't working also.

Please help me...

Thanks
 
A

Alessandro Zifiglio

hi Gilles,
the controls ID is not what you think it is --its a child control --the
datagrid autogenerates a unique id for this. Try to get it by classname
whereas to by ID is the only workaround i can think off the top of my head
;P

See the controls ID in the viewsource after running the page to test if this
is the case ;)

if this is the case you could work around it like this :

Private Sub dataGridManufacturer_ItemDataBound(ByVal sender As Object, ByVal
e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles
dataGridManufacturer.ItemDataBound
Dim DateStatus As TextBox
Dim HyperLink1 as HyperLink
If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType =
ListItemType.AlternatingItem Then
DateStatus = CType(e.Item.Cells(0).FindControl("txtDateStatus"),
TextBox)
HyperLink1 = = CType(e.Item.Cells(0).FindControl("linkShowDate"),
HyperLink)
DateStatus.ID
hyperlink1.NavigateUrl =
"javascript:showCalendar(frmForm.imgDernieresResolutions,
document.getElementById(""" & Datestatus.ID & """), ""yyyy-mm-dd"","""",1)"
End If
End Sub


<asp:TemplateColumn ItemStyle-CssClass="grid_column_width_3"
ItemStyle-HorizontalAlign="center" ItemStyle-VerticalAlign="top">
<ItemTemplate><%#
CType(Container.DataItem("DateStatut"),DateTime).ToString("yyyy-MM-dd")
%></ItemTemplate>
<EditItemTemplate>
<asp:TextBox width="80" CssClass="edit_item" id="txtDateStatut"
runat="server" Text='<%#
CType(Container.DataItem("DateStatut"),DateTime).ToString("yyyy-MM-dd")
%>'/>
<asp:HyperLink id="linkShowDate" runat="server"><img
src="images/cal.gif" name="imgDateStatut" width="16" height="16" border="0"
align="middle"></asp:HyperLink>
</EditItemTemplate>
</asp:TemplateColumn>


Ok, thats what i would do, however know that i have not tested this
code --but you do get the idea ;)
and also not that CType(e.Item.Cells(0).FindControl("txtDateStatus"),
TextBox) looks in cell zero on my code --look to see on which cell you have
the textbox and link button and then use the findcontrol there ;P
 
A

Alessandro Zifiglio

oops, trying to get it by classname is not the only workaround, that was a
typo error ;P

see the code for the other work around i think should work for you ;)
 
G

Gilles T.

Hi Alessandro,

Thanks you for your response. Now, I think understand but not working again.
This is my new codes:
Private Sub dataGridManufacturer_ItemDataBound(sender As Object, e As
System.Web.UI.WebControls.DataGridItemEventArgs)
Dim DateStatus As TextBox
Dim HyperLink1 as HyperLink
If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType =
ListItemType.AlternatingItem Then
DateStatus =
CType(e.Item.Cells(0).FindControl("txtDateStatut"),TextBox)
HyperLink1 =
CType(e.Item.Cells(0).FindControl("linkShowDate"),HyperLink)
hyperlink1.NavigateUrl
="javascript:showCalendar(frmForm.imgDernieresResolutions,document.getElemen
tById('" & Datestatus.ID & "'), 'yyyy-mm-dd','',1)"
End If
End Sub

<asp:TextBox width="80" CssClass="edit_item" id="txtDateStatut"
runat="server" Text='<%#
CType(Container.DataItem("DateStatut"),DateTime).ToString("yyyy-MM-dd")
%>'/>
<asp:HyperLink id="linkShowDate" runat="server"><img
src="images/cal.gif" name="imgDateStatut" width="16" height="16" border="0"
align="middle"></asp:HyperLink>

And there is the source generated:
<input name="_ctl0:grdCompagnieStatut:_ctl4:txtDateStatut" type="text"
value="2003-02-01" id="_ctl0_grdCompagnieStatut__ctl4_txtDateStatut"
class="edit_item" style="width:80px;" />
<a id="_ctl0_grdCompagnieStatut__ctl4_linkShowDate"
href="javascript:showCalendar(frmForm.imgDernieresResolutions,document.getEl
ementById('txtDateStatut'), 'yyyy-mm-dd','',1)"><img src="images/cal.gif"
name="imgDateStatut" width="16" height="16" border="0" align="middle"></a>

I have again document.getElementById('txtDateStatut') in the code!
What do you think?
Can you help me again?

Gilles T.
 
A

Alessandro Zifiglio

my apologies Gilles. I posted that too quickly. I should have known better.
You cannot rely on the controlID generated by the container for child
controls.
Here :

http://msdn.microsoft.com/library/d...n/html/vbconwebformscontrolidentification.asp
But what we can do is get this on the client after it is rendered.

Note this is the only way to do what you want and the easiest. I wrote a
small utlity funtion in javascript. what it does is get a reference to the
parent <tr> table row and then retrieve a collection of all textboxes in
that particular row. To find the correct textbox it then retrieves that
textbox with a css class name matching a particular class . So make sure you
suppy a specific class for your txtDateStatut textbox control. Make sure
this particular textbox is the only textbox with this classname in that row
;P
This is the only requirement --shouldnt be a problem. I have tested this and
it should work like a charm, crossbrowser ;)
for it to work :

<asp:TemplateColumn ItemStyle-CssClass="grid_column_width_3"
ItemStyle-HorizontalAlign="center" ItemStyle-VerticalAlign="top">
<ItemTemplate><%#
CType(Container.DataItem("DateStatut"),DateTime).ToString("yyyy-MM-dd")
%></ItemTemplate>
<EditItemTemplate>
<asp:TextBox width="80" CssClass="dateStatus" id="txtDateStatut"
runat="server" Text='<%#
CType(Container.DataItem("DateStatut"),DateTime).ToString("yyyy-MM-dd")
%>'/>
<a onclick="getTextBox(this.parentNode.parentNode);" href="#"><img
src="images/cal.gif" name="imgDateStatut" width="16" height="16" border="0"
align="middle"></a>
</EditItemTemplate>
</asp:TemplateColumn>

somewhere in your page add this javascript block, after retrieving the
correct textbox it calls your showCalender Function

<script type="text/javascript">
//<![CDATA[

function getTextBox(currentRow){
var i;
var childrenTextBoxes = currentRow.getElementsByTagName("input");
for (i = 0; i < childrenTextBoxes.length; i ++){
var childTextBoxItem = childrenTextBoxes;
childTextBoxItem = childrenTextBoxes;
if (childTextBoxItem.className == 'dateStatus'){
//alert(childTextBoxItem.id);
showCalendar(frmForm.imgDateStatut,childTextBoxItem, "yyyy-mm-dd","",1);
}//childTextBoxItem statement End
}//childrenTextBoxes for Loop End
}//getTextBox
//]]>
</script>
 
G

Gilles T.

Hi Alessandro!

Wow! Working very good! Good javascript sub!

But only a little small problem. In edit mode, <EditItemTemplate>, I have a
specific class for all textbox (color, etc...).
I don't can create a new class properties for each textbox date because I
have many textbox date.
Where I can set my class "edit_item"?

Thanks

Alessandro Zifiglio said:
my apologies Gilles. I posted that too quickly. I should have known better.
You cannot rely on the controlID generated by the container for child
controls.
Here :

http://msdn.microsoft.com/library/d...n/html/vbconwebformscontrolidentification.asp
But what we can do is get this on the client after it is rendered.

Note this is the only way to do what you want and the easiest. I wrote a
small utlity funtion in javascript. what it does is get a reference to the
parent <tr> table row and then retrieve a collection of all textboxes in
that particular row. To find the correct textbox it then retrieves that
textbox with a css class name matching a particular class . So make sure you
suppy a specific class for your txtDateStatut textbox control. Make sure
this particular textbox is the only textbox with this classname in that row
;P
This is the only requirement --shouldnt be a problem. I have tested this and
it should work like a charm, crossbrowser ;)
for it to work :

<asp:TemplateColumn ItemStyle-CssClass="grid_column_width_3"
ItemStyle-HorizontalAlign="center" ItemStyle-VerticalAlign="top">
<ItemTemplate><%#
CType(Container.DataItem("DateStatut"),DateTime).ToString("yyyy-MM-dd")
%></ItemTemplate>
<EditItemTemplate>
<asp:TextBox width="80" CssClass="dateStatus" id="txtDateStatut"
runat="server" Text='<%#
CType(Container.DataItem("DateStatut"),DateTime).ToString("yyyy-MM-dd")
%>'/>
<a onclick="getTextBox(this.parentNode.parentNode);" href="#"><img
src="images/cal.gif" name="imgDateStatut" width="16" height="16" border="0"
align="middle"></a>
</EditItemTemplate>
</asp:TemplateColumn>

somewhere in your page add this javascript block, after retrieving the
correct textbox it calls your showCalender Function

<script type="text/javascript">
//<![CDATA[

function getTextBox(currentRow){
var i;
var childrenTextBoxes = currentRow.getElementsByTagName("input");
for (i = 0; i < childrenTextBoxes.length; i ++){
var childTextBoxItem = childrenTextBoxes;
childTextBoxItem = childrenTextBoxes;
if (childTextBoxItem.className == 'dateStatus'){
//alert(childTextBoxItem.id);
showCalendar(frmForm.imgDateStatut,childTextBoxItem, "yyyy-mm-dd","",1);
}//childTextBoxItem statement End
}//childrenTextBoxes for Loop End
}//getTextBox
//]]>
</script>





Gilles T. said:
Hi Alessandro,

Thanks you for your response. Now, I think understand but not working again.
This is my new codes:
Private Sub dataGridManufacturer_ItemDataBound(sender As Object, e As
System.Web.UI.WebControls.DataGridItemEventArgs)
Dim DateStatus As TextBox
Dim HyperLink1 as HyperLink
If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType =
ListItemType.AlternatingItem Then
DateStatus =
CType(e.Item.Cells(0).FindControl("txtDateStatut"),TextBox)
HyperLink1 =
CType(e.Item.Cells(0).FindControl("linkShowDate"),HyperLink)
hyperlink1.NavigateUrl
Click to expand...
="javascript:showCalendar(frmForm.imgDernieresResolutions,document.getElemen
tById('" & Datestatus.ID & "'), 'yyyy-mm-dd','',1)"
End If
End Sub

<asp:TextBox width="80" CssClass="edit_item" id="txtDateStatut"
runat="server" Text='<%#
CType(Container.DataItem("DateStatut"),DateTime).ToString("yyyy-MM-dd")
%>'/>
<asp:HyperLink id="linkShowDate" runat="server"><img
src="images/cal.gif" name="imgDateStatut" width="16" height="16" border="0"
align="middle"></asp:HyperLink>

And there is the source generated:
<input name="_ctl0:grdCompagnieStatut:_ctl4:txtDateStatut" type="text"
value="2003-02-01" id="_ctl0_grdCompagnieStatut__ctl4_txtDateStatut"
class="edit_item" style="width:80px;" />
<a id="_ctl0_grdCompagnieStatut__ctl4_linkShowDate"
Click to expand...
href="javascript:showCalendar(frmForm.imgDernieresResolutions,document.getEl
ementById('txtDateStatut'), 'yyyy-mm-dd','',1)"><img src="images/cal.gif"
name="imgDateStatut" width="16" height="16" border="0"
Click to expand...
align="middle"> said:
I have again document.getElementById('txtDateStatut') in the code!
What do you think?
Can you help me again?

Gilles T.


if
this in
edit
Click to expand...
Click to expand...
 
A

Alessandro Zifiglio

Gilles, on the code i posted last, its looking for textboxes with className
of "dateStatus", you could have changed this to whatever className you
wanted to use in the javascript itself, however to simplify, now you can
pass a className string to the getTextBox sub, eliminating the one calender
popup for each textBox per row limit.. In the code sample below i'm passing
"edit_item" as the className to use --you should be able to pass any
className in this way. If you had more textboxes for whom you wanted to
popup your calender you can do so, by specifying a different
className ---Just make sure that in this row and not the whole grid in
itself, but just row --the className must be unique --otherwise it will
return the first textBox that matches this className. This is the second
change i made.
Glad you like it Gille :)


<asp:TemplateColumn ItemStyle-CssClass="grid_column_width_3"
ItemStyle-HorizontalAlign="center" ItemStyle-VerticalAlign="top">
<ItemTemplate><%#
CType(Container.DataItem("DateStatut"),DateTime).ToString("yyyy-MM-dd")
%></ItemTemplate>
<EditItemTemplate>
<asp:TextBox width="80" CssClass="edit_item" id="txtDateStatut"
runat="server" Text='<%#
CType(Container.DataItem("DateStatut"),DateTime).ToString("yyyy-MM-dd")
%>'/>
<a onclick="getTextBox(this.parentNode.parentNode,'edit_item');"
href="#"><img
src="images/cal.gif" name="imgDateStatut" width="16" height="16" border="0"
align="middle"></a>
</EditItemTemplate>
</asp:TemplateColumn>

somewhere in your page add this javascript block, after retrieving the
correct textbox it calls your showCalender Function

<script type="text/javascript">
//<![CDATA[

function getTextBox(currentRow,textBoxClassName){
var i;
var childrenTextBoxes = currentRow.getElementsByTagName("input");
for (i = 0; i < childrenTextBoxes.length; i ++){
var childTextBoxItem = childrenTextBoxes;
childTextBoxItem = childrenTextBoxes;
if (childTextBoxItem.className == textBoxClassName){
//alert(childTextBoxItem.id);
showCalendar(frmForm.imgDateStatut,childTextBoxItem, "yyyy-mm-dd","",1);
return;
}//childTextBoxItem statement End
}//childrenTextBoxes for Loop End
}//getTextBox
//]]>
</script>
Gilles T. said:
Hi Alessandro!

Wow! Working very good! Good javascript sub!

But only a little small problem. In edit mode, <EditItemTemplate>, I have a
specific class for all textbox (color, etc...).
I don't can create a new class properties for each textbox date because I
have many textbox date.
Where I can set my class "edit_item"?

Thanks

Alessandro Zifiglio said:
my apologies Gilles. I posted that too quickly. I should have known better.
You cannot rely on the controlID generated by the container for child
controls.
Here :
Click to expand...
http://msdn.microsoft.com/library/d...n/html/vbconwebformscontrolidentification.asp
But what we can do is get this on the client after it is rendered.

Note this is the only way to do what you want and the easiest. I wrote a
small utlity funtion in javascript. what it does is get a reference to the
parent <tr> table row and then retrieve a collection of all textboxes in
that particular row. To find the correct textbox it then retrieves that
textbox with a css class name matching a particular class . So make sure you
suppy a specific class for your txtDateStatut textbox control. Make sure
this particular textbox is the only textbox with this classname in that row
;P
This is the only requirement --shouldnt be a problem. I have tested this and
it should work like a charm, crossbrowser ;)
for it to work :

<asp:TemplateColumn ItemStyle-CssClass="grid_column_width_3"
ItemStyle-HorizontalAlign="center" ItemStyle-VerticalAlign="top">
<ItemTemplate><%#
CType(Container.DataItem("DateStatut"),DateTime).ToString("yyyy-MM-dd")
%></ItemTemplate>
<EditItemTemplate>
<asp:TextBox width="80" CssClass="dateStatus" id="txtDateStatut"
runat="server" Text='<%#
CType(Container.DataItem("DateStatut"),DateTime).ToString("yyyy-MM-dd")
%>'/>
<a onclick="getTextBox(this.parentNode.parentNode);" href="#"><img
src="images/cal.gif" name="imgDateStatut" width="16" height="16" border="0"
align="middle"></a>
</EditItemTemplate>
</asp:TemplateColumn>

somewhere in your page add this javascript block, after retrieving the
correct textbox it calls your showCalender Function

<script type="text/javascript">
//<![CDATA[

function getTextBox(currentRow){
var i;
var childrenTextBoxes = currentRow.getElementsByTagName("input");
for (i = 0; i < childrenTextBoxes.length; i ++){
var childTextBoxItem = childrenTextBoxes;
childTextBoxItem = childrenTextBoxes;
if (childTextBoxItem.className == 'dateStatus'){
//alert(childTextBoxItem.id);
showCalendar(frmForm.imgDateStatut,childTextBoxItem, "yyyy-mm-dd","",1);
}//childTextBoxItem statement End
}//childrenTextBoxes for Loop End
}//getTextBox
//]]>
</script>





Gilles T. said:
Hi Alessandro,

Thanks you for your response. Now, I think understand but not working again.
This is my new codes:
Private Sub dataGridManufacturer_ItemDataBound(sender As Object, e As
System.Web.UI.WebControls.DataGridItemEventArgs)
Dim DateStatus As TextBox
Dim HyperLink1 as HyperLink
If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType =
ListItemType.AlternatingItem Then
DateStatus =
CType(e.Item.Cells(0).FindControl("txtDateStatut"),TextBox)
HyperLink1 =
CType(e.Item.Cells(0).FindControl("linkShowDate"),HyperLink)
hyperlink1.NavigateUrl
Click to expand...
Click to expand...

="javascript:showCalendar(frmForm.imgDernieresResolutions,document.getElemenhref="javascript:showCalendar(frmForm.imgDernieresResolutions,document.getEl
my
head
Click to expand...
Click to expand...
 
G

Gilles T.

Hi Alessandro!

That's Ok for Class name but last think.

<asp:TextBox width="80" CssClass="date_Status" id="txtDateStatut1"
runat="server" />
<a onclick="getTextBox(this.parentNode.parentNode);" href="#"><img
src="images/cal.gif" name="imgDateStatut1" width="16" height="16" border="0"
align="middle"></a>

<asp:TextBox width="80" CssClass="date_Status" id="txtDateStatut2"
runat="server" />
<a onclick="getTextBox(this.parentNode.parentNode);" href="#"><img
src="images/cal.gif" name="imgDateStatut2" width="16" height="16" border="0"
align="middle"></a>

Can you help me to passing the image name for using in Javascript function?
showCalendar(Must be image name,childTextBoxItem, "yyyy-mm-dd","",1);

Thanks

Alessandro Zifiglio said:
Gilles, on the code i posted last, its looking for textboxes with className
of "dateStatus", you could have changed this to whatever className you
wanted to use in the javascript itself, however to simplify, now you can
pass a className string to the getTextBox sub, eliminating the one calender
popup for each textBox per row limit.. In the code sample below i'm passing
"edit_item" as the className to use --you should be able to pass any
className in this way. If you had more textboxes for whom you wanted to
popup your calender you can do so, by specifying a different
className ---Just make sure that in this row and not the whole grid in
itself, but just row --the className must be unique --otherwise it will
return the first textBox that matches this className. This is the second
change i made.
Glad you like it Gille :)


<asp:TemplateColumn ItemStyle-CssClass="grid_column_width_3"
ItemStyle-HorizontalAlign="center" ItemStyle-VerticalAlign="top">
<ItemTemplate><%#
CType(Container.DataItem("DateStatut"),DateTime).ToString("yyyy-MM-dd")
%></ItemTemplate>
<EditItemTemplate>
<asp:TextBox width="80" CssClass="edit_item" id="txtDateStatut"
runat="server" Text='<%#
CType(Container.DataItem("DateStatut"),DateTime).ToString("yyyy-MM-dd")
%>'/>
<a onclick="getTextBox(this.parentNode.parentNode,'edit_item');"
href="#"><img
src="images/cal.gif" name="imgDateStatut" width="16" height="16" border="0"
align="middle"></a>
</EditItemTemplate>
</asp:TemplateColumn>

somewhere in your page add this javascript block, after retrieving the
correct textbox it calls your showCalender Function

<script type="text/javascript">
//<![CDATA[

function getTextBox(currentRow,textBoxClassName){
var i;
var childrenTextBoxes = currentRow.getElementsByTagName("input");
for (i = 0; i < childrenTextBoxes.length; i ++){
var childTextBoxItem = childrenTextBoxes;
childTextBoxItem = childrenTextBoxes;
if (childTextBoxItem.className == textBoxClassName){
//alert(childTextBoxItem.id);
showCalendar(frmForm.imgDateStatut,childTextBoxItem, "yyyy-mm-dd","",1);
return;
}//childTextBoxItem statement End
}//childrenTextBoxes for Loop End
}//getTextBox
//]]>
</script>
Gilles T. said:
Hi Alessandro!

Wow! Working very good! Good javascript sub!

But only a little small problem. In edit mode, <EditItemTemplate>, I
Click to expand...
have
a
specific class for all textbox (color, etc...).
I don't can create a new class properties for each textbox date because I
have many textbox date.
Where I can set my class "edit_item"?

Thanks
Click to expand...
http://msdn.microsoft.com/library/d...n/html/vbconwebformscontrolidentification.asp
But what we can do is get this on the client after it is rendered.

Note this is the only way to do what you want and the easiest. I wrote a
small utlity funtion in javascript. what it does is get a reference to the
parent <tr> table row and then retrieve a collection of all textboxes in
that particular row. To find the correct textbox it then retrieves that
textbox with a css class name matching a particular class . So make
Click to expand...
sure
you
suppy a specific class for your txtDateStatut textbox control. Make sure
this particular textbox is the only textbox with this classname in
Click to expand...
that
row
;P
This is the only requirement --shouldnt be a problem. I have tested
Click to expand...
this
and
it should work like a charm, crossbrowser ;)
for it to work :

<asp:TemplateColumn ItemStyle-CssClass="grid_column_width_3"
ItemStyle-HorizontalAlign="center" ItemStyle-VerticalAlign="top">
<ItemTemplate><%#
CType(Container.DataItem("DateStatut"),DateTime).ToString("yyyy-MM-dd")
%></ItemTemplate>
<EditItemTemplate>
<asp:TextBox width="80" CssClass="dateStatus" id="txtDateStatut"
runat="server" Text='<%#
CType(Container.DataItem("DateStatut"),DateTime).ToString("yyyy-MM-dd")
%>'/>
<a onclick="getTextBox(this.parentNode.parentNode);" href="#"><img
src="images/cal.gif" name="imgDateStatut" width="16" height="16" border="0"
align="middle"></a>
</EditItemTemplate>
</asp:TemplateColumn>

somewhere in your page add this javascript block, after retrieving the
correct textbox it calls your showCalender Function

<script type="text/javascript">
//<![CDATA[

function getTextBox(currentRow){
var i;
var childrenTextBoxes = currentRow.getElementsByTagName("input");
for (i = 0; i < childrenTextBoxes.length; i ++){
var childTextBoxItem = childrenTextBoxes;
childTextBoxItem = childrenTextBoxes;
if (childTextBoxItem.className == 'dateStatus'){
//alert(childTextBoxItem.id);
showCalendar(frmForm.imgDateStatut,childTextBoxItem, "yyyy-mm-dd","",1);
}//childTextBoxItem statement End
}//childrenTextBoxes for Loop End
}//getTextBox
//]]>
</script>





Hi Alessandro,

Thanks you for your response. Now, I think understand but not working
again.
This is my new codes:
Private Sub dataGridManufacturer_ItemDataBound(sender As Object, e As
System.Web.UI.WebControls.DataGridItemEventArgs)
Dim DateStatus As TextBox
Dim HyperLink1 as HyperLink
If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType =
ListItemType.AlternatingItem Then
DateStatus =
CType(e.Item.Cells(0).FindControl("txtDateStatut"),TextBox)
HyperLink1 =
CType(e.Item.Cells(0).FindControl("linkShowDate"),HyperLink)
hyperlink1.NavigateUrl
Click to expand...
Click to expand...

="javascript:showCalendar(frmForm.imgDernieresResolutions,document.getElemenhref="javascript:showCalendar(frmForm.imgDernieresResolutions,document.getEl
test
if working
in
Click to expand...
Click to expand...
 
A

Alessandro Zifiglio

oops, yeah forgot. Totally slipped my mind ;)
always building onto the last code i posted, i'm passing the image too as
this.lastChild --

<asp:TemplateColumn ItemStyle-CssClass="grid_column_width_3"
ItemStyle-HorizontalAlign="center" ItemStyle-VerticalAlign="top">
<ItemTemplate><%#
CType(Container.DataItem("DateStatut"),DateTime).ToString("yyyy-MM-dd")
%></ItemTemplate>
<EditItemTemplate>
<asp:TextBox width="80" CssClass="edit_item" id="txtDateStatut"
runat="server" Text='<%#
CType(Container.DataItem("DateStatut"),DateTime).ToString("yyyy-MM-dd")
%>'/>
<a
onclick="getTextBox(this.lastChild,this.parentNode.parentNode,'edit_item');"
href="#"><img
src="images/cal.gif" name="imgDateStatut" width="16" height="16" border="0"
align="middle"></a>
</EditItemTemplate>
</asp:TemplateColumn>

<script type="text/javascript">
//<![CDATA[

function getTextBox(imageElm,currentRow,textBoxClassName){
var i;
var childrenTextBoxes = currentRow.getElementsByTagName("input");
for (i = 0; i < childrenTextBoxes.length; i ++){
var childTextBoxItem = childrenTextBoxes;
childTextBoxItem = childrenTextBoxes;
if (childTextBoxItem.className == textBoxClassName){
//alert(childTextBoxItem.id);
showCalendar(imageElm,childTextBoxItem, "yyyy-mm-dd","",1);
return;
}//childTextBoxItem statement End
}//childrenTextBoxes for Loop End
}//getTextBox
//]]>
</script>

Gilles T. said:
Hi Alessandro!

That's Ok for Class name but last think.

<asp:TextBox width="80" CssClass="date_Status" id="txtDateStatut1"
runat="server" />
<a onclick="getTextBox(this.parentNode.parentNode);" href="#"><img
src="images/cal.gif" name="imgDateStatut1" width="16" height="16" border="0"
align="middle"></a>

<asp:TextBox width="80" CssClass="date_Status" id="txtDateStatut2"
runat="server" />
<a onclick="getTextBox(this.parentNode.parentNode);" href="#"><img
src="images/cal.gif" name="imgDateStatut2" width="16" height="16" border="0"
align="middle"></a>

Can you help me to passing the image name for using in Javascript function?
showCalendar(Must be image name,childTextBoxItem, "yyyy-mm-dd","",1);

Thanks

Alessandro Zifiglio said:
Gilles, on the code i posted last, its looking for textboxes with className
of "dateStatus", you could have changed this to whatever className you
wanted to use in the javascript itself, however to simplify, now you can
pass a className string to the getTextBox sub, eliminating the one calender
popup for each textBox per row limit.. In the code sample below i'm passing
"edit_item" as the className to use --you should be able to pass any
className in this way. If you had more textboxes for whom you wanted to
popup your calender you can do so, by specifying a different
className ---Just make sure that in this row and not the whole grid in
itself, but just row --the className must be unique --otherwise it will
return the first textBox that matches this className. This is the second
change i made.
Glad you like it Gille :)


<asp:TemplateColumn ItemStyle-CssClass="grid_column_width_3"
ItemStyle-HorizontalAlign="center" ItemStyle-VerticalAlign="top">
<ItemTemplate><%#
CType(Container.DataItem("DateStatut"),DateTime).ToString("yyyy-MM-dd")
%></ItemTemplate>
<EditItemTemplate>
<asp:TextBox width="80" CssClass="edit_item" id="txtDateStatut"
runat="server" Text='<%#
CType(Container.DataItem("DateStatut"),DateTime).ToString("yyyy-MM-dd")
%>'/>
<a onclick="getTextBox(this.parentNode.parentNode,'edit_item');"
href="#"><img
src="images/cal.gif" name="imgDateStatut" width="16" height="16" border="0"
align="middle"></a>
</EditItemTemplate>
</asp:TemplateColumn>

somewhere in your page add this javascript block, after retrieving the
correct textbox it calls your showCalender Function

<script type="text/javascript">
//<![CDATA[

function getTextBox(currentRow,textBoxClassName){
var i;
var childrenTextBoxes = currentRow.getElementsByTagName("input");
for (i = 0; i < childrenTextBoxes.length; i ++){
var childTextBoxItem = childrenTextBoxes;
childTextBoxItem = childrenTextBoxes;
if (childTextBoxItem.className == textBoxClassName){
//alert(childTextBoxItem.id);
showCalendar(frmForm.imgDateStatut,childTextBoxItem, "yyyy-mm-dd","",1);
return;
}//childTextBoxItem statement End
}//childrenTextBoxes for Loop End
}//getTextBox
//]]>
</script>
Gilles T. said:
Hi Alessandro!

Wow! Working very good! Good javascript sub!

But only a little small problem. In edit mode, <EditItemTemplate>, I
Click to expand...
have
a
specific class for all textbox (color, etc...).
I don't can create a new class properties for each textbox date
Click to expand...
Click to expand...
because
I
Click to expand...
http://msdn.microsoft.com/library/d...n/html/vbconwebformscontrolidentification.asp wrote
a to
the
Click to expand...
textboxes
in
that particular row. To find the correct textbox it then retrieves that
textbox with a css class name matching a particular class . So make sure
you
suppy a specific class for your txtDateStatut textbox control. Make sure
this particular textbox is the only textbox with this classname in that
row
;P
This is the only requirement --shouldnt be a problem. I have tested this
and
it should work like a charm, crossbrowser ;)
for it to work :

<asp:TemplateColumn ItemStyle-CssClass="grid_column_width_3"
ItemStyle-HorizontalAlign="center" ItemStyle-VerticalAlign="top">
<ItemTemplate><%#
CType(Container.DataItem("DateStatut"),DateTime).ToString("yyyy-MM-dd")
%></ItemTemplate>
<EditItemTemplate>
<asp:TextBox width="80" CssClass="dateStatus" id="txtDateStatut"
runat="server" Text='<%#
CType(Container.DataItem("DateStatut"),DateTime).ToString("yyyy-MM-dd")
%>'/>
<a onclick="getTextBox(this.parentNode.parentNode);" href="#"><img
src="images/cal.gif" name="imgDateStatut" width="16" height="16"
border="0"
align="middle"></a>
</EditItemTemplate>
</asp:TemplateColumn>

somewhere in your page add this javascript block, after retrieving the
correct textbox it calls your showCalender Function

<script type="text/javascript">
//<![CDATA[

function getTextBox(currentRow){
var i;
var childrenTextBoxes = currentRow.getElementsByTagName("input");
for (i = 0; i < childrenTextBoxes.length; i ++){
var childTextBoxItem = childrenTextBoxes;
childTextBoxItem = childrenTextBoxes;
if (childTextBoxItem.className == 'dateStatus'){
//alert(childTextBoxItem.id);
showCalendar(frmForm.imgDateStatut,childTextBoxItem, "yyyy-mm-dd","",1);
}//childTextBoxItem statement End
}//childrenTextBoxes for Loop End
}//getTextBox
//]]>
</script>





Hi Alessandro,

Thanks you for your response. Now, I think understand but not working
again.
This is my new codes:
Private Sub dataGridManufacturer_ItemDataBound(sender As Object,
Click to expand...
Click to expand...
e
As
Click to expand...
="javascript:showCalendar(frmForm.imgDernieresResolutions,document.getElemenhref="javascript:showCalendar(frmForm.imgDernieresResolutions,document.getEl
wrote
in of
my
Click to expand...
e.Item.ItemType
= cell
you
Click to expand...
Click to expand...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Need help with Datagrid Control in edit mode and Javascript 1
GridView edit mode issue 2
Problem with Data Grid 0
ASP.NET Datagrid 1
populating gridview controls in edit mode 0
asp.net datagrid textbox blank in edit mode or "not set to an instance" error 2
Gridview - don't show button control in Edit mode? 0
wrapping text in datagrid 1

Members online

No members online now.
Total: 62 (members: 1, guests: 61)
Robots: 441

Forum statistics

Threads
473,995
Messages
2,570,230
Members
46,816
Latest member
SapanaCarpetStudio

Latest Threads

Top