javascript datagrid events inside item template

[Luis Esteban Valencia Muñoz]

I have a datagrid that displays editable text fields (2 different price
fields) and a checkbox in every row.
It has a "SaveChange s" button at the bottom, which, when pressed, looks at
every checkbox in the datagrid, if it is checked, it updates the
corresponding rows prices.
That works, no problem.

What I need to do is that when a user clicks into either of the price text
fields, the checkbox automatically checks itself.
This will save having to click the checkbox after changing a field value.
I have a similar thing in ASP that I use, but the datagrid doesn't seem to
support client side code intuitively.

Here's the HTML side:

<asp:datagrid id="dgProductPr iceList" Runat="server" DataKeyField="i d"
AllowSorting="T rue" width="100%" AutoGenerateCol umns="False"
ItemStyle-CssClass="Item" AlternatingItem Style-CssClass="Alter nateItem"
HeaderStyle-CssClass="Heade r" CellSpacing="1" BorderWidth="0p x"
CellPadding="3" PageSize="30">
<AlternatingIte mStyle CssClass="Alter nateItem"></AlternatingItem Style>
<ItemStyle CssClass="Item" ></ItemStyle>
<HeaderStyle ForeColor="Whit e" CssClass="Heade r"></HeaderStyle>
<Columns>
<asp:TemplateCo lumn SortExpression= "SKU" HeaderText="SKU ">
<ItemStyle Wrap="False" HorizontalAlign ="Left"
VerticalAlign=" Top"></ItemStyle>
<ItemTemplate >
<%# Container.DataI tem("SKU") %>
</ItemTemplate>
</asp:TemplateCol umn>
<asp:TemplateCo lumn SortExpression= "Name" HeaderText="Nam e">
<ItemStyle HorizontalAlign ="Left" VerticalAlign=" Top"></ItemStyle>
<ItemTemplate >
<%# Container.DataI tem("Name") %>
</ItemTemplate>
</asp:TemplateCol umn>
<asp:TemplateCo lumn SortExpression= "price" HeaderText="Pri ce">
<HeaderStyle Wrap="False" HorizontalAlign ="Left"></HeaderStyle>
<ItemStyle Wrap="False" HorizontalAlign ="Right"
VerticalAlign=" Top"></ItemStyle>
<ItemTemplate >
<asp:TextBox CssClass="FormI nput" Runat="server" Text='<%#
DataBinder.Eval (Container, "DataItem.Price ") %>' Columns="5" ID="txtPrice">
</asp:TextBox>
</ItemTemplate>
</asp:TemplateCol umn>
<asp:TemplateCo lumn SortExpression= "price2" HeaderText="Pri ce 2">
<HeaderStyle Wrap="False" HorizontalAlign ="Left"></HeaderStyle>
<ItemStyle Wrap="False" HorizontalAlign ="Right"
VerticalAlign=" Top"></ItemStyle>
<ItemTemplate >
<asp:TextBox id="txtPrice2" CssClass="FormI nput"
Runat="server" Text='<%# DataBinder.Eval (Container, "DataItem.Price 2") %>'
Columns="5">
</asp:TextBox>
</ItemTemplate>
</asp:TemplateCol umn>
<asp:TemplateCo lumn HeaderText="Sel ect">
<ItemTemplate >
<asp:CheckBox id="chkSelectio n" runat="server"
Checked="false" EnableViewState ="true"></asp:CheckBox>
</ItemTemplate>
</asp:TemplateCol umn>
</Columns>
<PagerStyle Position="TopAn dBottom" CssClass="FormL abel"
Mode="NumericPa ges"></PagerStyle>
</asp:datagrid>

<asp:imagebutto n id="btnSaveChan ges" runat="server"
ImageUrl="image s/btnSaveChanges. gif"></asp:imagebutton >


*************** *************** *************** *************** *************** *
**********

The code that binds a datatable to the datagrid:

Sub FillProductPric eList(ByVal sortexpression As String)
Session("AdminP roductPrefsCate gory") =
lstCategories.S electedItem.Val ue
Session("AdminP roductPrefsName ") = inName.Text
Session("AdminP roductPrefsSKU" ) = inSKU.Text

Dim ProdManager As New StoreObjects.Pr oductManager

Try
Dim dtProducts As DataTable =
ProdManager.Get Products2(lstCa tegories.Select edItem.Value, inName.Text,
inSKU.Text, sortexpression, -1)
Me.dgProductPri ceList.DataSour ce = dtProducts
Me.dgProductPri ceList.DataBind ()
lblResponse.Tex t = dtProducts.Rows .Count & " products found"
Catch Ex As Exception
lblError.Text = Ex.Message
End Try

ProdManager = Nothing
End Sub

[Luis Esteban Valencia Muñoz]

Re: javascript datagrid events inside item template

I guess I would need to put the javascript in before the page is displayed -
I thought the item template would have an onChange or onClick event, but
they don't have that feature as far as I can tell.

In ASP, I would achieve this inside my table loop variable 'idx' like so in
the input textboxes onChange event:

<input type=text size=8 name="price_<%= id%>" value="<%=price _%>"
class="blk8c" maxlength="10"
onChange="javas cript:window.do cument.frm1.cbU pdate[<%=idx%>].checked='true' ;
">


If possible, I would like to avoid building the datagrid from scratch and
would rather use DataBind as it is much faster (at least for me) or even
somehow do it within the ItemTemplate of the datagrid
"Luis Esteban Valencia Muñoz" <levalencia@ava nsoft.com> escribió en el
mensaje news:eLySw2SbFH A.3280@TK2MSFTN GP09.phx.gbl...[color=blue]
> I have a datagrid that displays editable text fields (2 different price
> fields) and a checkbox in every row.
> It has a "SaveChange s" button at the bottom, which, when pressed, looks at
> every checkbox in the datagrid, if it is checked, it updates the
> corresponding rows prices.
> That works, no problem.
>
> What I need to do is that when a user clicks into either of the price text
> fields, the checkbox automatically checks itself.
> This will save having to click the checkbox after changing a field value.
> I have a similar thing in ASP that I use, but the datagrid doesn't seem to
> support client side code intuitively.
>
> Here's the HTML side:
>
> <asp:datagrid id="dgProductPr iceList" Runat="server" DataKeyField="i d"
> AllowSorting="T rue" width="100%" AutoGenerateCol umns="False"
> ItemStyle-CssClass="Item" AlternatingItem Style-CssClass="Alter nateItem"
> HeaderStyle-CssClass="Heade r" CellSpacing="1" BorderWidth="0p x"
> CellPadding="3" PageSize="30">
> <AlternatingIte mStyle CssClass="Alter nateItem"></AlternatingItem Style>
> <ItemStyle CssClass="Item" ></ItemStyle>
> <HeaderStyle ForeColor="Whit e" CssClass="Heade r"></HeaderStyle>
> <Columns>
> <asp:TemplateCo lumn SortExpression= "SKU" HeaderText="SKU ">
> <ItemStyle Wrap="False" HorizontalAlign ="Left"
> VerticalAlign=" Top"></ItemStyle>
> <ItemTemplate >
> <%# Container.DataI tem("SKU") %>
> </ItemTemplate>
> </asp:TemplateCol umn>
> <asp:TemplateCo lumn SortExpression= "Name" HeaderText="Nam e">
> <ItemStyle HorizontalAlign ="Left"[/color]
VerticalAlign=" Top"></ItemStyle>[color=blue]
> <ItemTemplate >
> <%# Container.DataI tem("Name") %>
> </ItemTemplate>
> </asp:TemplateCol umn>
> <asp:TemplateCo lumn SortExpression= "price" HeaderText="Pri ce">
> <HeaderStyle Wrap="False" HorizontalAlign ="Left"></HeaderStyle>
> <ItemStyle Wrap="False" HorizontalAlign ="Right"
> VerticalAlign=" Top"></ItemStyle>
> <ItemTemplate >
> <asp:TextBox CssClass="FormI nput" Runat="server" Text='<%#
> DataBinder.Eval (Container, "DataItem.Price ") %>' Columns="5"[/color]
ID="txtPrice">[color=blue]
> </asp:TextBox>
> </ItemTemplate>
> </asp:TemplateCol umn>
> <asp:TemplateCo lumn SortExpression= "price2" HeaderText="Pri ce 2">
> <HeaderStyle Wrap="False" HorizontalAlign ="Left"></HeaderStyle>
> <ItemStyle Wrap="False" HorizontalAlign ="Right"
> VerticalAlign=" Top"></ItemStyle>
> <ItemTemplate >
> <asp:TextBox id="txtPrice2" CssClass="FormI nput"
> Runat="server" Text='<%# DataBinder.Eval (Container, "DataItem.Price 2") %>'
> Columns="5">
> </asp:TextBox>
> </ItemTemplate>
> </asp:TemplateCol umn>
> <asp:TemplateCo lumn HeaderText="Sel ect">
> <ItemTemplate >
> <asp:CheckBox id="chkSelectio n" runat="server"
> Checked="false" EnableViewState ="true"></asp:CheckBox>
> </ItemTemplate>
> </asp:TemplateCol umn>
> </Columns>
> <PagerStyle Position="TopAn dBottom" CssClass="FormL abel"
> Mode="NumericPa ges"></PagerStyle>
> </asp:datagrid>
>
> <asp:imagebutto n id="btnSaveChan ges" runat="server"
> ImageUrl="image s/btnSaveChanges. gif"></asp:imagebutton >
>
>
>[/color]
*************** *************** *************** *************** *************** *[color=blue]
> **********
>
> The code that binds a datatable to the datagrid:
>
> Sub FillProductPric eList(ByVal sortexpression As String)
> Session("AdminP roductPrefsCate gory") =
> lstCategories.S electedItem.Val ue
> Session("AdminP roductPrefsName ") = inName.Text
> Session("AdminP roductPrefsSKU" ) = inSKU.Text
>
> Dim ProdManager As New StoreObjects.Pr oductManager
>
> Try
> Dim dtProducts As DataTable =
> ProdManager.Get Products2(lstCa tegories.Select edItem.Value, inName.Text,
> inSKU.Text, sortexpression, -1)
> Me.dgProductPri ceList.DataSour ce = dtProducts
> Me.dgProductPri ceList.DataBind ()
> lblResponse.Tex t = dtProducts.Rows .Count & " products found"
> Catch Ex As Exception
> lblError.Text = Ex.Message
> End Try
>
> ProdManager = Nothing
> End Sub
>
>[/color]

[vinay]

Re: javascript datagrid events inside item template

I think U should be able to set the javascript for the input box in
ItemDatabound event.

DataGrid.FinfCo ntrol method to find ur Input control

After finding the Input Control

Input.Attribute s.add("onchange ",window.docume nt.frm1.cbUpdat e.checked='true ';)

Thanks
--

http://pathidotnet.blogspot.com

=====
vInAypAtHi
o__
---_,>/'_------
(_) \(_)
---------------


"Luis Esteban Valencia Muñoz" wrote:
[color=blue]
> I guess I would need to put the javascript in before the page is displayed -
> I thought the item template would have an onChange or onClick event, but
> they don't have that feature as far as I can tell.
>
> In ASP, I would achieve this inside my table loop variable 'idx' like so in
> the input textboxes onChange event:
>
> <input type=text size=8 name="price_<%= id%>" value="<%=price _%>"
> class="blk8c" maxlength="10"
> onChange="javas cript:window.do cument.frm1.cbU pdate[<%=idx%>].checked='true' ;
> ">
>
>
> If possible, I would like to avoid building the datagrid from scratch and
> would rather use DataBind as it is much faster (at least for me) or even
> somehow do it within the ItemTemplate of the datagrid
> "Luis Esteban Valencia Muñoz" <levalencia@ava nsoft.com> escribió en el
> mensaje news:eLySw2SbFH A.3280@TK2MSFTN GP09.phx.gbl...[color=green]
> > I have a datagrid that displays editable text fields (2 different price
> > fields) and a checkbox in every row.
> > It has a "SaveChange s" button at the bottom, which, when pressed, looks at
> > every checkbox in the datagrid, if it is checked, it updates the
> > corresponding rows prices.
> > That works, no problem.
> >
> > What I need to do is that when a user clicks into either of the price text
> > fields, the checkbox automatically checks itself.
> > This will save having to click the checkbox after changing a field value.
> > I have a similar thing in ASP that I use, but the datagrid doesn't seem to
> > support client side code intuitively.
> >
> > Here's the HTML side:
> >
> > <asp:datagrid id="dgProductPr iceList" Runat="server" DataKeyField="i d"
> > AllowSorting="T rue" width="100%" AutoGenerateCol umns="False"
> > ItemStyle-CssClass="Item" AlternatingItem Style-CssClass="Alter nateItem"
> > HeaderStyle-CssClass="Heade r" CellSpacing="1" BorderWidth="0p x"
> > CellPadding="3" PageSize="30">
> > <AlternatingIte mStyle CssClass="Alter nateItem"></AlternatingItem Style>
> > <ItemStyle CssClass="Item" ></ItemStyle>
> > <HeaderStyle ForeColor="Whit e" CssClass="Heade r"></HeaderStyle>
> > <Columns>
> > <asp:TemplateCo lumn SortExpression= "SKU" HeaderText="SKU ">
> > <ItemStyle Wrap="False" HorizontalAlign ="Left"
> > VerticalAlign=" Top"></ItemStyle>
> > <ItemTemplate >
> > <%# Container.DataI tem("SKU") %>
> > </ItemTemplate>
> > </asp:TemplateCol umn>
> > <asp:TemplateCo lumn SortExpression= "Name" HeaderText="Nam e">
> > <ItemStyle HorizontalAlign ="Left"[/color]
> VerticalAlign=" Top"></ItemStyle>[color=green]
> > <ItemTemplate >
> > <%# Container.DataI tem("Name") %>
> > </ItemTemplate>
> > </asp:TemplateCol umn>
> > <asp:TemplateCo lumn SortExpression= "price" HeaderText="Pri ce">
> > <HeaderStyle Wrap="False" HorizontalAlign ="Left"></HeaderStyle>
> > <ItemStyle Wrap="False" HorizontalAlign ="Right"
> > VerticalAlign=" Top"></ItemStyle>
> > <ItemTemplate >
> > <asp:TextBox CssClass="FormI nput" Runat="server" Text='<%#
> > DataBinder.Eval (Container, "DataItem.Price ") %>' Columns="5"[/color]
> ID="txtPrice">[color=green]
> > </asp:TextBox>
> > </ItemTemplate>
> > </asp:TemplateCol umn>
> > <asp:TemplateCo lumn SortExpression= "price2" HeaderText="Pri ce 2">
> > <HeaderStyle Wrap="False" HorizontalAlign ="Left"></HeaderStyle>
> > <ItemStyle Wrap="False" HorizontalAlign ="Right"
> > VerticalAlign=" Top"></ItemStyle>
> > <ItemTemplate >
> > <asp:TextBox id="txtPrice2" CssClass="FormI nput"
> > Runat="server" Text='<%# DataBinder.Eval (Container, "DataItem.Price 2") %>'
> > Columns="5">
> > </asp:TextBox>
> > </ItemTemplate>
> > </asp:TemplateCol umn>
> > <asp:TemplateCo lumn HeaderText="Sel ect">
> > <ItemTemplate >
> > <asp:CheckBox id="chkSelectio n" runat="server"
> > Checked="false" EnableViewState ="true"></asp:CheckBox>
> > </ItemTemplate>
> > </asp:TemplateCol umn>
> > </Columns>
> > <PagerStyle Position="TopAn dBottom" CssClass="FormL abel"
> > Mode="NumericPa ges"></PagerStyle>
> > </asp:datagrid>
> >
> > <asp:imagebutto n id="btnSaveChan ges" runat="server"
> > ImageUrl="image s/btnSaveChanges. gif"></asp:imagebutton >
> >
> >
> >[/color]
> *************** *************** *************** *************** *************** *[color=green]
> > **********
> >
> > The code that binds a datatable to the datagrid:
> >
> > Sub FillProductPric eList(ByVal sortexpression As String)
> > Session("AdminP roductPrefsCate gory") =
> > lstCategories.S electedItem.Val ue
> > Session("AdminP roductPrefsName ") = inName.Text
> > Session("AdminP roductPrefsSKU" ) = inSKU.Text
> >
> > Dim ProdManager As New StoreObjects.Pr oductManager
> >
> > Try
> > Dim dtProducts As DataTable =
> > ProdManager.Get Products2(lstCa tegories.Select edItem.Value, inName.Text,
> > inSKU.Text, sortexpression, -1)
> > Me.dgProductPri ceList.DataSour ce = dtProducts
> > Me.dgProductPri ceList.DataBind ()
> > lblResponse.Tex t = dtProducts.Rows .Count & " products found"
> > Catch Ex As Exception
> > lblError.Text = Ex.Message
> > End Try
> >
> > ProdManager = Nothing
> > End Sub
> >
> >[/color]
>
>
>[/color]