I used this jQuery function to find out the sum of a certain column in asp.net GridView, this is a good start from where you can traverse all row of GridView and do the manipulation.

function gridValueRecalculate() {
    var grdTotalSum = 0;
    var $idattr;
    var changeStatus = '';
    $("#GridView1 > tbody > tr > td ").each(function() {

        $idattr = $(this).find(".TextBoxRight");
        // var currval = $idattr.val();
        if ($idattr.val() > 0) {

            grdTotalSum = grdTotalSum + parseFloat($idattr.val());
            $('#txtGridTotal').val(grdTotalSum.toFixed(2));
            changeStatus = 'change'

        }
    });

    if (changeStatus == 'change') {
        fnCalculateLastBillAmount();
    }
}

Today I was reading www.asp.net forums for some Q/A  & I found one interesting Query regarding Gridview sorting. So I feel that let me share it with others also.

Query Posted by Kamran Shahid

I am using built in sorting in gridview. The links on the headers column shows like

javascript:__doPostBack(‘GridView1′,’Sort$au_fname’)

Is tehre any way I can change the display of that link like for example it may show # or au_fname only.

Solutions by Imran Baloch

With JQuery

<script language="javascript">
$(function(){
    $("a[href]").each(function(n){
        if(this.href.indexOf("GridView1")>-1)
        {
            var a=this.href;
            this.href="#";
            $(this).click(function(event){
                this.href=a;
            });
        }
    });
});
</script>

Without JQuery

<script language="javascript">
 var tags = document.getElementsByTagName('a');
 for (var i=0; i < tags.length; i++)
 {
      if(tags[i].href.indexOf("GridView1")>-1)
      {
            tags[i].custom1=tags[i].href;
            tags[i].href="#";
            tags[i].onclick=function(event){
                alert(this.custom1);
                thisthis.href=this.custom1;
            }
      }
 }
</script>  

Hope this will help !!!

Happy Programming

Index was out of range. Must be non-negative and less than the size of the collection.

This error just greeted me while testing a log page that uses an ASP.NET GridView control for displaying tabular data. When navigating to the last page and then trying to navigate back up to a more recent page, my code was failing on a line in the RowCommand event, which seemed strange to me. Then, I realized that the pager is in the header, which is a row, itself, and any actions on the header row go through the RowCommand function and the code was failing on a call to set thisRow = gv.rows(e.CommandArgument mod gv.PageSize). When the header row calls the RowCommand function, e.CommandArgument = -1, apparently.

A couple of solutions are:

1. Wrap the entire contents of the RowCommand function with an if-statement to check for e.CommandArgument > -1
2. Wrap the contents of the RowCommand function with an if-statement to check for e.CommandName = “Page”

I found solution 2 on a message board. Apparently, when you’re clicking on one of the pager buttons in the header, the CommandName is set to “Page”.

This has taken about 2 hours to troubleshoot, and the solution was simple–yet another A-S-S (Always Something Simple) solution…

Here in this post,i m gonna show how to change background color of last updated record in gridview.

Normally what happens after we have updated any record we redirect or bind grid again, so grid comes to first page and we dont know which record we updated if there are many records.

Lets say we have a gridview with 15 records and paging of 5.

If we go to page 2 and click on “edit” link of 8th record in gridview and update that record, now after that we have to change the background row color of 8th record in gridview on 2nd page. So for that we have to maintain the primary key of that record and page index in session whenever we call edit method.

Now on gridview row databound you have to do this code:

protected void Gv_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
int id = Convert.ToInt32(Gv.DataKeys[e.Row.RowIndex].Value.ToString());
if (id == Convert.ToInt32(Session["pkid"]))
e.Row.CssClass = “UpdateRecordCss”;

}

}

also after binding grid you have to maintain page index

BindDetails();
GvMake.PageIndex = Convert.ToInt32(Session["pgindex"]);

Css for that is as follows:

.UpdateRecordCss td
{

background-color: Green;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=’#B09900′,EndColorStr=’#FFF192′); /*FILTER: progid:DXImageTransform.Microsoft.Alpha( style=1,opacity=25,finishOpacity=100,startX=0,finishX=100,startY=100,finishY=0);*/
}

Recently working with one of the asp.net applicationI just noticed that clicking on CommadFiled Column image icon causing the page posted back twice.
In first postback the Page.IsPostBack was false and in second postback the Page.IsPostBack was true.

Surprisingly the issue is only on internet explorer 8. In firefox and IE6 it was working fine as expected.

Googling it for a while i found it is known bug submited to microsoft.
http://connect.microsoft.com/VisualStudio/feedback/ViewFeedback.aspx?FeedbackID=105123

They said its fixed, but event if I am using .Net framework 3.5 SP1, the issue is still there.

Anyway I tried a workaround suggested there, and converted the commadfield to templated field with image buttons. which solves it

I’m blogging about this as it is a constant speedbump I find myself crossing. We’ve been using TemplateFields in gridviews exclusively for a couple of years now since we’ve always found ourselves having to convert BoundFields to TemplateFields in order to get extra functionality that we need in most cases. There’s extra coding to do, but we only use what we need, and, thus, i’m assuming that it’s a little more efficient. I’ll reasearch the topic and include it in another blog.

If, in the item template, a label is used to display text, I’ve gone around-and-around, via trial and error, trying to display dates with the short date format. Today I stumbled upon a link that provides solutions for both BoundFields & labels inside of TemplateFields: http://www.codedigest.com/Articles/ASPNET/137_How_to_format_DateTime_in_GridView_BoundColumn_and_TemplateColumn.aspx

The solution for the label inside of the TemplateField, which I’m most concerned about here, is:

1. Be sure to use Eval rather than Bind (I always use Bind–this was the ‘Gotcha!’) in the text property of the label
2. in Eval, include the format string in the second parameter (i.e.  Eval(“Field_Name”, “{0:d}”) )

That was a simple fix that took me 2 hours of trial and error to get nowhere before finally searching for a solution elsewhere!

Lets say we want to bind a gridview with table having Fields

1) Customer Name

2) Category

Now in the database Category field is stored as tiny int like 0 or 1 or 2

0 Stands for Sales

1 Stands for Marketing

2 Stands for Production

So, now when the gridview is bind, it will display o,1 values. instead of this we want their respective category name to be displayed.

For this we define a ENUM as follows

public enum Category
{

Sales= 0,

Marketing= 1,

Production= 2
}

Now in the gridview source in the template field write this code.

<asp:TemplateField HeaderText=”Category”>
<ItemTemplate>
<div>
<%# Enum.GetName(typeof(GlobalLibrary.Constants.Category),Convert.ToInt32(Eval(“Category”))) %>
</div>
</ItemTemplate>
</asp:TemplateField>

Here in Globallibray.Constants is my project with Constants Class.. you can replace it with yours..

ListView control is inherited by ListBox class and it contains all the functionality of List Box class. Here is a class diagram of ListView class.

List view define a property View that define the presentation of the List view. WPF already provide one presentation for ListBox class named GridView. If we want to define our own presentation then we have to inherit our class from ViewBase class. ViewBase is an abstract class and View Property of ListView class has the ViewBase data type. Here is a class diagram to explain this.

Now lets take a look at simple usage of GridView class. Our C# code is very similar to List box example there  we define list of string. Here is C# code of this.

  1: using System;

  2: using System.Collections.Generic;

  3: using System.Linq;

  4: using System.Text;

  5: using System.Windows;

  6: using System.Windows.Controls;

  7: using System.Windows.Data;

  8: using System.Windows.Documents;

  9: using System.Windows.Input;

 10: using System.Windows.Media;

 11: using System.Windows.Media.Imaging;

 12: using System.Windows.Navigation;

 13: using System.Windows.Shapes;

 14:

 15: namespace UIElement

 16: {

 17:     /// <summary>

 18:     /// Interaction logic for Window1.xaml

 19:     /// </summary>

 20:     public partial class Window1 : Window

 21:     {

 22:         public List<String> items

 23:         { get; set; }

 24:

 25:         public Window1()

 26:         {

 27:             InitializeComponent();

 28:

 29:             items = new List<string>();

 30:             items.Add("Maryland");

 31:             items.Add("California");

 32:             items.Add("Taxes");

 33:             items.Add("Washington");

 34:             items.Add("Virginia");

 35:

 36:             list.ItemsSource = items;

 37:         }

 38:     }

 39: }

 40: 

Here is XAML code of our project.

  1: <Window x:Class="UIElement.Window1"

  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  4:     xmlns:local="clr-namespace:UIElement"

  5:     Title="ListView Example" Height="300" Width="400">

  6:     <Grid>

  7:         <ListView Name="list" Margin="5" HorizontalContentAlignment="Stretch">

  8:             <ListView.View>

  9:                 <GridView>

 10:                     <GridViewColumn Width="Auto" Header="States Name" DisplayMemberBinding="{Binding}"/>

 11:                 </GridView>

 12:             </ListView.View>

 13:         </ListView>

 14:     </Grid>

 15: </Window>

 16: 

Here is the output of this program.

We use and ♥ DevExpress controls! In WinForms, in ASP.net, in WPF, in anything!

But every now and then you come across something that should be very simple to do, but it just isn’t so. So you just have to do things the hard way… this consumes time (to develop), this add complexity (to reading, understanding and debugging) and it adds noise (to the real logic and code).

One such little quirk that I’ve hit was that the GridColumn’s on the DevExpress GridControl/GridView have no way to set a MaxLength on the field. This is because they do not actually support editing but rather inherit this capability from a default BaseEdit instance within the cell.

The trick is then to grab this BaseEdit for the cell you want and set its MaxLength. The simplest and fastest was to do this is by using the GridView ShownEditor event as shown in this simple example.

    private void gridViewItemList_ShownEditor(object sender, EventArgs e)
    {
        BaseEdit edit = ((BaseView) sender).ActiveEditor;
        GridView view = sender as GridView;

        if (view != null && edit is TextEdit)
        {
            switch (view.FocusedColumn.FieldName)
            {
                case "Reorder":
                case "Code":
                    (edit as TextEdit).Properties.MaxLength = 25;
                    break;
                case "Alias":
                    (edit as TextEdit).Properties.MaxLength = 20;
                    break;
                case "Description":
                    (edit as TextEdit).Properties.MaxLength = 50;
                    break;

            }
        }
    }

Hopefully this helps as the alternative common approach is to create a repositoryItemTextEdit for each column, assign it to the column and then set up your repositoryItemTextEdit to behave the way you like, not nice if you have a few dozen columns !

When a button is clicked in a GridView control, the RowCommand event is raised. The GridView control has built-in functionality for operations such as edit, delete, and paging. You can also add buttons and use the RowCommand event to add custom functionality to the control.

You can add custom functionality to a GridView control in the following ways:

• By adding a ButtonField field to the GridView control.
• By adding a Button, LinkButton, or ImageButton controls to a template in the GridView control.

You can use the CommandName property of the event argument to identify the button’s function in the event handler method. If you are working with ButtonField or TemplateField objects, you can also use the CommandArgument property to identify the current row. When you are using a ButtonField object, the CommandArgument property is set automatically to the row index. When you are using a TemplateField object, the CommandArgument property is not automatically set by the control. In that case, if you have to determine the row index in the event handler, you can set the CommandArgument property of the button to the row index by using a data-binding expression.

To respond to button events in the GridView control

1. Set the button’s CommandName property to a string that identifies its function, such as “Print” or “Copy”.
2. If you are using the TemplateField object and have to access the row index in the event handler method set the button’s CommandArgument property to an expression that identifies the current row.

The following example shows how you can set the CommandArgument property of a button in a TemplateField column to the current row index. In the example, the column contains a Button control that displays a shopping cart.

Visual Basic

<asp:TemplateField>

  <ItemTemplate>

    <asp:Button runat="server"

      CommandName="AddToCart"

      CommandArgument="<%# CType(Container,GridViewRow).RowIndex %>"

      Text="Add to Cart" />

  </ItemTemplate>

</asp:TemplateField>

C#

<asp:TemplateField>

  <ItemTemplate>

    <asp:Button runat="server"

      CommandName="AddToCart"

      CommandArgument="<%# ((GridViewRow) Container).RowIndex %>"

      Text="Add to Cart" />

  </ItemTemplate>

</asp:TemplateField>

1. Create a method for the RowCommand event of the GridView control. In the method, do the following:
   1. Check the CommandName property of the event-argument object to see what string was passed.
   2. Retrieve the index of the row that contains the button by using the CommandArgument property, if required.
   3. Perform the appropriate logic for the button that the user clicked.

The following example shows how you can respond to a button click in a GridView control. In the example, a button in a TemplateField column sends the command “AddToCart”. The RowCommand event handler determines which button was clicked. If it was the shopping cart button, the code performs the appropriate logic.

Visual Basic

Protected Sub GridView1_RowCommand(ByVal sender As Object, _

  ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs)

  If (e.CommandName = "AddToCart") Then

    ' Retrieve the row index stored in the CommandArgument property.

    Dim index As Integer = Convert.ToInt32(e.CommandArgument)

    ' Retrieve the row that contains the button

    ' from the Rows collection.

    Dim row As GridViewRow = GridView1.Rows(index)

    ' Add code here to add the item to the shopping cart.

  End If

End Sub

C#

protected void GridView1_RowCommand(object sender,

  GridViewCommandEventArgs e)

{

  if (e.CommandName == "AddToCart")

  {

    // Retrieve the row index stored in the

    // CommandArgument property.

    int index = Convert.ToInt32(e.CommandArgument);

    // Retrieve the row that contains the button

    // from the Rows collection.

    GridViewRow row = GridView1.Rows[index];

    // Add code here to add the item to the shopping cart.

  }

  }

For an example that uses the ButtonField class, see the GridView..::.RowCommand event documentation.

GridView…:: .RowCommand Event

Occurs when a button is clicked in a GridView control

Namespace: System.Web.UI.WebControls

Assembly: System.Web (in System.Web.dll)

Visual Basic (Declaration)

Public Event RowCommand As GridViewCommandEventHandler

Visual Basic (Usage)

Dim instance As GridView

Dim handler As GridViewCommandEventHandler

AddHandler instance.RowCommand, handler

C#

public event GridViewCommandEventHandler RowCommand

Visual C++

public:

event GridViewCommandEventHandler^ RowCommand {

void add (GridViewCommandEventHandler^ value);

void remove (GridViewCommandEventHandler^ value);

}

JScript

JScript does not support events.

ASP.NET

<asp:GridView OnRowCommand=”GridViewCommandEventHandler” />

The RowCommand event is raised when a button is clicked in the GridView control. This enables you to provide an event-handling method that performs a custom routine whenever this event occurs.

Buttons within a GridView control can also invoke some of the built-in functionality of the control. To perform one of these operations, set the CommandName property of a button to one of the values in the following table.

Although the RowCommand event is raised when a button listed in the previous table is clicked, it is recommended that you use the events listed in the table for the operation.

A GridViewCommandEventArgs object is passed to the event-handling method, which enables you to determine the command name and command argument of the button clicked.

Examples

The following example demonstrates how to use the RowCommand event to add the name of a customer from a GridView control to a ListBox control when a row’s Add button is clicked.

Visual Basic

<%@ Page language=”VB” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<script runat=”server”>

Sub ContactsGridView_RowCommand(ByVal sender As Object, ByVal e As GridViewCommandEventArgs)

‘ If multiple buttons are used in a GridView control, use the

‘ CommandName property to determine which button was clicked.

If e.CommandName = “Add” Then

‘ Convert the row index stored in the CommandArgument

‘ property to an Integer.

Dim index As Integer = Convert.ToInt32(e.CommandArgument)

‘ Retrieve the row that contains the button clicked

‘ by the user from the Rows collection.

Dim row As GridViewRow = ContactsGridView.Rows(index)

‘ Create a new ListItem object for the contact in the row.

Dim item As New ListItem()

item.Text = Server.HtmlDecode(row.Cells(2).Text) & ” ” & _

Server.HtmlDecode(row.Cells(3).Text)

‘ If the contact is not already in the ListBox, add the ListItem

‘ object to the Items collection of the ListBox control.

If Not ContactsListBox.Items.Contains(item) Then

ContactsListBox.Items.Add(item)

End If

End If

End Sub

</script>

<html  >

<head id=”Head1″ runat=”server”>

<title>GridView RowCommand Example</title>

</head>

<body>

<form id=”form1″ runat=”server”>

<h3>GridView RowCommand Example</h3>

<table width=”100%”>

<tr>

<td style=”width:50%”>

<asp:gridview id=”ContactsGridView”

datasourceid=”ContactsSource”

allowpaging=”true”

autogeneratecolumns=”false”

onrowcommand=”ContactsGridView_RowCommand”

runat=”server”>

<columns>

<asp:buttonfield buttontype=”Link”

commandname=”Add”

text=”Add”/>

<asp:boundfield datafield=”ContactID”

headertext=”Contact ID”/>

<asp:boundfield datafield=”FirstName”

headertext=”First Name”/>

<asp:boundfield datafield=”LastName”

headertext=”Last Name”/>

</columns>

</asp:gridview>

</td>

<td style=”vertical-align:top; width:50%”>

Contacts: <br/>

<asp:listbox id=”ContactsListBox”

runat=”server” Height=”200px” Width=”200px”/>

</td>

</tr>

</table>

<!– This example uses Microsoft SQL Server and connects    –>

<!– to the AdventureWorks sample database. Use an ASP.NET  –>

<!– expression to retrieve the connection string value     –>

<!– from the Web.config file.                              –>

<asp:sqldatasource id=”ContactsSource”

selectcommand=”Select [ContactID], [FirstName], [LastName] From Person.Contact”

connectionstring=”<%$ ConnectionStrings:AdventureWorks_DataConnectionString%>”

runat=”server”/>

</form>

</body>

</html>

C#

<%@ Page language=”C#” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<script runat=”server”>

void ContactsGridView_RowCommand(Object sender, GridViewCommandEventArgs e)

{

// If multiple buttons are used in a GridView control, use the

// CommandName property to determine which button was clicked.

if(e.CommandName==”Add”)

{

// Convert the row index stored in the CommandArgument

// property to an Integer.

int index = Convert.ToInt32(e.CommandArgument);

// Retrieve the row that contains the button clicked

// by the user from the Rows collection.

GridViewRow row = ContactsGridView.Rows[index];

// Create a new ListItem object for the contact in the row.

ListItem item = new ListItem();

item.Text = Server.HtmlDecode(row.Cells[2].Text) + ” ” +

Server.HtmlDecode(row.Cells[3].Text);

// If the contact is not already in the ListBox, add the ListItem

// object to the Items collection of the ListBox control.

if (!ContactsListBox.Items.Contains(item))

{

ContactsListBox.Items.Add(item);

}

}

}

</script>

<html  >

<head runat=”server”>

<title>GridView RowCommand Example</title>

</head>

<body>

<form id=”form1″ runat=”server”>

<h3>GridView RowCommand Example</h3>

<table width=”100%”>

<tr>

<td style=”width:50%”>

<asp:gridview id=”ContactsGridView”

datasourceid=”ContactsSource”

allowpaging=”true”

autogeneratecolumns=”false”

onrowcommand=”ContactsGridView_RowCommand”

runat=”server”>

<columns>

<asp:buttonfield buttontype=”Link”

commandname=”Add”

text=”Add”/>

<asp:boundfield datafield=”ContactID”

headertext=”Contact ID”/>

<asp:boundfield datafield=”FirstName”

headertext=”First Name”/>

<asp:boundfield datafield=”LastName”

headertext=”Last Name”/>

</columns>

</asp:gridview>

</td>

<td style=”vertical-align:top; width:50%”>

Contacts: <br/>

<asp:listbox id=”ContactsListBox”

runat=”server” Height=”200px” Width=”200px”/>

</td>

</tr>

</table>

<!– This example uses Microsoft SQL Server and connects    –>

<!– to the AdventureWorks sample database. Use an ASP.NET  –>

<!– expression to retrieve the connection string value     –>

<!– from the Web.config file.                              –>

<asp:sqldatasource id=”ContactsSource”

selectcommand=”Select [ContactID], [FirstName], [LastName] From Person.Contact”

connectionstring=”<%$ ConnectionStrings:AdventureWorks_DataConnectionString%>”

runat=”server”/>

</form>

</body>

</html>

The following example demonstrates how to use the RowCommand event to update the price of a product when a row’s button is clicked. This example has the paging functionality enabled for the GridView control and sets the CommandArgument property of the Button control to the appropriate row index.

Visual Basic

<%@ Page language=”VB” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<script runat=”server”>

Sub ProductsGridView_RowCommand(ByVal sender As Object, ByVal e As GridViewCommandEventArgs)

‘ If multiple buttons are used in a GridView control, use the

‘ CommandName property to determine which button was clicked.

If e.CommandName = “Increase” Then

‘ Convert the row index stored in the CommandArgument

‘ property to an Integer.

Dim index = Convert.ToInt32(e.CommandArgument)

‘ Retrieve the row that contains the button clicked

‘ by the user from the Rows collection.

Dim row = ProductsGridView.Rows(index)

‘ Calculate the new price.

Dim listPriceTextBox = CType(row.FindControl(“PriceLabel”), Label)

listPriceTextBox.Text = (Convert.ToDouble(listPriceTextBox.Text) * 1.05).ToString()

‘ Update the row.

ProductsGridView.UpdateRow(index, False)

End If

End Sub

</script>

<html  >

<head runat=”server”>

<title>GridView RowCommand Example</title>

</head>

<body>

<form id=”form1″ runat=”server”>

<h3>GridView RowCommand Example</h3>

<asp:GridView id=”ProductsGridView”

DataSourceID=”ProductsDataSource”

DataKeyNames=”ProductID”

AllowPaging=”True”

OnRowCommand=”ProductsGridView_RowCommand”

AutoGenerateColumns=”False”

runat=”server”>

<Columns>

<asp:BoundField DataField=”Name” HeaderText=”Product Name” />

<asp:BoundField DataField=”ProductNumber” HeaderText=”Product Number” />

<asp:TemplateField HeaderText=”Price”>

<ItemTemplate>

<asp:Label ID=”PriceLabel” runat=”server”

Text=’<%# Bind(“ListPrice”) %>’>

</asp:Label>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField>

<ItemTemplate>

<asp:Button runat=”server” ID=”IncreaseButton”

Text=”Increase Price 5%”

CommandName=”Increase”

CommandArgument=”<%# CType(Container, GridViewRow).RowIndex %>” />

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

<!– This example uses Microsoft SQL Server and connects    –>

<!– to the AdventureWorks sample database. Use an ASP.NET  –>

<!– expression to retrieve the connection string value     –>

<!– from the Web.config file.                              –>

<asp:SqlDataSource id=”ProductsDataSource”

SelectCommand=”SELECT [ProductID], [Name], [ProductNumber], [ListPrice]

FROM Production.Product

WHERE ListPrice &lt;&gt; 0″

UpdateCommand=”UPDATE Production.Product SET [ListPrice] = @ListPrice

WHERE [ProductID] = @ProductID”

ConnectionString=”<%$ ConnectionStrings:AdventureWorks_DataConnectionString %>”

runat=”server” />

</form>

</body>

</html>

C#

<%@ Page language=”C#” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<script runat=”server”>

void ProductsGridView_RowCommand(Object sender, GridViewCommandEventArgs e)

{

// If multiple buttons are used in a GridView control, use the

// CommandName property to determine which button was clicked.

if(e.CommandName==”Increase”)

{

// Convert the row index stored in the CommandArgument

// property to an Integer.

int index = Convert.ToInt32(e.CommandArgument);

// Retrieve the row that contains the button clicked

// by the user from the Rows collection.

GridViewRow row = ProductsGridView.Rows[index];

// Calculate the new price.

Label listPriceTextBox = (Label)row.FindControl(“PriceLabel”);

listPriceTextBox.Text = (Convert.ToDouble(listPriceTextBox.Text) * 1.05).ToString();

// Update the row.

ProductsGridView.UpdateRow(index, false);

}

}

</script>

<html  >

<head runat=”server”>

<title>GridView RowCommand Example</title>

</head>

<body>

<form id=”form1″ runat=”server”>

<h3>GridView RowCommand Example</h3>

<asp:GridView id=”ProductsGridView”

DataSourceID=”ProductsDataSource”

DataKeyNames=”ProductID”

AllowPaging=”True”

OnRowCommand=”ProductsGridView_RowCommand”

AutoGenerateColumns=”False”

runat=”server”>

<Columns>

<asp:BoundField DataField=”Name” HeaderText=”Product Name” />

<asp:BoundField DataField=”ProductNumber” HeaderText=”Product Number” />

<asp:TemplateField HeaderText=”Price”>

<ItemTemplate>

<asp:Label ID=”PriceLabel” runat=”server”

Text=’<%# Bind(“ListPrice”) %>’>

</asp:Label>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField>

<ItemTemplate>

<asp:Button runat=”server” ID=”IncreaseButton”

Text=”Increase Price 5%”

CommandName=”Increase”

CommandArgument=”<%# ((GridViewRow) Container).RowIndex %>” />

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

<!– This example uses Microsoft SQL Server and connects    –>

<!– to the AdventureWorks sample database. Use an ASP.NET  –>

<!– expression to retrieve the connection string value     –>

<!– from the Web.config file.                              –>

<asp:SqlDataSource id=”ProductsDataSource”

SelectCommand=”SELECT [ProductID], [Name], [ProductNumber], [ListPrice]

FROM Production.Product

WHERE ListPrice &lt;&gt; 0″

UpdateCommand=”UPDATE Production.Product SET [ListPrice] = @ListPrice

WHERE [ProductID] = @ProductID”

ConnectionString=”<%$ ConnectionStrings:AdventureWorks_DataConnectionString %>”

runat=”server” />

</form>

</body>

</html>

En este artículo veremos como se crea la siguiente lista:

Hay que empezar por olvidarnos de mucho de lo que conocíamos del ListView de las versiones previas de Visual Studio. En primer lugar, no existe una colección de SubItems asociada a cada Item, tampoco tenemos las clásicas vistas para mostrar íconos grandes, medianos y pequeños o la clásica vista “Report”, para mostrar varias columnas. Estas son las dos primeras grandes diferencias que inicialmente saltan a la vista y que tendremos que aprender a sortear.

Agregar elementos

La forma más sencilla de agregar Items, si se mantiene tal como la conocíamos y es la siguiente:

        lstBooks.Items.Add("Pro WPF with VB 2008")

De tal manera que es posible añadir cadenas para verlas directamente dentro de la lista.

Un poco más complicado resulta si queremos agregar elementos que luego se puedan mostrar en un listado multicolumna. Y es aquí donde no hará más falta utilizar la colección SubItems, ya que en su lugar, podemos agregar cualquier objeto personalizado a nuestra colección de Items, tal como se ve en el siguiente ejemplo:

lstBooks.Items.Add(New bookBO("Coquito", "Ediciones Bruño", 5))

Lo que es lo mismo que:

dim book as New bookBO()
book.Nombre = "Coquito"
book.Editor = "Ediciones Bruño"
book.Calificacion = 5
lstBooks.Items.Add(book)

En ambos casos se ha agregado un Nuevo elemento del tipo bookBO (una clase personalizada).

Visualizar la lista

Si en nuestro ListView sólo hemos agregado Strings, la visualización será inmediata; pero si es que hemos agregado elementos de una clase personalizada, tenemos dos alternativas: dotar a nuestra clase personaliza de una función ToString, que devuelva la cadena que deseamos que se muestre para cada fila de la lista; o, establecer adecuadamente la propiedad View.

Aunque la propiedad View aún se mantiene, su funcionalidad es distinta. Ahora esta propiedad se utiliza para indicar un objeto del tipo GridView (el cual es configurable) o alguna clase personalizada que se derive de ViewBase.

Si vamos a utilizar la clase GridView, podemos configurarla por código como se muestra en el siguiente ejemplo:

        'Crear un objeto del tipo GridView
        Dim myGridView As New GridView()
        'Crear las columnas a agregar
        Dim gvc1 As New GridViewColumn()
        Dim gvc2 As New GridViewColumn()

        'Establecer las propiedades de cada columna
        gvc1.Header = "Libro"
        gvc1.Width = 140
        gvc1.DisplayMemberBinding = New Binding("NombreLibro")

        gvc2.Header = "Autor"
        gvc2.Width = 240
        gvc2.DisplayMemberBinding = New Binding("NombreAutor")

        'Agregar las columnas al objeto GridView
        myGridView.Columns.Add(gvc1)
        myGridView.Columns.Add(gvc2)

        'Establecer la vista del ListView
        lstBooks.View = myGridView

Es importante notar la propiedad DisplayMemberBinding de cada columna. En esta propiedad se indica cual de las propiedades de nuestra clase personalizada corresponde a esa columna. Nuestra clase personalizada podría tener decenas de propiedades, pero de esta manera indicamos que sólo se muestren unas cuantas.

Como alternativa, el código de ejemplo anterior, puede ser implementado en nuestro formulario de diseño por medio del siguiente código XAML:

        <ListView Name="lstBooks" Margin="0,10,0,0">
            <ListView.View>
                <GridView>
                    <GridViewColumn Width="140" Header="Libro" DisplayMemberBinding="{Binding NombreLibro}"  />
                    <GridViewColumn Width="240" Header="Autor" DisplayMemberBinding="{Binding NombreAutor}" />
                </GridView>
            </ListView.View>
        </ListView>

Enlazar el ListView con una colección

Es posible que la información ya la tengamos disponible en una colección. En tal caso no es necesario recorrerla para leer cada item y agregarlo al ListView, sino que podemos establecer la propiedad ItemsSource:

	lstBooks.ItemsSource = MyCollection

Esta posibilidad es especialmente efectiva si el objeto MyCollection es de la clase ObservableCollection, que para el ejemplo anterior se declara de la siguiente manera:

	Dim MyCollection As ObservableCollection(Of bookBO)

La ventaja de utilizar una clase ObservableCollection es que cualquier cambio que se realiza en la colección es automáticamente notificado y actualizado en la lista. De no ser así, nosotros mismos tendríamos que actualizar la lista cada vez que se modifique alguno de sus elementos (tal como lo hice en algún ejemplo del patrón MVC).

Ejemplo

A continuación un ejemplo que resume algo de lo revisado en este artículo.

XAML:

<Page x:Class="ListViewSample3"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ListView1" Background="CadetBlue" Name="Page1">
    <Grid Height="268" Width="591">
        <ListView Margin="73,50,0,0" Name="lstBooks" HorizontalAlignment="Left" Width="429" Height="196" VerticalAlignment="Top" />
    </Grid>
</Page>

Código fuente del formulario:

Partial Public Class ListViewSample3

    Private Sub Page1_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
        createTable()
        fillTable()
    End Sub

    Sub createTable()
        Dim myGridView As New GridView()
        Dim gvc1 As New GridViewColumn()
        Dim gvc2 As New GridViewColumn()

        gvc1.Header = "Título"
        myGridView.Columns.Add(gvc1)
        gvc1.Width = 200
        gvc1.DisplayMemberBinding = New Binding("Titulo")

        gvc2.Header = "Autor"
        myGridView.Columns.Add(gvc2)
        gvc2.Width = 200
        gvc2.DisplayMemberBinding = New Binding("Autor")

        lstBooks.View = myGridView
    End Sub

    Sub fillTable()
        lstBooks.Items.Clear()

        lstBooks.Items.Add(New bookBO("Windows Presentation Foundation Unleashed", "Adam N"))
        lstBooks.Items.Add(New bookBO("Pro WPF with VB 2008", "Matthew McD"))
        lstBooks.Items.Add(New bookBO("3D Programming-for-windows by WPF", "Charles P"))
    End Sub

End Class

Clase BookBO:

Public Class bookBO

Public Class bookBO
    Private mTitulo As String
    Private mAutor As String

    Public Sub New(ByVal Titulo As String, ByVal Autor As String)
        mTitulo = Titulo
        mAutor = Autor
    End Sub

    Public Property Titulo() As String
        Get
            Titulo = mTitulo
        End Get
        Set(ByVal value As String)
            mTitulo = value
        End Set
    End Property

    Public Property Autor() As String
        Get
            Autor = mAutor
        End Get
        Set(ByVal value As String)
            mAutor = value
        End Set
    End Property

    'Esta funcion no es necesaria, solo para mostrar su implementacion
    Public Overrides Function ToString() As String
        ToString = mTitulo + " - " + mAutor
    End Function
End Class

Resultado

En el próximo artículo revisaremos como agregar controles (gráficos incluidos) dentro de un ListView y mantenerlos enlazados con nuestra clase personalizada.

Hasta pronto!

The goal is to build editable data grid in a project uses ASP.NET MVC 1.0, it is know that ASP.NET MVC does not use controls with ( runat=”server” ) attribute, which means I can’t use regular DataGrid or GridView in my code. and HTMLHelper class in ASP.NET MVC does provide such HTML component.

So, there are two solutions:

1. Using extension to extend HTMLHelper functionality and build HTML using code

      1: public static class GridViewExt

      2:     {

      3:         public static string GridView(this HtmlHelper html, IEnumerable DataSource, object HTMLAtrributes)

      4:         {

      5:             string htmlAttributesString = ConvertToAtrributes.ConvertObjectToAttributeList(HTMLAtrributes).Trim();

      6:             StringBuilder resultBuilder = new StringBuilder();

      7:             resultBuilder.AppendFormat("<table{0}{1}>", string.IsNullOrEmpty(htmlAttributesString) ? "" : " ", htmlAttributesString).AppendLine();

      8:             IEnumerator sourceEnumerator = DataSource.GetEnumerator();

      9:             Type itemType;

     10:             if (sourceEnumerator.MoveNext() == false)

     11:             {

     12:                 return "";

     13:             }

     14:             else

     15:             {

     16:                 itemType = sourceEnumerator.Current.GetType();

     17:             }

     18:             PropertyInfo[] properties = itemType.GetProperties();

     19:             resultBuilder.AppendLine("\t<tr>");

     20:             foreach (PropertyInfo property in properties)

     21:             {

     22:                 resultBuilder.AppendFormat("\t\t<th>{0}</th>", property.Name).AppendLine();

     23:             }

     24:             resultBuilder.AppendLine("\t</tr>");

     25:             foreach (object item in DataSource)

     26:             {

     27:                 resultBuilder.AppendLine("\t<tr>");

     28:                 foreach (PropertyInfo property in properties)

     29:                 {

     30:                     resultBuilder.AppendFormat("\t\t<td>{0}</td>", property.GetValue(item, null)).AppendLine();

     31:                 }

     32:                 resultBuilder.AppendLine("\t</tr>");

     33:             }

     34:             resultBuilder.Append("</table>");

     35:             return resultBuilder.ToString();

     36:         }

     37:     }

     38: public class ConvertToAtrributes

     39:     {

     40:         public static string ConvertObjectToAttributeList(object value)

     41:         {

     42:             StringBuilder builder = new StringBuilder();

     43:             if (value != null)

     44:             {

     45:                 IDictionary<string, object> dictionary = value as IDictionary<string, object>;

     46:                 if (dictionary == null)

     47:                 {

     48:                     dictionary = new RouteValueDictionary(value);

     49:                 }

     50:                 string format = "{0}=\"{1}\" ";

     51:                 foreach (string str2 in dictionary.Keys)

     52:                 {

     53:                     object obj2 = dictionary[str2];

     54:                     if (dictionary[str2] is bool)

     55:                     {

     56:                         obj2 = dictionary[str2].ToString().ToLowerInvariant();

     57:                     }

     58:                     builder.AppendFormat(format, str2.Replace("_", "").ToLowerInvariant(), obj2);

     59:                 }

     60:             }

     61:             return builder.ToString();

     62:         }

     63:     }

   now you should be able to call to call HTMLHelper extended method inside your View

     1: <%= this.Html.GridView(Model.Products)%>
   

   but it is still not editable and to add editing functionality it will be so hard to write a lot of HTML code inside C# code and will not be easy to maintain or fix issues; so let’s consider the second option.

2. Building User control and get advantage of writing HTML inside the user control HTML (one thing to remember using ASP.NET MVC no use for page life cycle you can get rid of that).

   Now let me build a user control ascx page using fantastic JQuery fetures

      1: <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="GridView.ascx.cs" Inherits="Shared.UserControls.GridView" %>

      2: <%@ Import Namespace="System.Reflection" %>

      3: <%
      1: -- style code --
   %>

      4: <style type="text/css">

      5:     .gridView

      6:     {

      7:         border-collapse: collapse;

      8:     }

      9:     .gridView th, .gridView td

     10:     {

     11:         padding: 5px;

     12:     }

     13:     .gridView th

     14:     {

     15:         border-bottom: double 3px black;

     16:     }

     17:     .gridView td

     18:     {

     19:         border-bottom: solid 1px black;

     20:     }

     21:     .alternatingItem

     22:     {

     23:         background-color: lightgrey;

     24:     }

     25: </style>

     26: <%
      1: -- Javascripts code --
   %>

     27: <script src="../../Scripts/jquery-1.3.2.js" type="text/javascript"></script>
      1:
   
      2: <%--<script src="../../Scripts/jquery-1.3.2-vsdoc.js" type="text/javascript">
   
      1: </script>--%>
   
      2: <script type="text/javascript">
   
      3:     var controller = '';
   
      4:     var SaveAction = '';
   
      5:     <% GetController(); GetSaveAction(); %>
   
      6:     function IsValidAction(ctrl, actn)
   
      7:     {
   
      8:         if(($.trim(ctrl) == '') || ($.trim(actn) == ''))
   
      9:             return false;
   
     10:         else
   
     11:             return true;
   
     12:     }
   
     13:     function SaveAllClick() {
   
     14:         //debugger;
   
     15:         if(!IsValidAction(controller,SaveAction))
   
     16:         {
   
     17:             alert("Error while saving data");
   
     18:             return;
   
     19:         }
   
     20:         var i = 0;
   
     21:         var inputs = new Array();
   
     22:         $("#BaseTable").find("input").each(function() {
   
     23:             inputs[i] = [this.id, this.value];
   
     24:             i++;
   
     25:         });
   
     26:
   
     27:         var columnsCount = $("#BaseTable").find("th").length;
   
     28:         $.post("/"+controller+"/"+SaveAction, { inputs: inputs, columnsCount: columnsCount });
   
     29:         Border();
   
     30:         $("#ChangeFlag").text("");
   
     31:         $("#SaveAll").attr("disabled", "disabled");
   
     32:         alert("Saved");
   
     33:     }
   
     34:     var prevCell;
   
     35:     function Border(cell) {
   
     36:         if (prevCell != null) {
   
     37:             $(prevCell).attr("style", "border-style: none");
   
     38:         }
   
     39:         if (cell != null) {
   
     40:             var i = $(cell); //.find("input");
   
     41:             i.attr("style", "border-style: inset");
   
     42:         }
   
     43:         prevCell = cell;
   
     44:     }
   
     45:     function Unborder(cell) {
   
     46:         if (cell != null) {
   
     47:             var i = $(cell); //.find("input");
   
     48:             i.attr("style", "border-style: none");
   
     49:         }
   
     50:     }
   
     51:     function MarkChanges() {
   
     52:         $("#ChangeFlag").text("Page should be saved");
   
     53:         $("#SaveAll").removeAttr("disabled");
   
     54:     }
   </script>

     28: <%
      1: -- Show the Headers --
   %>

     29: <table class="gridView" id="BaseTable">

     30:     <thead>

     31:         <tr>

     32:             <%
      1:  foreach (PropertyInfo prop in this.Columns)
   
      2:                {
   %>

     33:             <th>

     34:                 <%
      1: = prop.Name
   %>

     35:             </th>

     36:             <%
      1:  }
   %>

     37:         </tr>

     38:     </thead>

     39:     <%
      1: -- Show the Rows --
   %>

     40:     <tbody>

     41:         <%
      1:  foreach (object row in this.Rows)
   
      2:            {
   %>

     42:         <tr class="<%= this.FlipCssClass( "item", "alternatingItem") %>">

     43:             <%
      1: -- Show Each Column --
   %>

     44:             <%
      1:  foreach (PropertyInfo prop in this.Columns)
   
      2:                {
   %>

     45:             <td>

     46:                 <%
      1:  var typeCode = Type.GetTypeCode(prop.PropertyType);
   %>

     47:                 <%
      1: var str_disabled = "";
   
      2:                   if (this.GetAtt(prop.Name))
   
      3:                       str_disabled = "disabled=\"disabled\"";
   
      4:
   %>

     48:                 <%
      1: -- String Columns --
   %>

     49:                 <%
      1:  if (typeCode == TypeCode.String)
   
      2:                    {
   %>

     50:                 <input id="<%=prop.Name %>" type="text" style="border-style: none" value="<%= GetColumnValue(row, prop.Name)%>"

     51:                     onmousedown="Border(this)" onselect="Border(this)" onblur="Unborder(this)" onchange="MarkChanges()"

     52:                     <%= str_disabled %> />

     53:                 <%
      1:  }
   %>

     54:                 <%
      1: -- DateTime Columns --
   %>

     55:                 <%
      1:  if (typeCode == TypeCode.DateTime)
   
      2:                    {
   %>

     56:                 <input id="<%=prop.Name %>" type="text" style="border-style: none" value="<%= GetColumnValue(row, prop.Name, "{0:D}")%>"

     57:                     onmousedown="Border(this)" onselect="Border(this)" onblur="Unborder(this)" onchange="MarkChanges()"

     58:                     <%= str_disabled %> />

     59:                 <%
      1:  }
   %>

     60:                 <%
      1: -- Decimal Columns --
   %>

     61:                 <%
      1:  if (typeCode == TypeCode.Decimal)
   
      2:                    {
   %>

     62:                 <input id="<%=prop.Name %>" type="text" style="border-style: none" value="<%= GetColumnValue(row, prop.Name, "{0:f}") %>"

     63:                     onmousedown="Border(this)" onselect="Border(this)" onblur="Unborder(this)" onchange="MarkChanges()"

     64:                     <%= str_disabled %> />

     65:                 <%
      1:  }
   %>

     66:                 <%
      1: -- Decimal Columns --
   %>

     67:                 <%
      1:  if (typeCode == TypeCode.Double)
   
      2:                    {
   %>$

     68:                 <input id="<%=prop.Name %>" type="text" style="border-style: none" value="<%= GetColumnValue(row, prop.Name, "{0:f}") %>"

     69:                     onmousedown="Border(this)" onselect="Border(this)" onblur="Unborder(this)" onchange="MarkChanges()"

     70:                     <%= str_disabled %> />

     71:                 <%
      1:  }
   %>

     72:                 <%
      1: -- Boolean Columns --
   %>

     73:                 <%
      1:  if (typeCode == TypeCode.Boolean)
   
      2:                    {
   %>

     74:                 <%
      1:  if ((bool)(this.GetColumnValue(row, prop.Name)))
   
      2:                    {
   %>

     75:                 <input type="checkbox" disabled="disabled" checked="checked" />

     76:                 <%
      1:  }
   
      2:                    else
   
      3:                    {
   %>

     77:                 <input type="checkbox" disabled="disabled" />

     78:                 <%
      1:  }
   %>

     79:                 <%
      1:  }
   %>

     80:                 <%
      1: -- Integer Columns --
   %>

     81:                 <%
      1:  if (typeCode == TypeCode.Int32)
   
      2:                    {
   %>

     82:                 <input id="<%=prop.Name %>" type="text" style="border-style: none" value="<%= GetColumnValue(row, prop.Name)%>"

     83:                     onmousedown="Border(this)" onselect="Border(this)" onblur="Unborder(this)" onchange="MarkChanges()"

     84:                     <%= str_disabled %> />

     85:                 <%
      1:  }
   %>

     86:             </td>

     87:             <%
      1:  }
   %>

     88:         </tr>

     89:         <%
      1:  }
   %>

     90:     </tbody>

     91: </table>

     92: <p>

     93:     <input id="SaveAll" disabled="disabled" type="button" value="Save" onclick="SaveAllClick()" />

     94:     <span id="ChangeFlag"></span>

     95: </p>

   and building code behind code for this user control using last post idea of TypeDescriptor class to make the user control more generic accepting any type of collection and render editable properties according to custom attributes associated with it.

      1: using System;

      2: using System.Collections;

      3: using System.Collections.Generic;

      4: using System.Linq;

      5: using System.Web;

      6: using System.Web.UI;

      7: using System.Web.Mvc;

      8: using System.Reflection;

      9: using System.ComponentModel;

     10: using CustomAtrributes;

     11:

     12: namespace Shared.UserControls

     13: {

     14:     public partial class GridView : System.Web.Mvc.ViewUserControl<IEnumerable>

     15:     {

     16:         protected string GetController()

     17:         {

     18:

     19:             if (ViewContext.RouteData.Values["Controller"] != null)

     20:             {

     21:                 Response.Write("controller = '" + ViewContext.RouteData.Values["Controller"] as string + "';");

     22:                 return ViewContext.RouteData.Values["Controller"] as string;

     23:             }

     24:             else

     25:                 return string.Empty;

     26:         }

     27:         protected string GetSaveAction()

     28:         {

     29:             if (ViewData.Model.GetType().GetProperty("SaveAction") != null)

     30:             {

     31:                 Response.Write("SaveAction = '" + DataBinder.Eval(ViewData.Model, "SaveAction") as string + "';");

     32:                 return DataBinder.Eval(ViewData.Model, "SaveAction") as string;

     33:             }

     34:             else

     35:                 return string.Empty;

     36:         }

     37:         protected PropertyInfo[] Columns

     38:         {

     39:

     40:             get

     41:             {

     42:                 var e = ViewData.Model.GetEnumerator();

     43:                 e.MoveNext();

     44:                 object firstRow = e.Current;

     45:                 if (firstRow == null)

     46:                 {

     47:                     throw new Exception("No data passed to GridView User Control.");

     48:                 }

     49:                 return firstRow.GetType().GetProperties();

     50:             }

     51:         }

     52:         protected IEnumerable Rows

     53:         {

     54:             get { return ViewData.Model; }

     55:         }

     56:         protected object GetColumnValue(object row, string columnName)

     57:         {

     58:             return DataBinder.Eval(row, columnName);

     59:         }

     60:         protected object GetColumnValue(object row, string columnName, string format)

     61:         {

     62:             return DataBinder.Eval(row, columnName, format);

     63:         }

     64:         bool flip = false;

     65:         protected string FlipCssClass(string className, string alternativeClassName)

     66:         {

     67:             flip = !flip;

     68:             return flip ? className : alternativeClassName;

     69:         }

     70:

     71:         protected bool GetAtt(string Name)

     72:         {

     73:

     74:             bool readonlyatt = false;

     75:             UIAttributes uiatt = TypeDescriptor.GetAttributes(Model).Cast<Attribute>().SingleOrDefault(a => a.GetType().Name == typeof(UIAttributes).Name) as UIAttributes;

     76:             if ((uiatt != null) && uiatt.IsReadOnly)

     77:                 return uiatt.IsReadOnly;

     78:             PropertyInfo propInfo = Model.GetType().GetProperty(Name);

     79:                 //(propInfo =>

     80:                     {

     81:                         PropertyDescriptor propDescriptor = TypeDescriptor.GetProperties(Model).Cast<PropertyDescriptor>().SingleOrDefault(p => propInfo.Name == p.Name);

     82:                         if (propDescriptor != null)

     83:                         {

     84:                             UIAttributes attrib = propDescriptor.Attributes.Cast<Attribute>().SingleOrDefault(p => p.GetType().Name == typeof(UIAttributes).Name) as UIAttributes;

     85:                             if (attrib != null)

     86:                             {

     87:                                 readonlyatt = attrib.IsReadOnly;

     88:                             }

     89:                         }

     90:                     }

     91:                     //);

     92:                     return readonlyatt;

     93:         }

     94:     }

     95: }

   and by using couple of ASP.NET MVC helpful classes like ViewContext, now I can detect which controller called this user control automatically and by adding new property to the the ViewData specifaying the Save Action method name in the controller; that gives more generic to the user control as it is not tight to specific controller or  methods.

Still need more enhancements and features like validation and styles, but so far it is nice.

It was very nice challenge to build such a control and I owe to references I mention below a lot.

References:

• ASP.NET MVC Tip #9 – Create a GridView View User Control
• EDITABLE ROWS. USING HTML TABLE, JQUERY AND AJAX
• Building Custom ASP.NET MVC Controls
• ASP.NET MVC forums and questions posted online.

Hi,

Recently i needed a fast search for a set of checkboxs so a user could search for names and select multiple without the need for the page posting back to search. I started looking straight into Javascript but i couldn’t find a reference directly related to searching a gridview with javascript. I Know i could use AJAX with an update panel but i’ve found that with AJAX you can get some undesired effects when used in FireFox (AJAX for ASP.NET 2.0).

Here is the Javascript I created to search the gridview and filter matching names in realtime:

function UpdateGroups()
{
   var Groups = document.getElementById("<%= GroupsList.ClientID %>");
   var SearchText = document.getElementById("SearchText").value;
   var SubGroupID = ""
   var GroupsShowing = 0;
   for (i=1; i<Groups.rows.length; i++)
   {
      var cell = Groups.rows[i].cells;
      var HTML = cell[0].innerHTML;
      SubGroupID = cell[1].innerHTML.substring(SearchText.length,0).toLowerCase()
      if (cell[1].innerHTML.toLowerCase().indexOf(SearchText.toLowerCase()) != -1) {
         Groups.rows[i].style.display = "table-row";
         GroupsShowing++;
      }
      else
      {
         Groups.rows[i].style.display = "none";
      }
   }
   if (GroupsShowing == 0) {
      document.getElementById("gridviewDiv").setAttribute("Style", "display:none")
      document.getElementById("NoGroupsFound").setAttribute("Style", "display:block;")
   }
   else {
      document.getElementById("gridviewDiv").setAttribute("Style", "display:block;")
      document.getElementById("NoGroupsFound").setAttribute("Style", "display:none")
   }
}

And the ASP.NET code is as follows:

Group filter
<br />
<input type="text" id="SearchText" name="SearchText" 
       onchange="UpdateGroups();" onkeyup="UpdateGroups();" />
<br />
<br />
<b>Please select groups</b>
<div style="overflow: scroll; height: 200px; 
     width: 200px; margin: 0 auto;">
  <div id="gridviewDiv">
    <asp:GridView ID="GroupsList" runat="server" 
                  AutoGenerateColumns="False" DataKeyNames="group_id"
                  DataSourceID="SQLSourceGetGroups" 
                  style="margin: 0 auto;">
      <Columns>
        <asp:TemplateField>
          <ItemTemplate>
            <asp:CheckBox ID="GroupSelected" runat="server" />
          </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="group_id" HeaderText="" 
                        ReadOnly="True" SortExpression="group_id" />
      </Columns>
    </asp:GridView>
  </div>
  <br />
  <div id="NoGroupsFound" style="width: 175px; display: none;" >
    No groups found
  </div>
  </div>

The gridview above is contained within a div to allow a scroll affect to look like a checkbox list.

I had been searching for a way to merge cells in a GridView

If e.Row.DataItemIndex % 2 = 0 Then
e.Row.Cells(0).RowSpan = 2
e.Row.Cells(1).RowSpan = 2
End If
‘Remove the extra cells created due to row span for odd rows
If e.Row.DataItemIndex % 2 = 1 Then
e.Row.Cells.RemoveAt(0)
e.Row.Cells.RemoveAt(0)
e.Row.Cells(1).HorizontalAlign = HorizontalAlign.Center
End If

This code should take every cell in the first and second columns and merge it with the cell directly below it. Of course, this should be used very carefully, because you could screw up your data if each record does not have another corresponding record with it. However, this shouldn’t be too difficult to program around by adding data checks.

Trong một ứng dụng, luôn có phần quản trị các danh mục (categories management) ví dụ như quản lý danh mục thành phố, danh mục phòng ban,… Thông thường chúng ta phải sử dụng gridview + formview hoặc detailview để cung cấp CRUD cho user. Nhưng với những loại categories đơn giản và ít thông tin, tớ muốn thiết kế 1 page với 1 gridview duy nhất và user có thể thực hiện CRUD ngay trên gridview đó. Mục đích chính là giảm bớt các thao tác mà user cần phải thực hiện. Nhưng trên thực tế, gridview của asp.net không support insert trực tiếp mà phải thông quan FormView hoặc DetailView. Tớ search google và biết được có 2 cách để tạo ra 1 insertable gridview.

Cách 1:  là tạo ra 1 row dữ liệu rỗng bằng cách sử dụng câu lệnh select của sql để select records của bảng kèm theo 1 record rỗng, rồi xử lý sự kiện OnRowUpdating của GridView. Tham khảo tại đây: ASP.NET GridView – Add a new record

Cách 2: sử dụng footer của gridview để hiện thị form insert row. Tham khảo bài viết của John Sanborn - Adding a New Record to the DataGrid

Tớ thích cách 2 hơn vì nó đơn giản và rõ ràng, không phải viết lại select store procedure . Tớ sẽ trình bày phương pháp này theo cách của mình, gồm 4 bước như dưới đây

Bài toán: cung cấp chức năng CRUD – Create Read Update Delete để quản lý bảng dữ liệu EducationUnit gồm 3 trường ID, Name, Note.

1. Viết các store procedure và Business Object (EducationUnit.cs) + DAL (EducationUnitDB.cs) + Business Layer (EducationUnitManager.cs)

2. Tạo Web page chứa gridview với datasource là 1 ObjectDatasource sử dụng các hàm của object EducationUnitManager trong Business Layer

Chú ý: bạn có thể sử dụng datasource loại khác cũng chẳng sao.  Nếu ngại thì có thể dùng Design view của VS để sinh ra SQLDatasource 1 cách nhanh chóng. mà không cần phải làm bước 1

3. Thiết lập thuộc tính ShowFooter của gridview = true.

Convert toàn bộ BoundField của GridView sang TemplateField.

Thêm FooterTemplate cho các field.

<asp:GridView ID="gvEduUnit" runat="server"
        AutoGenerateColumns="False" DataKeyNames="ID"
        DataSourceID="odsEduUnit" Width="100%" ShowFooter="True" >
        <Columns>
            <asp:TemplateField HeaderText="ID" InsertVisible="False"
                SortExpression="ID">
                <EditItemTemplate>
                    <asp:Label ID="Label1" runat="server"
                         Text='<%# Eval("ID") %>'></asp:Label>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="Label1" runat="server"
                        Text='<%# Bind("ID") %>'></asp:Label>
                </ItemTemplate>
                <HeaderStyle Width="30px" />
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Name" SortExpression="Name">
                <EditItemTemplate>
                    <asp:TextBox ID="TextBox1" runat="server"
                        Text='<%# Bind("Name") %>' Width="100%"></asp:TextBox>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="Label2" runat="server"
                        Text='<%# Bind("Name") %>'></asp:Label>
                </ItemTemplate>
                <FooterTemplate>
                    <asp:TextBox ID="inputName" runat="server" 
                        Width="95%"></asp:TextBox>
                </FooterTemplate>
                <ControlStyle Width="95%" />
                <HeaderStyle Width="200px" />
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Note" SortExpression="Note">
                <EditItemTemplate>
                    <asp:TextBox ID="TextBox2" runat="server"
                       Text='<%# Bind("Note") %>' TextMode="MultiLine">
                    </asp:TextBox>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="Label3" runat="server"
                      Text='<%# Bind("Note") %>'></asp:Label>
                </ItemTemplate>
                <FooterTemplate>
                    <asp:TextBox ID="inputNote" runat="server" 
                        TextMode="MultiLine" Width="95%">
                    </asp:TextBox>
                </FooterTemplate>
                <ControlStyle Width="95%" />
            </asp:TemplateField>
            <asp:TemplateField ShowHeader="False">
                <EditItemTemplate>
                <div align="right">
                    <asp:LinkButton ID="LinkButton1" runat="server"
                        CausesValidation="True" CommandName="Update">
                        <asp:Image ID="imgUpdate" runat="server"
                            ImageUrl="~/img/action_check.gif"
                            AlternateText="lưu" />
                    </asp:LinkButton>
                    <asp:LinkButton ID="LinkButton2" runat="server"
                        CausesValidation="False" CommandName="Cancel">
                        <asp:Image ID="imgCancel" runat="server"
                             ImageUrl="~/img/action_delete.gif"
                             AlternateText="hủy bỏ" />
                    </asp:LinkButton>
                </div>
                </EditItemTemplate>
                <ItemTemplate>
                <div align="right">
                    <asp:LinkButton ID="LinkButton1" runat="server"
                        CausesValidation="False" CommandName="Edit">
                        <asp:Image ID="imgEdit" runat="server"
                             ImageUrl="~/img/reply.gif"
                             AlternateText="sửa" />
                    </asp:LinkButton>
                </div>
                </ItemTemplate>
                <HeaderStyle Width="40px" />
                <FooterTemplate>
                <div align="right">
                    <asp:LinkButton ID="btnInsert" runat="server" 
                        CausesValidation="true" CommandName="Insert" 
                        OnClick="btnInsert_Click" >
                        <asp:Image ID="imgInsert" runat="server" 
                             ImageUrl="~/img/action_add.gif" 
                             AlternateText="lưu" />
                    </asp:LinkButton>
                </div>
                </FooterTemplate>
            </asp:TemplateField>
        </Columns>
        <FooterStyle VerticalAlign="Top" />
        <RowStyle VerticalAlign="Top" />
    </asp:GridView>
<asp:ObjectDataSource ID="odsEduUnit" runat="server"
    DataObjectTypeName="DHD.DMS.BusinessObject.EducationUnit"
    DeleteMethod="Delete" InsertMethod="Save" OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetList" TypeName="DHD.DMS.BusinessLayer.EducationUnitManager"
    UpdateMethod="Save">
</asp:ObjectDataSource>

Như vậy footer cho trường ID sẽ bỏ qua (bởi tớ đặt chế độ tự tăng cho ID), footer cho trường Name là một textbox (inputName), cho trường Note là multiline textbox (inputNote), footer cho cột chứa linkbutton edit là 1 linkbutton (btnInsert) với sự kiện OnClick = btnInsertClick.

4. Xử lý hàm btnInsertClick như sau:

protected void btnInsert_Click(object sender, EventArgs e)
{
    // get controls from FooterRow
    TextBox txtName = gvEduUnit.FooterRow.FindControl("inputName") as TextBox;
    TextBox txtNote = gvEduUnit.FooterRow.FindControl("inputNote") as TextBox;

    // get data from controls
    DHD.DMS.BusinessObject.EducationUnit item = new DHD.DMS.BusinessObject.EducationUnit();
    item.Name = txtName.Text;
    item.Note = txtNote.Text;

    // action to insert record into table on database
    DHD.DMS.BusinessLayer.EducationUnitManager.Save(item);

    // rebind gridview
    gvEduUnit.DataBind();
}

Kết quả:

Giờ tớ đã có 1 insertable gridview hoạt động ngon lành rồi đấy!!! Phương pháp này có thể chưa thực sự hay vì trong TH đã sử dụng footer để phục vụ cho việc trình bầy thì bạn không thể dùng phương pháp này. Có lẽ ngoài 2 phương pháp tớ đã đề cập, chắc chắn còn cách khác hay hơn để có được insertable gridview (không kể sài third party )

I have been going nuts all day trying to get a link button to fire its command event and cause a postback in a GridView control.  On this particular page, whenever I click on the link, I get a WebForm_DoPostBackWithOptions instead of __doPostback, and of course I never hit the grid’s command event in my page behind.

The solution?  Set causesvalidation=”false” in the link button and the command event will fire.   Why, I don’t know, this just works and hopefully you’ll find this post before having to spend too many hours trying to figure it out.

In this article, we will examines the creation of a new custom GridView control from scratch, which allows the developer to include a checkbox column to the GridView control automatically with embedded JavaScript code to check/uncheck the checkbox column without the need to write any bit of code. He begins with comprehensive coverage of the steps involved in customization of the GridView class and implementation of template classes. Towards the end of the article, Abdulla examines the usage of the control with Visual Studio 2005. The article also covers how to embed a JavaScript file with a custom control and how to use it later on with the help of detailed analysis, relevant source code, and screenshots.                                                                   

Article Contents:

• Customizing the GridView Class
• Supporting Client Side Functionality
• Implementing Templates Classes
• Using the Control
• Conclusion

Customizing the GridView Class

Let us begin creating our new custom GridView control, open your Visual Studio then create a new Class library project and name it as “MyCustomControl.”

First of all, you have to add some references to allow you to use the needed namespaces and classes, below are the needed references:

1.    System.Design

2.    System.Drawing

3.    System.Web 

4.    System.Web.Extensions 

5.    System.Web.Extensions.Design

Then create a new class and name it “CustomGrid.”

Inheriting the GridView class is much better than creating a new databound control from scratch, that give us the benefits of functions and subroutines already existing in the GridView class.

Listing 1

<Assembly: TagPrefix("MyCustomControl.CustomsControls", "asp")> 

<Assembly: WebResource("MyCustomControl.CustomGridJS.js", "text/javascript")> 

Namespace CustomsControls

<ToolboxData("<{0}:CustomGrid runat=""server""></{0}:CustomGrid>")> _

Partial Public Class CustomGrid

Inherits GridView

'My Code Here

End Class

We will create a property for including the checkbox column to allow the developer to add the column automatically, which is implemented in Listing 2.

Listing 2

''' <summary>

''' Add checkbox column to the gridview.

''' </summary>

''' <value></value>

''' <returns></returns>

''' <remarks></remarks>

<Category("Behavior")> _

          <Description("Add checkbox column to the gridview.")> _

          <DefaultValue(False)> _

          Public Property IncludeColumnCheckBox() As Boolean

  Get

  If String.IsNullOrEmpty(ViewState("IncludeColumnCheckBox")) Then

    Return False

  Else

    Return DirectCast(ViewState("IncludeColumnCheckBox"), Boolean)

  End If

  End Get

  Set(ByVal Value As Boolean)

  ViewState("IncludeColumnCheckBox") = Value

  End Set

End Property

Now we will override the CreateColumns function which is responsible for creating the columns, and there we will add our new checkbox column, as in Listing 3.

Listing 3

Protected Overrides Function CreateColumns(ByVal dataSource As PagedDataSource, _

ByVal useDataSource As Boolean) As ICollection

Dim columnList As ICollection = MyBase.CreateColumns(dataSource, useDataSource)

  If Not IncludeColumnCheckBox Then

    Return columnList

  End If

  Dim list As ArrayList = New ArrayList(columnList)

  Dim _CheckBoxColumn As New MyTemplateField

  list.Insert(0, _CheckBoxColumn)

  Return list

End Function

You may note that I am declaring an object from a template class that I created before I called MyTemplateField, and that the GridView column consisted from the set of templates classes (Header, Item, Alternate and footer).

I will illustrate these templates classes in the Implementing Templates classes section,

Developers do not need to write multi lines of code to get the ID’s of the selected rows; we will return these ID’s simply by writing a new property called GetCheckedRows which is shown below.

Listing 4

''' <summary>

''' Return list of IDs joined with ',' separators

''' </summary>

''' <value></value>

''' <returns></returns>

''' <remarks></remarks>

<Browsable(False)> _

           Public ReadOnly Property GetCheckedRows() As String

  Get

  Dim _collectionIds As String = String.Empty

  If DataKeys.Count > 0 Then

    For i As Integer = 0 To Rows.Count - 1

      If Rows(i).RowType = DataControlRowType.DataRow Then

        If DirectCast(Rows(i).FindControl("ChkItem"), CheckBox).Checked Then

          If _collectionIds = String.Empty Then

            _collectionIds = DataKeys(Rows(i).RowIndex).Value

          Else

            _collectionIds & = "," & DataKeys(Rows(i).RowIndex).Value

          End If

        End If

      End If

    Next

  End If

  Return _collectionIds

  End Get

End Property

Supporting Client Side Functionality

As I mention before, our new custom GridView control will support checking/unchecking the checkbox column in client-side using JavaScript functions embedded with the control, so we need to assign the JavaScript function to the checkbox element in the Header template of the GridView, and that occurs at the row created subroutine as illustrated in Listing 5.

Listing 5

Protected Overloads Overrides Sub OnRowCreated(ByVal e As GridViewRowEventArgs)

            MyBase.OnRowCreated(e)

If IncludeColumnCheckBox Then

  If e.Row.RowType = DataControlRowType.Header Then

  DirectCast(e.Row.FindControl("ChkHeader"), CheckBox).Attributes.Add("onclick", _

  "ObjJs_" & Me.ID & ".CheckUnCheckRows(this.checked)")

  End If

End If

End Sub

We have to tell the Page that our custom control has JavaScript files that need to be registered when the final HTML is generated for that page. So we need to write a bit of code in the OnInit subroutine. 

Listing 6

Protected Overrides Sub OnInit(ByVal e As EventArgs)

  MyBase.OnInit(e)

  Me.Page.ClientScript.RegisterClientScriptInclude(Me.GetType(), "CustomGridJS", _

  Page.ClientScript.GetWebResourceUrl(Me.GetType(),

  "MyCustomControl.CustomGridJS.js"))

End Sub

And we should declare a JavaScript object from the JavaScript file which contains the client side code as in Listing 7. Using this way allows us to drag and drop our new custom control many times in the page without worrying about confliction between these instances.

Listing 7

Public Overrides Sub Rendercontrol(ByVal writer As System.Web.UI.HtmlTextWriter)

  MyBase.RenderControl(writer)

  ScriptManager.RegisterStartupScript(Page, Me.GetType, Me.ID & "JSBlock", "var

  ObjJs_" & Me.ID & " = new GridClass('" & Me.ClientID & "');", True)

End Sub

I recommend you download the source so that you can preview the JavaScript file which is responsible for the client side functionality.

Implementing Templates Classes

As I said before, the GridView column consists from the set of Template classes (Header, Item, Alternate and Footer). And in our case we need to implement two template classes (Header and Item templates).

Look at listing 8; I will use these two template classes in the constructor of the template field class, and we will create an object from that template field class.

Listing 8

'Header Template Class

NotInheritable Class MyHeaderTemplate

Implements ITemplate

Sub InstantiateIn(ByVal owner As Control) Implements ITemplate.InstantiateIn

  Dim chkboxHeader As New CheckBox

  chkboxHeader.ID = "ChkHeader"

  owner.Controls.Add(chkboxHeader)

End Sub

End Class

'Item Template Class

NotInheritable Class MyItemTemplate

Implements ITemplate

Sub InstantiateIn(ByVal owner As Control) Implements ITemplate.InstantiateIn

  Dim chkboxItem As New CheckBox

  chkboxItem.ID = "ChkItem"

  owner.Controls.Add(chkboxItem)

End Sub

End Class

Here we are setting the look and feel of the header and item template field for the checkbox column; as you can see we are setting the vertical and horizontal align for the header and item template.

Listing 9

Class MyTemplateField

  Inherits TemplateField

  Private _owner As TemplateOwner

  Private _header As MyHeaderTemplate

  Private _item As MyItemTemplate

  Public Sub New()

    _owner = New TemplateOwner

    _header = New MyHeaderTemplate

    _item = New MyItemTemplate

    _header.InstantiateIn(_owner)

    Me.HeaderTemplate = _header

    _item.InstantiateIn(_owner)

    Me.ItemTemplate = _item

    Me.HeaderStyle.VerticalAlign = VerticalAlign.Middle

    Me.HeaderStyle.HorizontalAlign = HorizontalAlign.Center

    Me.HeaderStyle.Width = Unit.Percentage(3)

    Me.ItemStyle.VerticalAlign = VerticalAlign.Middle

    Me.ItemStyle.HorizontalAlign = HorizontalAlign.Center

  End Sub

End Class

<ToolboxItem(False)> _

             Public Class TemplateOwner

  Inherits WebControl

End Class

Using the Control

To add the custom GridView control in your toolbox, follow the subsequent steps:

Right click on the toolbox window then choose “Add Tab.”

Type the name you want for the new tab, right click over it, and click “Choose Items.”

Click on the Browse button in the “.NET Framework Components” tab, go to the custom GridView project, open the bin folder, and choose MyCustomControl.dll.

The result is shown Figure 1.

Figure 1

Now drag the custom GridView control, go the properties window, and check the IncludeColumnCheckBox property, you will note that a new checkbox column has been added to the Gridview automatically.

Figure 2

View the page in a browser, and click the checkbox element in the GridView header row; you will note that all checkboxes are checked/unchecked Client side without the need from you to write any bit of code. And that is why Microsoft gives us the ability to create a new custom control!

Figure 3

Conclusion

In this article, I demonstrate how to create a custom GridView control and how to add a new checkbox column automatically. Also, we have learned how to embedded JavaScript file with custom controls and how to use it in the page.

In addition, we have learned how to create a template field classes and how to declare an object from these classes. I encourage you to download the source code so you can see all what we have done in more details.

前端的寫法：
<asp:templatefield>
	<itemtemplate>
		<asp:label id="Label1" runat="server" text='<%# Eval("MyDateField", "{0:d}") %>' />
	</itemtemplate>
</asp:templatefield>

這個很好用，一定要記起來
增加千分位請用　"{0:N0}"
日期格式請用　"{0:d}"

後端的寫法：
lblGVTotal.Text = Total.ToString("N0");

Hi All here really useful(an working) C# class to export GrdidView’s Contents to Excel’s File TAKED FROM :
Matt Berseth
Really Thanks Matt!!

Waiting to Posting C# Code…

Mình đang viết chức năng quản lý nhân viên trong một dự án web nhỏ. Chức năng này gồm liệt kê danh sách các nhân viên, form update/insert nhân viên, … Với ý tưởng là trên gridview chứa danh sách nhân viên, user chọn edit linkbutton thì gridview sẽ invisible và form edit sẽ được visible. FB thực hiện như sau:

1. Create User Web control ucManageStaff.ascx
2. Add 1 gvStaffList (gridview control) vào ucManageStaff để liệt kê danh sách nhân viên. Setup datasource cho gvStaffList  và set DataKeyNames = StaffID (field key of Staff table)
3. Add fvStaffEdit (formview control) vào ucManageStaff với mục đích edit hoặc insert thông tin nhân viên. fvStaffEdit  này được set thuộc tính visible = false. Setup datasource cho fvStaffEdit và set DataKeyNames = StaffID (field key of Staff table), datasource này được thiết lập phương thức select(int staffid) với selectparameter staffid này được gán cho thuộc tính SelectedValue của gvStaffList. Như vậy khi gvStaffList select 1 row thì key field của row đó sẽ truyền sang cho fvStaffEdit

FB tạo linkbutton trên gvStaffList  để thực thi việc editing

...
<asp:TemplateField>
    <ItemTemplate>
          <asp:LinkButton ID="LinkButton1" runat="server"
                 CausesValidation="false" CommandName="Edit">
              <asp:Image ID="Image1" ImageUrl="~/img/reply.gif" />
          </asp:LinkButton>
    </ItemTemplate>
</asp:TemplateField>
...

Khi user click vào linkbutton trên 1 row nào đó, gvStaffList sẽ thực hiện việc select row này. Để làm điều đó ta cần xử lý sự kiện RowCommand của gvStaffList như sau:

protected void gvStaff_RowCommand(object sender, GridViewCommandEventArgs e)
{
    // get index of row
    int rowIndex = Convert.ToInt32(e.CommandArgument);

    switch (e.CommandName.ToLower())
    {
        case "edit":
            // set selected row is editing row
            gvStaff.SelectedIndex = rowIndex;
            // show fvStaffEdit
            // hide gvStaffList
            break;
        ....
    }
}

Gặp lỗi ngay tại dòng underline đầu tiên, lỗi thông báo “Input string was not in a correct format.” !!! What’s happen??? Đó là do e.CommandArgument là empty, do vậy không thể convert to int được. Chú ý: nếu bạn sử dụng CommandField thay vì dùng TemplateField với LinkButton trong gridview thì lỗi này sẽ không xảy ra bởi asp.net đã thiết lập sẵn CommandArgument cho bạn. Vậy how to solve it???

Tớ biết có 2 cách giải quyết việc này: cách 1 là bind data of StaffID field vào CommandArgument att của LinkButton control, cách 2 là dùng BindingContainer att của LinkButton trong Gridview để lấy được curent row (clicked row)

Cách 1, ta cần sửa gvStaffList như sau:

...
<asp:TemplateField>
    <ItemTemplate>
          <asp:LinkButton ID="LinkButton1" runat="server"
                 CausesValidation="false" CommandName="Edit"
                 CommandArgument="<%#Eval(”StaffID”) %>">
              <asp:Image ID="Image1" ImageUrl="~/img/reply.gif" />
          </asp:LinkButton>
    </ItemTemplate>
</asp:TemplateField>
...

Lúc này hàm RowCommand của gvStaffList sẽ thực hiện mà không gặp lỗi.

Cách 2, sửa hàm RowCommand của gvStaffList:

protected void gvStaff_RowCommand(object sender, GridViewCommandEventArgs e)
{
    // get index of row
    // int rowIndex = Convert.ToInt32(e.CommandArgument);

    // get command control
    if (!(e.CommandSource is LinkButton)) return;
    LinkButton link = (LinkButton)e.CommandSource;

    // Get data container of LinkButton
    GridViewRow row = (GridViewRow)link.BindingContainer;
    switch (e.CommandName.ToLower())
    {
        case "edit":
            // set selected row is editing row
            gvStaff.SelectedIndex = row.RowIndex;

            // show fvStaffEdit
            // hide gvStaffList
            break;
        ....
    }
}

Chỉ có 1 công đoạn nhỏ để truyền tham số thôi nhưng nó rất quan trọng và gây khá nhiều rắc rối cho người mới bắt đầu. Hy vọng bài viết này sẽ giúp ích cho các bạn. Thanks!!!

I had a datatable and i needed to show in a GridView in my ASP .Net page. Following is the code which help me to do so.

        //get table to be shown in grid view;
	DataTable dataTable = GetRequiredTable();
	//assing table to the DataSource property of GridView
	myGridView.DataSource=dataTable;
	//bind data from a data source to the GridView control
	myGridView.DataBind();

You can also use DataSet in place of DataTable.