Problems with GridView

nick1248 · March 29th, 2013, 04:04 PM

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:

Code:

<%@ 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>
<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" Runat="Server">
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="ID" DataSourceID="SqlDataSource1">
        <Columns>
            <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)
        </Columns>
    </asp:GridView>
    <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" />
        </SelectParameters>
        <UpdateParameters>
            <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)
        </UpdateParameters>
    </asp:SqlDataSource>
    <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);
            });
        })
    </script>
</asp:Content>

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

nick1248 · April 2nd, 2013, 05:25 PM

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!!:
[code]
<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);
});
})
</script>
[\code]
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