Wrox Programmer Forums
Go Back   Wrox Programmer Forums > ASP.NET and ASP > ASP.NET 4 > ASP.NET 4 General Discussion
ASP.NET 4 General Discussion For ASP.NET 4 discussions not relating to a specific Wrox book
Welcome to the p2p.wrox.com Forums.

You are currently viewing the ASP.NET 4 General Discussion section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
Old March 29th, 2013, 04:04 PM
Authorized User
Join Date: Oct 2012
Posts: 19
Thanks: 6
Thanked 0 Times in 0 Posts
Default Problems with GridView - More Details

I am using GridView to view and edit an unknown number of items that are connected to a purchase order. For each item (the one the user selects to Edit), I want the value for one of the data fields in the row to be derived from the value of two other data fields in the row. I am trying to do so with the jQuery code shown at the end of the asp page:
<%@ Page Title="PO Items" Language="VB" MasterPageFile="~/MasterPages/DFWB.master" AutoEventWireup="false" CodeFile="PoItem.aspx.vb" Inherits="PurchaseOrders_PoItem" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" Runat="Server">
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="ID" DataSourceID="SqlDataSource1">
            <asp:CommandField ShowEditButton="True" />
            <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" 
                ReadOnly="True" SortExpression="ID" />
            <asp:BoundField DataField="purchaseOrderId" HeaderText="purchaseOrderId" 
                SortExpression="purchaseOrderId" />
            <asp:BoundField DataField="xname" HeaderText="Item Name" 
                SortExpression="xname" />
            <asp:BoundField DataField="vendorStockNo" 
                HeaderText="Stock Number and Description" SortExpression="vendorStockNo" />
            <asp:BoundField DataField="xapplication" HeaderText="Application" 
                SortExpression="xapplication" />
            <asp:BoundField DataField="quantity" HeaderText="Quantity" 
                SortExpression="quantity" DataFormatString="[0-9]*" />
            <asp:BoundField DataField="unitListPrice" HeaderText="Unit Price - List" 
                SortExpression="unitListPrice" />
            <asp:BoundField DataField="unitNetPrice" HeaderText="Unit Price - Net" 
                SortExpression="unitNetPrice" />
            <asp:BoundField DataField="customerDiscount" 
                HeaderText="Customer Discount Off List" SortExpression="customerDiscount" />
            <asp:BoundField DataField="netPrice" HeaderText="Net Price" 
                SortExpression="netPrice" />
            <asp:BoundField DataField="customerPrice" HeaderText="Customer Price" 
                SortExpression="customerPrice" />
            ...(more rows)
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:DFWB_DatabaseConnectionString1 %>"  
        SelectCommand="SELECT [ID], [purchaseOrderId], [xname], [vendorStockNo], [xapplication], [quantity], [unitListPrice], [unitNetPrice], [customerDiscount], [netPrice],  ..." 
        UpdateCommand="UPDATE [Item] SET [purchaseOrderId] = @purchaseOrderId, [xname] = @xname, [vendorStockNo] = @vendorStockNo, [xapplication] = @xapplication, [quantity] = @quantity, 
                         [unitListPrice] = @unitListPrice, [unitNetPrice] = @unitNetPrice, [customerDiscount] = @customerDiscount, [netPrice] = @netPrice,  ... ">
            <asp:QueryStringParameter DefaultValue="20" Name="purchaseOrderId" 
                QueryStringField="ID" Type="Int64" />
            <asp:Parameter Name="purchaseOrderId" Type="Int64" />
            <asp:Parameter Name="xname" Type="String" />
            <asp:Parameter Name="vendorStockNo" Type="String" />
            <asp:Parameter Name="xapplication" Type="String" />
            <asp:Parameter Name="quantity" Type="Int32" />
            <asp:Parameter Name="unitListPrice" Type="Decimal" />
            <asp:Parameter Name="unitNetPrice" Type="Decimal" />
            <asp:Parameter Name="customerDiscount" Type="Decimal" />
            <asp:Parameter Name="netPrice" Type="Decimal" />
            ... (more Parameters)
    <asp:Button ID="ReturnToPoMain" runat="server" Text="Return to PO" />
    <script type="text/javascript">
        $(function () {
            $("input[type='text']").change(function () {
                var unitNetPrice = (this.value);
                var quantity = $(this).prev().prev();
                var netPrice = quantity * unitNetPrice;
                $(this).next().next().attr('value', netPrice);
When the user presses the Edit button each of the data fields in that row are adorned with text boxes in the HTML at the Client. I was hoping to latch on to these text boxes with my jQuery code but, alas, nothing seems to happen. Do I have a minor mistake in my jQuery, or is this apprach not viable?
P.S. For usability reasons I would like to see the calculated value filled while the user is still in the Edit mode and not have to wait for a postback from the Update button.
PPS. I am using the GridView with a SqlDataSource
Old April 2nd, 2013, 05:25 PM
Authorized User
Join Date: Oct 2012
Posts: 19
Thanks: 6
Thanked 0 Times in 0 Posts
Default Some Progress

the problem with the approach I described is that text boxes do not appear at the client side until after the "Edit" control has been activated. This complicates the jQuery code no end. I came upon a number of improvements since my original post:
  • When editing the GridView columns, select the option "convert this field into a TemplateField". This causes text boxes to be created. (This is also required for inserting user validatation controls.)
  • To make the problem with the Edit control go away do not choose Edit as an option for GridView
  • By editing the HTML to delete the "label" ItemTemplate and replacing it with the "TextBox" ItemTemplate the GridView opens in the browser with TextBoxes ready to edit
See "Calculating GridView Fields Using jquery - Yousef Jadallah's Blog‎" for more details on the last step.
So I now have the following jQuery that works!!:
<script type="text/javascript">
$(function () {
$(':input[type=text]').change(function () {
var unitNetPrice = (this.value);
var quantity = $(this).closest('tr').find("[id*=txtQuantity]").val();
var netPrice = quantity * unitNetPrice;
$(this).closest('tr').find("[id*=txtNetPrice]").attr('value', netPrice);
The problem I am addressing now, is how to update the database with the new user input. Since I eliminated the "Edit" control I no longer have the "Update" control

Similar Threads
Thread Thread Starter Forum Replies Last Post
Problems with GridView nick1248 BOOK: Beginning ASP.NET 4 : in C# and VB 1 March 29th, 2013 11:11 AM
GridView Problems Bajrang ASP.NET 2.0 Basics 0 May 16th, 2007 05:53 AM
Gridview checkbox problems pauliehaha ASP.NET 2.0 Professional 1 May 3rd, 2007 04:14 AM
Problems with view details based on querystring zacksofia ASP.NET 1.0 and 1.1 Basics 10 March 12th, 2006 07:45 PM

Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.