Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > ASP .Net > javascript datagrid events inside item template

Reply
Thread Tools

javascript datagrid events inside item template

 
 
Luis Esteban Valencia Muñoz
Guest
Posts: n/a
 
      06-09-2005
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.SelectedIte m.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


 
Reply With Quote
 
 
 
 
Luis Esteban Valencia Muñoz
Guest
Posts: n/a
 
      06-09-2005
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" <(E-Mail Removed)> escribió en el
mensaje news:(E-Mail Removed)...
> 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.SelectedIte m.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
>
>



 
Reply With Quote
 
 
 
 
=?Utf-8?B?dmluYXk=?=
Guest
Posts: n/a
 
      06-09-2005
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.fr m1.cbUpdate.checked='true'

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


"Luis Esteban Valencia Muñoz" wrote:

> 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" <(E-Mail Removed)> escribió en el
> mensaje news:(E-Mail Removed)...
> > 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.SelectedIte m.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
> >
> >

>
>
>

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Bug with nested repeaters. Item events are called twice per item =?Utf-8?B?SmFtZXMgR2V1cnRz?= ASP .Net 4 03-28-2007 01:46 AM
Events Events Events Please Help Chris ASP .Net Web Controls 0 08-30-2005 08:21 PM
XHTML block item inside and inline item tj.tzavaras@gmail.com HTML 2 04-28-2005 03:42 PM
Handling Events Of DataGrid Template Item Controls - UNANSWERED Scott M. ASP .Net Datagrid Control 5 11-16-2004 01:43 AM
Change style of a single row of the item list of datagrid, based on a field value of current item... QUASAR ASP .Net Datagrid Control 6 01-17-2004 07:46 PM



Advertisments