ASPxGridView how to multiply two fields in edit mode and showing in third field

Question

I have load the data in ASPxGridView, when i click on edit link, the data shows in edit mode(PopupForm mode). When user change the quantity field value, the amount field will be updated according, after the multiplication of quantity field value with price field value. The amount will have multiplied value. After this the user will click on the update link, the data will modified in the database.

Here is a ASP.NET code that i have written

<dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" EnableTheming="True" KeyFieldName="transaction_id" OnRowCommand="ASPxGridView1_RowCommand" OnRowUpdated="ASPxGridView1_RowUpdated" OnRowUpdating="ASPxGridView1_RowUpdating" Theme="Metropolis">
                    <Columns>
                        <dx:GridViewCommandColumn ShowDeleteButton="True" ShowEditButton="True" VisibleIndex="0">
                        </dx:GridViewCommandColumn>
                        <dx:GridViewDataTextColumn FieldName="item_number" VisibleIndex="1">
                        </dx:GridViewDataTextColumn>
                        <dx:GridViewDataTextColumn FieldName="item_description" VisibleIndex="2">
                        </dx:GridViewDataTextColumn>
                        <dx:GridViewDataTextColumn FieldName="item_unit" VisibleIndex="3">
                        </dx:GridViewDataTextColumn>
                        <dx:GridViewDataTextColumn FieldName="item_quantity" VisibleIndex="4">
                        </dx:GridViewDataTextColumn>
                        <dx:GridViewDataTextColumn FieldName="item_price" VisibleIndex="5">
                        </dx:GridViewDataTextColumn>
                        <dx:GridViewDataTextColumn FieldName="item_amount" VisibleIndex="6">
                        </dx:GridViewDataTextColumn>
                        <dx:GridViewDataTextColumn FieldName="voucher_number" VisibleIndex="7">
                        </dx:GridViewDataTextColumn>
                    </Columns>
                    <SettingsBehavior ConfirmDelete="True" />
                    <SettingsEditing Mode="PopupEditForm">
                    </SettingsEditing>
                    <Settings ShowFilterRow="True" ShowFooter="True" />
                </dx:ASPxGridView>
            </ContentTemplate>
        </asp:UpdatePanel>

        <br />

        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:item_detailConnectionString %>" DeleteCommand="DELETE FROM [tbl_item_detail_transactions] WHERE [transaction_id] = @transaction_id" InsertCommand="INSERT INTO [tbl_item_detail_transactions] ([item_number], [item_description], [item_unit], [item_quantity], [item_price], [item_amount], [voucher_number]) VALUES (@item_number, @item_description, @item_unit, @item_quantity, @item_price, @item_amount, @voucher_number)" SelectCommand="SELECT  *, (item_quantity * item_price) as item_amount2 FROM [tbl_item_detail_transactions]" UpdateCommand="UPDATE [tbl_item_detail_transactions] SET [item_number] = @item_number, [item_description] = @item_description, [item_unit] = @item_unit, [item_quantity] = @item_quantity, [item_price] = @item_price, [item_amount] = @item_amount, [voucher_number] = @voucher_number WHERE [transaction_id] = @transaction_id">
            <DeleteParameters>
                <asp:Parameter Name="transaction_id" Type="Int32" />
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="item_number" Type="Int32" />
                <asp:Parameter Name="item_description" Type="String" />
                <asp:Parameter Name="item_unit" Type="Int32" />
                <asp:Parameter Name="item_quantity" Type="Int32" />
                <asp:Parameter Name="item_price" Type="Int32" />
                <asp:Parameter Name="item_amount2" Type="Int32" />
                <asp:Parameter Name="voucher_number" Type="Int32" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="item_number" Type="Int32" />
                <asp:Parameter Name="item_description" Type="String" />
                <asp:Parameter Name="item_unit" Type="Int32" />
                <asp:Parameter Name="item_quantity" Type="Int32" />
                <asp:Parameter Name="item_price" Type="Int32" />
                <asp:Parameter Name="item_amount" Type="Int32" />
                <asp:Parameter Name="voucher_number" Type="Int32" />
                <asp:Parameter Name="transaction_id" Type="Int32" />
            </UpdateParameters>
        </asp:SqlDataSource>

Here is a JavaScript Code

 <script src="Scripts/jquery-1.8.2.js"></script>
<script src="Scripts/jquery-1.4.1.min.js"></script>

 <script type="text/javascript">
    $(function () {
        $("#ASPxGridView1").find("input[title='item_quantity']").blur(function () {
            var item_quantity = $(this).val();
            var item_price = $("#ASPxGridView1").find("input[title='item_price']").val();
            if (item_quantity != "" && item_price != "") {
                var total = parseInt(item_price) + parseInt(item_quantity);
                $("#ASPxGridView1").find("input[title='item_amount']").val(total);
            } else {
                $("#ASPxGridView1").find("input[title='item_amount']").val("");
            }
        })
    })
</script>

What is your question? All I see are a set of statements of what the user is supposed to do, not what you're having trouble getting the code to do. — freefaller, Mar 03 '15 at 11:15

score 0 · Answer 1 · edited Mar 25 '15 at 17:06

You could refer to the following sample to automatically populate TextBox in edit mode when specific field is typed.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="../../../Scripts/jquery-1.8.2.js"></script>
<script>
    $(function () {
        $("#GridView1").find("input[title='Val2']").blur(function () {
            var val2 = $(this).val();
            var val1 = $("#GridView1").find("input[title='Val1']").val();
            if (val2 != "" && val1 != "") {
                var total = parseInt(val1) + parseInt(val2);
                $("#GridView1").find("input[title='Total']").val(total);
            } else {
                $("#GridView1").find("input[title='Total']").val("");
            }
        })
    })
</script>
</head>
<body>
<form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="Id" DataSourceID="SqlDataSource1">
            <Columns>
                <asp:BoundField DataField="Id" HeaderText="Id" InsertVisible="False" ReadOnly="True" SortExpression="Id" />
                <asp:BoundField DataField="Val1" HeaderText="Val1" SortExpression="Val1" />
                <asp:BoundField DataField="Val2" HeaderText="Val2" SortExpression="Val2" />
                <asp:BoundField DataField="Total" HeaderText="Total" SortExpression="Total" />
                <asp:CommandField ShowEditButton="True" />
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConflictDetection="CompareAllValues" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" DeleteCommand="DELETE FROM [CalTotal] WHERE [Id] = @original_Id AND (([Val1] = @original_Val1) OR ([Val1] IS NULL AND @original_Val1 IS NULL)) AND (([Val2] = @original_Val2) OR ([Val2] IS NULL AND @original_Val2 IS NULL)) AND (([Total] = @original_Total) OR ([Total] IS NULL AND @original_Total IS NULL))" InsertCommand="INSERT INTO [CalTotal] ([Val1], [Val2], [Total]) VALUES (@Val1, @Val2, @Total)" OldValuesParameterFormatString="original_{0}" SelectCommand="SELECT * FROM [CalTotal]" UpdateCommand="UPDATE [CalTotal] SET [Val1] = @Val1, [Val2] = @Val2, [Total] = @Total WHERE [Id] = @original_Id AND (([Val1] = @original_Val1) OR ([Val1] IS NULL AND @original_Val1 IS NULL)) AND (([Val2] = @original_Val2) OR ([Val2] IS NULL AND @original_Val2 IS NULL)) AND (([Total] = @original_Total) OR ([Total] IS NULL AND @original_Total IS NULL))">
            <DeleteParameters>
                <asp:Parameter Name="original_Id" Type="Int32" />
                <asp:Parameter Name="original_Val1" Type="Int32" />
                <asp:Parameter Name="original_Val2" Type="Int32" />
                <asp:Parameter Name="original_Total" Type="Int32" />
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="Val1" Type="Int32" />
                <asp:Parameter Name="Val2" Type="Int32" />
                <asp:Parameter Name="Total" Type="Int32" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="Val1" Type="Int32" />
                <asp:Parameter Name="Val2" Type="Int32" />
                <asp:Parameter Name="Total" Type="Int32" />
                <asp:Parameter Name="original_Id" Type="Int32" />
                <asp:Parameter Name="original_Val1" Type="Int32" />
                <asp:Parameter Name="original_Val2" Type="Int32" />
                <asp:Parameter Name="original_Total" Type="Int32" />
            </UpdateParameters>
        </asp:SqlDataSource>
    </div>
</form>
</body>
</html>

Dear Shanu Shaji i try this code it did not work, in my code. — hasnain_ahmad, Mar 03 '15 at 11:21

ASPxGridView how to multiply two fields in edit mode and showing in third field

1 Answers1