Clickable GridView/ Databound Ind GridView Simple Example:

Clickable GridView/ Databound Ind GridView Simple Example:

Here I will explain how to create clickable/Databound GridView Columns  in Asp.Net with simple example.Here Im using a class and custom list to bind the GridView and Chart controls.

Output:

Steps:

• Open Vusual studio=> new=> web => Asp.net empty web application=> Give name(i gave as ClickableGridView)=> ok
• solution explorer=> add => new item=> Web Form=>ok
• Go to toolbox=> GridView (double click the gridview) and add some databound columns see the following code
• Include the following namespace in .cs page
  using System.Collections.Generic;

Xaml Code:

 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">

        <Columns>

         <asp:BoundField DataField="Name" HeaderText="ColumnTitle1(Name)"  />

          <asp:BoundField DataField="Count" HeaderText="ColumnTitle2(Count)"  />

          <asp:TemplateField HeaderText="Edit">

            <ItemTemplate>

               <asp:Button ID="Button1" runat="server" Text="Button" CommandArgument = '<%#Eval("Name")%>' OnClick="MyButtonClick" />

            </ItemTemplate> 

         </asp:TemplateField>

        </Columns>

      </asp:GridView>

C# code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace ClickableGridView

{

    public partial class ClickableGridView : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            BindGridViewFn();

        }

        private void BindGridViewFn()

        {

            //inserting GirdView list data

            List<Data> lobjchart = new List<Data>();

            lobjchart.Add(new Data() { Name = "blog1", Count = 10});

            lobjchart.Add(new Data() { Name = "blog2", Count = 50 });

            lobjchart.Add(new Data() { Name = "blog3", Count = 41 });

            lobjchart.Add(new Data() { Name = "blog4", Count = 10 });

            GridView1.DataSource = lobjchart;

            GridView1.DataBind();

        }

        protected void MyButtonClick(object sender, System.EventArgs e)

        {

            //Get the Bind value and perform some actions

            Button btn = (Button)sender;

            string Name = btn.CommandArgument;

            //do somthing

        }

    }

    public class Data

    {

        public string Name { get; set; }

        public int Count { get; set; }

    }

}

Note:

If you want to use hyperlink instead of using button in GridVew use the Following Code
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
        <Columns>
         <asp:BoundField DataField="Name" HeaderText="ColumnTitle1(Name)"  />
          <asp:BoundField DataField="Count" HeaderText="ColumnTitle2(Count)"  />
          <asp:HyperLinkField  DataNavigateUrlFields="Name"  DataNavigateUrlFormatString="NewPage.aspx?ID={0}"
            DataTextField="Edit" HeaderText="ColumnTitle(Edit)"/>
        </Columns>
      </asp:GridView>