Erobo Software | Scripts: C# | Changing Cells in a Telerik RadGrid Dynamically

Scripts: C# :: Telerik web controls :: Library Article #11

Developer's Section

Changing Cells in a Telerik RadGrid Dynamically
By: Erobo Team Member

Hire a Developer for Related Work / Installation | $55 hr

Rating: \| Rate It:
Average Votes: (3206)
Favorites:

Learn a simple technique to change/modify the contents of a cell in a Telerik RadGrid Web Control dynamically.

In this tutorial we will look at a Telerik RadGrid control that uses the event OnItemDataBound to change the items within a cell dynamically after binding the data to the RadGrid. We will use a generic list to bind the data to a RadGrid (List<T> Class). Finally, In order to access the items in the cells we will assign unique names to the different cells.

In file myClientsList.aspx:

	Code Snippet 1

<%@ Control Language="C#" AutoEventWireup="true"
CodeBehind="myClientsList.aspx.cs" Inherits="Dev.UserControls.myClientsList" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI"
    TagPrefix="telerik" %>

<telerik:RadGrid ID="GridView1" runat="server" AutoGenerateColumns="false"
    OnRowDataBound="GridView1_DataBound" AutoGenerateSelectButton="false"
AllowPaging="true" onpageindexchanged="GridView1_PageIndexChanged" PageSize="50"
OnPageSizeChanged="RadGrid1_PageSizeChanged">
  <MasterTableView>
    <Columns>
      <telerik:GridBoundColumn DataField="clientID" ShowHeader="false" Visible="false"
        uniqueName="a1"  />
      <telerik:GridBoundColumn DataField="isActive" ShowHeader="false" Visible="false"
        UniqueName="a2"  />
      <telerik:GridTemplateColumn UniqueName="a3" HeaderText="Client Name">
          <ItemTemplate>
            <%#Eval("clientName") %>
          </ItemTemplate>
      </telerik:GridTemplateColumn>

      <telerik:GridTemplateColumn UniqueName="a4" HeaderText="Client Phone">
          <ItemTemplate>
            <%#Eval("clientPhone") %>
          </ItemTemplate>
      </telerik:GridTemplateColumn>
      <telerik:GridTemplateColumn UniqueName="a5" HeaderText="Action">
          <ItemTemplate>
            <asp:LinkButton ID="LinkButton1" runat="server"  Text="Edit">
            </asp:LinkButton>
          </ItemTemplate>
      </telerik:GridTemplateColumn>
    </Columns>
  </MasterTableView>
</asp:GridView>

Note the method GridView1_DataBound will be called when the data is bound to the actual row item. Now, in the code behind we will handle this method accordingly to modify, or delete fields.

In file myClientsList.aspx.cs:

	Code Snippet 2

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using Telerik.Web.UI;

namespace Dev.UserControls
{
  public partial class myClientsList : System.Web.UI.Page
  {
     protected void Page_Load(object sender, EventArgs e)
     {
       BindGrid();
     }

     public void BindGrid()
     {

       List<ClientObject> lstClients = null;

       IDataReader dr = MyUtil.GetClientsFromStoredProc();

       bool isActive = false;

       lstClients = new List<ClientObject>();

       while (dr.Read())
       {
         if (Convert.ToString(dr["resgisOn"]) == "" || DBNull.Value == dr["resgisOn"])
         {
           isActive = false;
         }
         else
         {
           isActive = true;
         }

         lstClients.Add(new ClientObject(Convert.ToInt32(dr["clientID"]),
                                         isActive,
                                         Convert.ToString(dr["clientName"]),
                                         Convert.ToString(dr["clientPhone"])));
       }
       if (dr != null)
       {
         dr.Close();
       }

       GridView1.DataSource = lstClients;
       GridView1.DataBind();
       ViewState.Add("listClients", lstClients.ToArray());
     }

     [Serializable]
     public class ClientObject
     {

       private int clientid;
       public int clientID{ get { return clientid; } set { clientid = value; } }

       private bool isactive;
       public bool isActive{ get { return isactive; } set { isactive = value; } }

       private string clientname;
       public string clientName{ get { return clientname; } set { subject = value; } }

       private string clientphone;
       public string clientPhone{ get { return clientphone; } set { clientphone = value; } }

       public ClientObject(int clientID, bool isActive, string name, string phone, )
       {
         this.clientID = clientID;
         this.isActive = isActive;
         this.clientName = name;
         this.clientPhone = phone;
       }

     }

     //Change items within a cell for the RadGrid Control
     protected void GridView1_DataBound(object sender, GridItemEventArgs e)
     {

       GridDataItem item = null;

       if (e.Item.ItemType == GridItemType.Item ||
           e.Item.ItemType == GridItemType.AlternatingItem)
       {
         ClientObject rowView = (ClientObject)e.Item.DataItem;

         LinkButton thisBtnField = null;

         if (rowView != null)
         {

           if (rowView.isActive == false)
           {
             //access individual cells by Unique Name
             item = (GridDataItem)e.Item;
             item["a3"].Text = "<b>Inactive: </b>" + rowView.ClientName;
             item["a3"].ColumnSpan = 3;
             item["a3"].BackColor = System.Drawing.Color.Red;

             item["a4"].Visible = false;
             item["a5"].Visible = false;
           }
         }
       }
     }

     //Handle Paging for the RadGrid Control
     protected void GridView1_PageIndexChanged(object sender,
                                                   GridPageChangedEventArgs e)
     {
       int idx = e.NewPageIndex;
       ClientObject[] newArray = (ClientObject[])ViewState["lstClients"];
       List<ClientObject> lstClients2 = null;
       lstClients2 = new List<ClientObject>(newArray);
       GridView1.DataSource = lstClients2;
       GridView1.DataBind();
       GridView1.CurrentPageIndex = idx;
     }

     //Handle Page Size change for the RadGrid Control
     protected void GridView1_PageSizeChanged(object sender,
                                                GridPageSizeChangedEventArgs e)
     {
       ClientObject[] newArray = (ClientObject[])ViewState["lstClients"];
       List<ClientObject> lstClients2 = null;
       lstClients2 = new List<ClientObject>(newArray);
       GridView1.DataSource = lstClients2;
       GridView1.DataBind();
     }
  }
}

Other operations such as delete cells using removeAt() are also available. I Hope this helps!.

See other Scripts in Telerik web controls

Submit Your Scripts:

System Message:

Your C# script has been sent. Please allow 48 hours for processing.

If you would like to have your Javascripts published in this section please fill out
the form below: