Gridview with on row computation part 1
Posted on October 3, 2007 - Filed Under ASP.NET |
On this tutorial, I would like to show you how to create a gridview with on the fly computation per row.
For this project we would need to have a gridview with 5 columns: UserName, rate, weight, score, and edit/update button with delete or cancel button. The username will be fix and will be coming from a database table. While the rate and weight will have a default value of 0 and user can edit it or update it. Score will be the product of rate and weight, which are user inputs.
So first off, we need to create a gridview. From the toolbox, you can drag and drop a gridview to your form and name your grid ‘grdComputeScore’.
Or turn to the html source view of your page and paste the following codes:
<asp:GridView ID=”grdComputeScore”
runat=”server”
AutoGenerateColumns=”False”
DataKeyNames=”ID”
OnRowCancelingEdit=”grdComputeScore _RowCancelingEdit”
OnRowEditing=” grdComputeScore _RowEditing”
OnRowUpdating=” grdComputeScore _RowUpdating”
OnRowDeleting=” grdComputeScore _RowDeleting”>
<Columns>
<asp:TemplateField HeaderText=”UserName”>
<EditItemTemplate>
<asp:Label Runat=”Server”
Text=’<%# Eval(”UserName”) %>’
Width=”100%”/>
<asp:TextBox runat=”server”
ID=”txtUserID”
Text=’<%# DataBinder.Eval(Container.DataItem, “UserID”) %>’
Visible=”false” />
</EditItemTemplate>
<ItemTemplate>
<asp:Label Runat=”Server”
Text=’<%# Eval(”Factor”) %>’
Width=”100%”/>
<asp:TextBox runat=”server”
ID=”txtUserID”
Text=’<%# DataBinder.Eval(Container.DataItem, “UserID”) %>’
Visible=”false” />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=”Rate”>
<EditItemTemplate>
<asp:TextBox Runat=”Server”
id=”txtEditRate”
Text=’<%# DataBinder.Eval(Container.DataItem, “Rate”) %>’
DataFormatString=”{0:c}”
Width=”80″
Font-Size=”8pt”/>
<asp:CompareValidator runat=”server”
ID=”validateRate”
ValidationGroup=”score”
ControlToValidate=”txtEditRate”
Type=”Double”
Display=”dynamic”
ErrorMessage=”Rate is not a valid value.<br />” />
</EditItemTemplate>
<ItemTemplate>
<asp:Label Runat=”Server”
Text=’<%# DataBinder.Eval(Container.DataItem, “Rate”) %>’
DataFormatString=”{0:c}”
Width=”100%”/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=”Weight”>
<EditItemTemplate>
<asp:TextBox Runat=”Server”
id=”txtEditWeight”
Text=’<%# DataBinder.Eval(Container.DataItem, “Weight”) %>’
DataFormatString=”{0:c}”
Width=”80″
Font-Size=”8pt”/>
<asp:CompareValidator runat=”server”
ID=”validateWeight”
ValidationGroup=”Process”
ControlToValidate=”txtEditWeight”
Type=”Double”
Display=”dynamic”
ErrorMessage=”Weight is not a valid value.<br />” />
</EditItemTemplate>
<ItemTemplate>
<asp:Label Runat=”Server”
Text=’<%# DataBinder.Eval(Container.DataItem, “Weight”) %>’
DataFormatString=”{0:c}”
Width=”100%”/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=”Score”>
<EditItemTemplate>
<asp:TextBox Runat=”Server”
id=”txtEditScore”
Text=’<%# DataBinder.Eval(Container.DataItem, “Score”) %>’
DataFormatString=”{0:c}”
Width=”80″
Font-Size=”8pt”
Readonly=”true”/>
</EditItemTemplate>
<ItemTemplate>
<asp:Label Runat=”Server”
Text=’<%# DataBinder.Eval(Container.DataItem, “Score”) %>’
Runat=”Server”
DataFormatString=”{0:c}”
Width=”100%”/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<EditItemTemplate>
<asp:Button Runat=”Server”
Text=”Update”
CommandName=”Update”
Font-Size=”7pt”
Width=”35px”/>
<asp:Button Runat=”Server”
Text=”Cancel”
CommandName=”Cancel”
Font-Size=”7pt”
Width=”35px”/>
</EditItemTemplate>
<ItemStyle Wrap=”False”></ItemStyle>
<ItemTemplate>
<asp:Button Runat=”Server”
Text=”Edit” CommandName=”Edit”
Font-Size=”7pt”
Width=”35px”/>
<asp:Button Runat=”Server”
Text=”Delete” CommandName=”Delete”
Font-Size=”7pt”
Width=”35px”/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
***************
The html code above creates a gridview with 4 column fields (1) UserName, (2) rate, (3)weight, (4) score. and two other columns for edit/update and delete/cancel buttons.
As you can see, we have labels for factor as this is going to be a fix item. While the rate, weight and score can be edited, so we have textboxes on edittemplate. But with score, the textbox is set to readonly = true because we would want user to input anything on this. Score wil be the product of weight and rate.
By default, we want the the grid to show all users with their rate and weight = 0. So we will set this on our code behind page which i would be discussing in part 2.
The default value can be edited or updated, we would like to check if user is entering or inputing a correct value. So we need to have on row validation. That is why we have CompareValidators after each textboxes in the rate and weight to check if values are correct. If you can see, we dont have CompareValidator after the txtScore because there wont be any user interaction on this.
We also have to set the dataformats for the rate, weight and score to decimal format or to two digit after the period, so we used DataFormatString=”{0:c}”
Comments
Leave a Reply