Board index » Web Programming » javascript datagrid events inside item template

Web Programming267
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


-

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

"Luis Esteban Valencia Muñoz" <levalencia@avansoft.com>escribió en el

mensaje news:eLySw2SbFHA.3280@TK2MSFTNGP09.phx.gbl...



-

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

--

pathidotnet.blogspot.com">pathidotnet.blogspot.com

=====

vInAypAtHi

o__

---_,>/'_------

(_) \(_)

---------------





"Luis Esteban Valencia Muñoz" wrote: