Last weekend while helping one of my friends on his project, I needed to perform row level client side operation on asp.net gridview. Firstly I googled for finding something similar to “formulae in excel” for asp gridview. When I failed to find something good I decided to go with javascript to perform client side operation on individual gridview rows.
My scenario was of invoice sheet generation, where need was of addition of rows(one for each product selected) dynamically and then perform some calculation like displaying row wise total. On click of Add button new record for item selected in drop down is added(this is done from server side code). Here user can enter values in any of the textboxes. And system has to update values in Total Excessible Value column text box(see image below) accordingly.
For this I wrote two plain javascript functions and called them on onchange event of textbox. Below are grid view and jquery code that I used.
 |
| (Click to enlarge) |
GridView that I used was below:
<asp:GridView ID="gdvInvoiceItems" runat="server" AutoGenerateColumns="False" ShowHeader="true"
OnRowCommand="gdvInvoiceItems_RowCommand">
<EmptyDataTemplate>
No items added yet.
EmptyDataTemplate>
<Columns>
<asp:TemplateField HeaderText="S No.">
<ItemTemplate>
<%# Container.DataItemIndex + 1 %>
<asp:HiddenField ID="hdnItemId" runat="server" Value='<%# Eval("Id") %>' />
ItemTemplate>
asp:TemplateField>
<asp:TemplateField HeaderText="Description of Goods" ItemStyle-CssClass="description">
<ItemTemplate>
<asp:TextBox ID="txtDescription" runat="server" Text='<%# Eval("Description") %>'
CssClass="txtDescStyle">asp:TextBox>
ItemTemplate>
asp:TemplateField>
<asp:TemplateField HeaderText="Quantity(Net)" ItemStyle-CssClass="quantity">
<ItemTemplate>
<asp:TextBox ID="txtQuantity" runat="server" Text='<%# Eval("Quantity") %>' onchange="javascript:Multiply(this, this.value)">asp:TextBox>
ItemTemplate>
asp:TemplateField>
<asp:TemplateField HeaderText="Value Per Unit" ItemStyle-CssClass="value">
<ItemTemplate>
<asp:TextBox ID="txtValue" runat="server" Text='<%# Eval("PerUnitValue") %>' onchange="javascript:Multiply(this, this.value)">asp:TextBox>
ItemTemplate>
asp:TemplateField>
<asp:TemplateField HeaderText="Total Exesible Value" ItemStyle-CssClass="exesiblevalue">
<ItemTemplate>
<asp:TextBox ID="txtTotalExeValue" runat="server" Text='<%# Eval("Total") %>' CssClass="TotalExeValue">asp:TextBox>
ItemTemplate>
asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkBtnRemove" runat="server" Text="Remove" ItemStyle-CssClass="remove">
asp:LinkButton>
ItemTemplate>
asp:TemplateField>
Columns>
asp:GridView>
JavaScript code used:
<script type="text/javascript">
//This method is called when quantity/cost textbox looses focus with some change in content
function Multiply(element, val)
{
var otherElementName = '';
var finalElementName = '';
//id of calling element i.e, quantity/cost textbox
var elementName = element.id;
//get second element, i.e., get quantity if change is in cost and vice-versa
if(endsWith(elementName, "txtQuantity"))
{
otherElementName = elementName.replace("txtQuantity", "txtValue");
}
else if(endsWith(elementName, "txtValue"))
{
otherElementName = elementName.replace("txtValue", "txtQuantity");
}
var otherElement = document.getElementById(otherElementName);
//get textbox where final value is to be displayed
finalElementName = elementName.replace("txtValue", "txtTotalExeValue")
var finalElement = document.getElementById(finalElementName);
finalElement.value = otherElement.value * val;
}
//checks if given string ends with given suffix
function endsWith(str, suffix) {
return str.indexOf(suffix, str.length - suffix.length) !== -1;
}
script>
Highlighted lines onchange="javascript:Multiply(this, this.value)" are the one that are doing the magic. This onchange event doesn't comes in intellisense but it works.
