javascript datagrid events inside item template

Discussion in 'ASP .Net' started by Luis Esteban Valencia Muñoz, Jun 9, 2005.

  1. 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, Jun 9, 2005
    #1
    1. Advertising

  2. 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" <> escribió en el
    mensaje news:...
    > 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, Jun 9, 2005
    #2
    1. Advertising

  3. 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__
    ---_,>/'_------
    (_) \(_)
    ---------------


    "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" <> escribió en el
    > mensaje news:...
    > > 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
    > >
    > >

    >
    >
    >
     
    =?Utf-8?B?dmluYXk=?=, Jun 9, 2005
    #3
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    2
    Views:
    639
  2. =?Utf-8?B?SmFtZXMgR2V1cnRz?=

    Bug with nested repeaters. Item events are called twice per item

    =?Utf-8?B?SmFtZXMgR2V1cnRz?=, Mar 15, 2007, in forum: ASP .Net
    Replies:
    4
    Views:
    979
    =?Utf-8?B?SmFtZXMgR2V1cnRz?=
    Mar 28, 2007
  3. QUASAR
    Replies:
    6
    Views:
    460
    QUASAR
    Jan 17, 2004
  4. Scott M.

    Handling Events Of DataGrid Template Item Controls - UNANSWERED

    Scott M., Nov 15, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    5
    Views:
    221
    Steven Cheng[MSFT]
    Nov 16, 2004
  5. Chris

    Events Events Events Please Help

    Chris, Aug 30, 2005, in forum: ASP .Net Web Controls
    Replies:
    0
    Views:
    423
    Chris
    Aug 30, 2005
Loading...

Share This Page