Multiply Two Column in GridView

Hi All,

In my web application I have one gridview control with the column of Item Price, Quantity and Total.

When I'm enterign values into the textboxes of ItemPrice and Quantity the total textbox want to be fill automatically.

Column4 = Column2*Column3

All the Column have only Textboxes and I need the same operation for the edit mode also.

I think you guys have idea on this, Let me know the same....

Thanks in advance...

You need to create one Computed Column there and add it to data table before populating the Table
Sample

Code:

---

  Dim dt As New DataTable
        Dim column4 As DataColumn
        column4 = New DataColumn()
        column4.ColumnName = "Column4"
        column4.Caption = "Column4"
        column4.Expression = "Column2*Column3"
        dt.Columns.Add(column4)

---

Hey,

In case the above does not fully answer your question, can you perhaps provide some more information.

Can you show the code you are using to add rows to the GridView?

Are you storing the value off into a database, or do you only require it for display purposes?

Gary

Quote:

---

Originally Posted by gep13

Hey,

In case the above does not fully answer your question, can you perhaps provide some more information.

Can you show the code you are using to add rows to the GridView?

Are you storing the value off into a database, or do you only require it for display purposes?

Gary

---

Hi Gary,

Thanks for your reply.

After the calculation only I want to store it into the database.

I told that its just similar to a invoice that where we giving price for a single product and quantity purchased by entering those details the amount(Total) column wan tto fill automatically by multiplying the two column values.

I want java script to do this, Because some one telling me to do this in RowDataBound but its getting postback for each item adding so need in javascript function only,

Please give some idea on this. Thanks.

Hey,

Can you show the code that you are currently using to add rows to the GridView?

I see why you are trying to avoid the postback, but we need to know what code that you are currently using so that we can best advise how to proceed.

Gary

Quote:

---

Originally Posted by gep13

Hey,

Can you show the code that you are currently using to add rows to the GridView?

I see why you are trying to avoid the postback, but we need to know what code that you are currently using so that we can best advise how to proceed.

Gary

---

HI Gary,

Still I'm not doing anything to that one,

But here i have some code from net

Code:

---

private void DataGrid1_ItemDataBound(object sender, DataGridItemEventArgs e){if (e.Item.ItemType != ListItemType.Header && e.Item.ItemType != ListItemType.Footer)                  { e.Item.Cells[2].Text = Convert.ToString(Convert.ToInt32(e.Item.Cells[0].Text.ToString()) * Convert.ToInt32(e.Item.Cells[1].Text.ToString()));} }

---

its for a datagrid like that i needfor a gridview but if I write it in the code behind the page will get postback so it will take time so only I want to do it in Javscript.

Can you tell me now....


Thanks for your reply..........

Hi Gary,

One more thing while entering the values I need the Total calculation, so its best to use javascript. So only I'm looking for javascript code. And I want to do that in the Keypress event of the price and quantity textboxes. Tell your ideas for this.

Thanks again......

If you can write the javascript to sum the numbers in 2 texboxes and display the result in a third then all you need to do is apply the same logic to dynamically generated textboxes in a gridview.

The main difficulty I can think of is how to refrence the controls in javascript because you will not know the id of each textbox when they are rendered. Perhaps you could put <input id='youMakeID' onkeyup='call java 'type=text.../> html tags in
template columns making the id values known when they are rendered in the browser that way your script can refrence the input/textboxes.

Not so easy, maybe there is a custom grid style control that can do this already?

Hey,

I am still not sure that I follow the problem that you are having?!?!

In the code that you posted, when the RowDataBound event is occurring, you are calculating the Total, but when I asked if you were storing this in the value in the database, you said that you were, so in this case, you wouldn't ever need to do this calculation.

So the question that I have is this....

When inserting a row into your database, do you explicitly have a column for the total, or are you always going to calculate that value? If not, when does the calculation of this value occur? What you are describing so far is using javascript to show a display of the total, but how are you persisting this back into the database? Because at the minute, what you are describing won't do that?!?!

Have you thought about using AJAX, so that you don't have to do a full page postback?

Gary

Quote:

---

Originally Posted by gep13

Hey,

I am still not sure that I follow the problem that you are having?!?!



Gary

---

I do. He is deviated from the question

Gary,

Thanks for your reply,

See first I need to populate a empty grid with the footer row only if the user adding anything in that then I need to store it in the database,

Is it clear now or not?

Thanks....

Hey,

That part makes sense, yes, but in order to do that, you are going to need to post back to the server, you can't avoid that.

The question becomes whether you want to have an overall, "Submit Changes" button, or whether you want to submit the changes to the server each time a new row is added.

Gary

Hi Gary,

I think after clicking the addnew button in the gridview then only its going to postback to the server, but for entering values in the rows it not going to postback, is it?

So while entering the values in the first and secont textbox I need the total in the third textbox......

Thanks for your reply.....

Quote:

---

Originally Posted by sarathi125

Gary,

Thanks for your reply,

See first I need to populate a empty grid with the footer row only if the user adding anything in that then I need to store it in the database,

Is it clear now or not?

Thanks....

---

Um no.. Why have an empty grid with controls only in the footer. You could just have the controls on the page

Hi Brin,

For a New invoice we need to show an empty grid only know, is there any other way for that.... I think nothing else to show an empty grid so only, tell me how to make the total in the keypress event of the column one and two textboxes of the gridview....in javascript.

Thanks for your reply.....

Hey,

It isn't quite as simple as that. We are still only getting pieces of the problem that you are currently trying to solve. We need to know EXACTLY what you are doing, in order to correctly advise you on how to proceed.

For what I "think" you are describing, I don't think a GridView is the right control.

Am I correct in saying that what you are trying to do is this:

1) Create an Invoice Entry Form
2) User enters the Unit Price and Quantity of each line item, which is entered into a "Grid", and the total for that line item is automatically calculated
3) User enters other line items as required, and a Grand Total for all the line items is kept up to date
4) Once the user is happy with all the line items, a "Process Invoice" button is pressed and the Invoice is submitted and stored in the database.

Does that sound about right?

If not, please can you modify the above.

If the above is correct, then a GridView is not an obvious fit, as any changes really need to be posted back to the server, in order to re-render the control.

Gary

Hi Gary,

I need only gridview because it is the requirement for my project,

so please tell me something related to it...

Thanks......

Hey,

I am trying to tell you, but you don't seem to be listening!!

A GridView is not a simple control to interactive with from the client side. This is for a number of reasons, namely that it expects to be databound, which means that any rows that you do add, will not immediately be available on the server when you post back. Also, any controls that you do render from the server, will not be immediately available since you will also have to render the ClientID for the control

There is a lot more to this than you might think, and I would suggest that you need to read up on this before going forward.

Gary

sarathi125

Alot of time has been given trying to help you. I suggest you start building your page,grid,project whatever and when you get stuck post your code and a question about the probem. You can't expect continued help otherwise.

Hi Brin,

I got Some Javascript for this, I used it in the Gridview footer textbox Price and Quantity in the OnBlur Event.....

It will multiplying but showing some unknown result in the 4th entire column,

I checking myself,

Thanks for your reply....

Code:

---

   
<script language="javascript" type="text/javascript">

        var grdclientid='<%=gvExpenseDtl.ClientID%>';

        function Grid()

        {

            var grd =document.getElementById(grdclientid);       

            var cell2;

            var cell3;

           

            for (var i=1; i < grd.rows.length; i++)

            {           

                var rowElem = grd.rows[i];

                cell2=rowElem.cells[2].innerHTML;

                cell3=rowElem.cells[3].innerHTML;

                rowElem.cells[4].innerHTML=cell2 * cell3;

            }           

        }

    </script>

---

Hey,

So am I right in thinking that the above code, loops through all the rows in the GridView, and adds the value from cells 2 and 3, and places that result in cell 4?

If so, how did the values already get into Cells 2 and 3? If they are coming from the database, then I did see why this calculation has to be done on the client side. It can either be done directly from the database, or done as an expression on the fourth column as Dana suggested originally.

You are still not telling us the whole story of what your requirement is!?!?!

Gary

Quote:

---

Originally Posted by gep13

Hey,

So am I right in thinking that the above code, loops through all the rows in the GridView, and adds the value from cells 2 and 3, and places that result in cell 4?

If so, how did the values already get into Cells 2 and 3? If they are coming from the database, then I did see why this calculation has to be done on the client side. It can either be done directly from the database, or done as an expression on the fourth column as Dana suggested originally.

You are still not telling us the whole story of what your requirement is!?!?!

Gary

---

Hi Gary,

COOOOOL,

The value for the cells 2 and 3 will not come from database, the user needs to give it in the run time then we need cell4=cell2*cell3.

The above script not getting the correct textbox value thats the problem...

Tell me know what to do next....

Thanks for your reply.

Hey,

Well what does that above script currently give you?

Can you take a screen shot of what you are getting?

Gary

Hi Gary,

Here is the screen

See in this Screen I need the LineTotal for each row individually...

Tell me your ideas....

Thanks for your reply

Hey,

Ok, so can you show your aspx markup for the GridView? Also, where are you tying up the OnBlur event to the javascript function?

Gary

Hi Gary,

Its only My GridView Aspx code

Code:

---

<asp:GridView ID="gvExpenseDtl" runat="server"
AutoGenerateColumns="False"  OnRowCancelingEdit="gvExpenseDtl_RowCancelingEdit" 
    OnRowDataBound="gvExpenseDtl_RowDataBound" OnRowEditing="gvExpenseDtl_RowEditing" OnRowUpdating="gvExpenseDtl_RowUpdating" OnRowCommand="gvExpenseDtl_RowCommand" ShowFooter="True" OnRowDeleting="gvExpenseDtl_RowDeleting">

<Columns>
<asp:TemplateField HeaderText="Event">
<ItemTemplate>
  <asp:DropDownList ID="ddlEvent" runat="server" ForeColor="#25587E" Width="180px" >
  </asp:DropDownList>
</ItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="ddlNewEvent" runat="server" Width="180px"></asp:DropDownList>
</FooterTemplate>
    <HeaderStyle BackColor="#CEE3F6" ForeColor="#003466" />
</asp:TemplateField>

<asp:TemplateField HeaderText="Expense Detail" SortExpression="Quantity">
<EditItemTemplate>
  <asp:TextBox ID="txtExpDtl" runat="server" ForeColor="#25587E" Width="40px" Text='<%# Eval("ExpenseDetail") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
  <asp:TextBox ID="txtNewExpDtl" runat="server" Width="60px"></asp:TextBox> </FooterTemplate>
<ItemTemplate>
  <asp:Label ID="Label2" runat="server" Text='<%# Bind("ExpenseDetail") %>'></asp:Label>
</ItemTemplate>
    <HeaderStyle BackColor="#CEE3F6" ForeColor="#003466" />
</asp:TemplateField>

<asp:TemplateField HeaderText="&lt;font color= red&gt;*&lt;/font&gt;Cost Each">
<EditItemTemplate>
<table><tr><td><asp:Label ID="lblCurrency" runat="server">$</asp:Label></td>
<td><asp:TextBox ID="txtCostEach" runat="server" Text='<%# Bind("CostEa") %>' ></asp:TextBox></td></tr></table>

 
</EditItemTemplate>
<FooterTemplate>
<table><tr><td><asp:Label ID="lblCurrency3" runat="server">$</asp:Label></td>
<td><asp:TextBox ID="txtNewCostEach" runat="server" Width="60px" OnBlur="Grid()"></asp:TextBox></td></tr></table>
  <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender3" runat="server" TargetControlID="txtNewCostEach" FilterType="Numbers" >
</cc1:FilteredTextBoxExtender> 
</FooterTemplate>
<ItemTemplate>
  <asp:Label ID="Label3" runat="server" Text='<%# Bind("CostEa") %>'></asp:Label>
</ItemTemplate>
    <HeaderStyle BackColor="#CEE3F6" ForeColor="#003466" />
</asp:TemplateField>


<asp:TemplateField HeaderText="&lt;font color= red&gt;*&lt;/font&gt;Quantity">
<EditItemTemplate>
  <asp:TextBox ID="txtQty" runat="server" Text='<%# Bind("Quantity") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
  <asp:TextBox ID="txtNewQty" runat="server" Width="60px" OnBlur="Grid()"></asp:TextBox>
  <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender4" runat="server" TargetControlID="txtNewQty" FilterType="Numbers" >
</cc1:FilteredTextBoxExtender> 
</FooterTemplate>
<ItemTemplate>
  <asp:Label ID="Label4" runat="server" Text='<%# Bind("Quantity") %>'></asp:Label>
</ItemTemplate>
    <HeaderStyle BackColor="#CEE3F6" ForeColor="#003466" />
</asp:TemplateField>

<asp:TemplateField HeaderText="Line Total">
<EditItemTemplate>
<table><tr><td><asp:Label ID="lblCurrency1" runat="server">$</asp:Label></td>
<td>  <asp:TextBox ID="txtLineTotal" runat="server" Text='<%# Bind("LineTotal") %>'></asp:TextBox> </td></tr></table>
</EditItemTemplate>
<FooterTemplate>
<table><tr><td><asp:Label ID="lblCurrency2" runat="server">$</asp:Label></td>
<td><asp:TextBox ID="txtNewLineTotal" runat="server" Width="60px" ></asp:TextBox></td></tr></table>
  <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender2" runat="server" TargetControlID="txtNewLineTotal" FilterType="Numbers" >
</cc1:FilteredTextBoxExtender>
</FooterTemplate>
<ItemTemplate>
  <asp:Label ID="Label5" runat="server" Text='<%# Bind("LineTotal") %>'></asp:Label>
</ItemTemplate>
    <HeaderStyle BackColor="#CEE3F6" ForeColor="#003466" />
</asp:TemplateField>

<asp:TemplateField>
<EditItemTemplate>
  <asp:TextBox ID="txtExpenseID" runat="server" Text='<%# Bind("ExpenseID") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
  <asp:Label ID="Label6" runat="server" Text='<%# Bind("ExpenseID") %>'></asp:Label>
</ItemTemplate>
    <HeaderStyle BackColor="#CEE3F6" ForeColor="#003466" />
</asp:TemplateField>

<asp:TemplateField HeaderText="Edit" ShowHeader="False">
 <EditItemTemplate>
  <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True" CommandName="Update" Text="Update"></asp:LinkButton>
  <asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel"></asp:LinkButton>
</EditItemTemplate>
<FooterTemplate>
  <asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="true" ValidationGroup = "SaveExp" CommandName="AddNew" Text="Add New"></asp:LinkButton>
</FooterTemplate>
 <ItemTemplate>
  <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Edit" Text="Edit"></asp:LinkButton>
</ItemTemplate>
    <HeaderStyle BackColor="#CEE3F6" ForeColor="#003466" />
 </asp:TemplateField>
<asp:CommandField HeaderText="Delete" ShowDeleteButton="True" ShowHeader="True" >
    <HeaderStyle BackColor="#CEE3F6" ForeColor="#003466" />
</asp:CommandField>



</Columns>
</asp:GridView>

---

<deleted>

rjv_rnjn,

This is the point I was trying to make earlier.

I don't think there are any rows to bind when the page is first loaded, so you can't do it before it is rendered.

From what I understand, I couldn't be completely wrong though, the intention is for all the rows to be added on the client, and then submitted to the server.

Gary

Gary, I think I didn't go through the entire post chain. I deleted my post before I could see your response. Sorry for the confusion. :o

Hey,

Don't apologise, no need for that :)

I could be completely off, and would welcome other opinions, as I am struggling to follow myself!

Gary

rjv_rnjn,

Things are getting a little clearer but not quite clear enough yet. We see your grid and JScript but I'm uncertain about the sequence of events. Can you step through them so we know when and where they should happen like

1. page load : data bound to grid.....yes/no?
2. user does something somewhere (footer) some client event happens
3. user clicks button - something happens
4.......