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 "SaveChanges" 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="dgProductPriceList" Runat="server" DataKeyField="id"
AllowSorting="True" width="100%" AutoGenerateColumns="False"
ItemStyle-CssClass="Item" AlternatingItemStyle-CssClass="AlternateItem"
HeaderStyle-CssClass="Header" CellSpacing="1" BorderWidth="0px"
CellPadding="3" PageSize="30">
<AlternatingItemStyle CssClass="AlternateItem"></AlternatingItemStyle>
<ItemStyle CssClass="Item"></ItemStyle>
<HeaderStyle ForeColor="White" CssClass="Header"></HeaderStyle>
<Columns>
<asp:TemplateColumn SortExpression="SKU" HeaderText="SKU">
<ItemStyle Wrap="False" HorizontalAlign="Left"
VerticalAlign="Top"></ItemStyle>
<ItemTemplate>
<%# Container.DataItem("SKU") %>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn SortExpression="Name" HeaderText="Name">
<ItemStyle HorizontalAlign="Left" VerticalAlign="Top"></ItemStyle>
<ItemTemplate>
<%# Container.DataItem("Name") %>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn SortExpression="price" HeaderText="Price">
<HeaderStyle Wrap="False" HorizontalAlign="Left"></HeaderStyle>
<ItemStyle Wrap="False" HorizontalAlign="Right"
VerticalAlign="Top"></ItemStyle>
<ItemTemplate>
<asp:TextBox CssClass="FormInput" Runat="server" Text='<%#
DataBinder.Eval(Container, "DataItem.Price") %>' Columns="5" ID="txtPrice">
</asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn SortExpression="price2" HeaderText="Price 2">
<HeaderStyle Wrap="False" HorizontalAlign="Left"></HeaderStyle>
<ItemStyle Wrap="False" HorizontalAlign="Right"
VerticalAlign="Top"></ItemStyle>
<ItemTemplate>
<asp:TextBox id="txtPrice2" CssClass="FormInput"
Runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Price2") %>'
Columns="5">
</asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Select">
<ItemTemplate>
<asp:CheckBox id="chkSelection" runat="server"
Checked="false" EnableViewState="true"></asp:CheckBox>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
<PagerStyle Position="TopAndBottom" CssClass="FormLabel"
Mode="NumericPages"></PagerStyle>
</asp:datagrid>

<asp:imagebutton id="btnSaveChanges" runat="server"
ImageUrl="images/btnSaveChanges.gif"></asp:imagebutton>


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

The code that binds a datatable to the datagrid:

Sub FillProductPriceList(ByVal sortexpression As String)
Session("AdminProductPrefsCategory") =
lstCategories.SelectedItem.Value
Session("AdminProductPrefsName") = inName.Text
Session("AdminProductPrefsSKU") = inSKU.Text

Dim ProdManager As New StoreObjects.ProductManager

Try
Dim dtProducts As DataTable =
ProdManager.GetProducts2(lstCategories.SelectedItem.Value, inName.Text,
inSKU.Text, sortexpression, -1)
Me.dgProductPriceList.DataSource = dtProducts
Me.dgProductPriceList.DataBind()
lblResponse.Text = dtProducts.Rows.Count & " products found"
Catch Ex As Exception
lblError.Text = Ex.Message
End Try

ProdManager = Nothing
End Sub

 

[Luis Esteban Valencia Muñoz]

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="javascript:window.document.frm1.cbUpdate[<%=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

 

[Guest]

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

DataGrid.FinfControl method to find ur Input control

After finding the Input Control

Input.Attributes.add("onchange",window.document.frm1.cbUpdate.checked='true'

Thanks
--
http://pathidotnet.blogspot.com
=====
vInAypAtHi
o__
---_,>/'_------
(_) \(_)
---------------

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="javascript:window.document.frm1.cbUpdate[<%=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

I have a datagrid that displays editable text fields (2 different price
fields) and a checkbox in every row.
It has a "SaveChanges" 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="dgProductPriceList" Runat="server" DataKeyField="id"
AllowSorting="True" width="100%" AutoGenerateColumns="False"
ItemStyle-CssClass="Item" AlternatingItemStyle-CssClass="AlternateItem"
HeaderStyle-CssClass="Header" CellSpacing="1" BorderWidth="0px"
CellPadding="3" PageSize="30">
<AlternatingItemStyle CssClass="AlternateItem"></AlternatingItemStyle>
<ItemStyle CssClass="Item"></ItemStyle>
<HeaderStyle ForeColor="White" CssClass="Header"></HeaderStyle>
<Columns>
<asp:TemplateColumn SortExpression="SKU" HeaderText="SKU">
<ItemStyle Wrap="False" HorizontalAlign="Left"
VerticalAlign="Top"></ItemStyle>
<ItemTemplate>
<%# Container.DataItem("SKU") %>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn SortExpression="Name" HeaderText="Name">
<ItemStyle HorizontalAlign="Left"

<ItemTemplate>
<%# Container.DataItem("Name") %>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn SortExpression="price" HeaderText="Price">
<HeaderStyle Wrap="False" HorizontalAlign="Left"></HeaderStyle>
<ItemStyle Wrap="False" HorizontalAlign="Right"
VerticalAlign="Top"></ItemStyle>
<ItemTemplate>
<asp:TextBox CssClass="FormInput" Runat="server" Text='<%#
DataBinder.Eval(Container, "DataItem.Price") %>' Columns="5" ID="txtPrice">
</asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn SortExpression="price2" HeaderText="Price 2">
<HeaderStyle Wrap="False" HorizontalAlign="Left"></HeaderStyle>
<ItemStyle Wrap="False" HorizontalAlign="Right"
VerticalAlign="Top"></ItemStyle>
<ItemTemplate>
<asp:TextBox id="txtPrice2" CssClass="FormInput"
Runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Price2") %>'
Columns="5">
</asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Select">
<ItemTemplate>
<asp:CheckBox id="chkSelection" runat="server"
Checked="false" EnableViewState="true"></asp:CheckBox>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
<PagerStyle Position="TopAndBottom" CssClass="FormLabel"
Mode="NumericPages"></PagerStyle>
</asp:datagrid>

<asp:imagebutton id="btnSaveChanges" runat="server"
ImageUrl="images/btnSaveChanges.gif"></asp:imagebutton>


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

The code that binds a datatable to the datagrid:

Sub FillProductPriceList(ByVal sortexpression As String)
Session("AdminProductPrefsCategory") =
lstCategories.SelectedItem.Value
Session("AdminProductPrefsName") = inName.Text
Session("AdminProductPrefsSKU") = inSKU.Text

Dim ProdManager As New StoreObjects.ProductManager

Try
Dim dtProducts As DataTable =
ProdManager.GetProducts2(lstCategories.SelectedItem.Value, inName.Text,
inSKU.Text, sortexpression, -1)
Me.dgProductPriceList.DataSource = dtProducts
Me.dgProductPriceList.DataBind()
lblResponse.Text = dtProducts.Rows.Count & " products found"
Catch Ex As Exception
lblError.Text = Ex.Message
End Try

ProdManager = Nothing
End Sub