Dynamically define Rad Grid using Code Behind in C#

[Muhammad]

I want to add Rad Grid Dynamically using Code Behind.with Dynamic Columns 1 Columns should be Drop Down , 1 Column Should be Date picker, 1 Column Should be Text field.these Dynamic Columns should be Shown in Edit mode when Edit button is Clicked.while Showing Data just Data should be shown like data in label.
how can it be possible.

[Princy]

Hi Muhammad,

You can have a GridTemplateColumn to achieve your requirement. To create a template dynamically, you must define a custom class that implements the ITemplate interface. Then you can assign an instance of this class to the ItemTemplate or EditTemplate property of the GridTemplateColumn object. Below is a sample code that shows how to have a DropDown in edit and label in view mode, similarly you can create other columns.

ASPX:

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [Orders]"></asp:SqlDataSource>

C#:

RadGrid RadGrid1;
protected void Page_Init(object sender, EventArgs e)
{
    RadGrid1 = new RadGrid();
    RadGrid1.DataSourceID = "SqlDataSource1";
    RadGrid1.MasterTableView.DataKeyNames = new string[] { "OrderID" };
    RadGrid1.AllowPaging = true;
    RadGrid1.AutoGenerateColumns = false;
    RadGrid1.AutoGenerateEditColumn = true;
    RadGrid1.ItemDataBound += new GridItemEventHandler(RadGrid1_ItemDataBound);

    GridBoundColumn boundColumn1;
    boundColumn1 = new GridBoundColumn();
    boundColumn1.DataField = "OrderID";
    boundColumn1.HeaderText = "OrderID";
    boundColumn1.UniqueName = "OrderID";
    RadGrid1.MasterTableView.Columns.Add(boundColumn1);

    GridBoundColumn boundColumn2;
    boundColumn2 = new GridBoundColumn();
    boundColumn2.DataField = "ShipCity";
    boundColumn2.HeaderText = "ShipCity";
    boundColumn2.UniqueName = "ShipCity";
    RadGrid1.MasterTableView.Columns.Add(boundColumn2);

    string templateColumnName = "employeeid";
    GridTemplateColumn templateColumn = new GridTemplateColumn();
    templateColumn.ItemTemplate = new MyTemplate(templateColumnName);
    templateColumn.EditItemTemplate = new MyEditTemplate();
    templateColumn.HeaderText = templateColumnName;
    templateColumn.DataField = "EmployeeID";
    RadGrid1.MasterTableView.Columns.Add(templateColumn);
    PlaceHolder1.Controls.Add(RadGrid1);
}

public class MyTemplate : ITemplate
{
    private string colname;
    protected Label lControl;
    public MyTemplate(string cName)
    {
        colname = cName;
    }
    public void InstantiateIn(System.Web.UI.Control container)
    {
        lControl = new Label();
        lControl.ID = "lControl";
        lControl.DataBinding += new EventHandler(lControl_DataBinding);
        container.Controls.Add(lControl);
    }

    public void lControl_DataBinding(object sender, EventArgs e)
    {
        Label l = (Label)sender;
        GridDataItem container = (GridDataItem)l.NamingContainer;
        l.Text = ((DataRowView)container.DataItem)[colname].ToString() + "<br />";
    }
}

public class MyEditTemplate : IBindableTemplate
{
    public void InstantiateIn(Control container)
    {
        GridEditFormItem item = ((GridEditFormItem)(container.NamingContainer));
        DropDownList drop = new DropDownList();
        drop.ID = "dropdownlist1";
        container.Controls.Add(drop);
    }
    public System.Collections.Specialized.IOrderedDictionary ExtractValues(System.Web.UI.Control container)
    {
        OrderedDictionary od = new OrderedDictionary();
        od.Add("OrderID", ((DropDownList)(((GridEditFormItem)(container)).FindControl("dropdownlist1"))).DataValueField);
        return od;
    }
}

protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
    if (e.Item is GridEditFormItem && e.Item.IsInEditMode)
    {
        GridEditFormItem editItem = (GridEditFormItem)e.Item;
        DropDownList ddl = (DropDownList)editItem.FindControl("dropdownlist1");
        ddl.DataSourceID = "SqlDataSource1";
        ddl.DataTextField = "Employeeid";
        ddl.DataValueField = "Employeeid";
        ddl.SelectedIndex = editItem.ItemIndex;
    }
}

Thanks,
Princy

[Muhammad]

Thanks Princy for Reply its work fine i want to add one thing more into it
when user click's on edit button Dropdown list Populate's,
but Selected value is not defined as previous selected value lets suppose EmployeeID = 5 when user Click on Edit Button Dropdown List Show's but Selected Value of Dropdown is 1 i want to dropdown to Select previos value as previously defined.

[Muhammad]

and when i click add or edit button it does not fires any event how to make it possible

[Princy]

Hi Muhammad,

In order to set the selected value of the DropDown you can take a look at the following code snippet.
Then for the events to fire, make sure you have added them to your code and if your are handling it manually, do not set AllowAutomaticUpdates/AllowAutomaticInserts to true. Provide your code if this doesn't help.

C#:

RadGrid1.MasterTableView.CommandItemDisplay = GridCommandItemDisplay.Top;
RadGrid1.AutoGenerateEditColumn = true;
RadGrid1.ItemDataBound+=new GridItemEventHandler(RadGrid1_ItemDataBound);
RadGrid1.InsertCommand += new GridCommandEventHandler(RadGrid1_InsertCommand);
RadGrid1.UpdateCommand += new GridCommandEventHandler(RadGrid1_UpdateCommand);
. . .
protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
    if (e.Item is GridEditFormItem && e.Item.IsInEditMode)
    {
     GridEditFormItem editItem = (GridEditFormItem)e.Item;
     DropDownList ddl = (DropDownList)editItem.FindControl("dropdownlist1");
     ddl.DataSourceID = "SqlDataSource1";
     ddl.DataTextField = "Employeeid";
     ddl.DataValueField = "Employeeid";
     ddl.SelectedValue = DataBinder.Eval(editItem.DataItem, "Employeeid").ToString();//set the selected value
    }
}

Thanks,
Princy

[Muhammad]

Thanks Princy its all work fine i want to add one more feature to be included. is it possible to define Template Field Dynamically i mean to say i want to attach this one Defined Template Field in More than one Columns of Rad Grid with Different Column Name, Drop Down List Data etc.??
Thanks in Advance

[Princy]

Hi Muhammad,

I'm not clear about your requirement, I guess you want to use the same ItemTemplate and EditItemTemplate class for different columns. Please take a look at the following, if this doesn't help, elaborate your requirement.

C#:

string templateColumnName = "EmployeeID";
GridTemplateColumn EmployeeID = new GridTemplateColumn();
EmployeeID.ItemTemplate = new MyTemplate(templateColumnName);
EmployeeID.EditItemTemplate = new MyEditTemplate(templateColumnName);
EmployeeID.HeaderText = templateColumnName;
EmployeeID.DataField = "EmployeeID";
RadGrid1.MasterTableView.Columns.Add(EmployeeID);


templateColumnName = "ShipCity";
GridTemplateColumn City = new GridTemplateColumn();
City.ItemTemplate = new MyTemplate(templateColumnName);
City.EditItemTemplate = new MyEditTemplate(templateColumnName);
City.HeaderText = templateColumnName;
City.DataField = "ShipCity";
RadGrid1.MasterTableView.Columns.Add(City);
. . . .
public class MyTemplate : ITemplate
{
    protected Label lControl;
    private string colname;

    public MyTemplate(string cName)
    {
        colname = cName;
    }
    public void InstantiateIn(System.Web.UI.Control container)
    {
        lControl = new Label();
        lControl.ID = "lControl"+colname;
        lControl.DataBinding += new EventHandler(lControl_DataBinding);
        container.Controls.Add(lControl);
    }

    public void lControl_DataBinding(object sender, EventArgs e)
    {
        Label l = (Label)sender;
        GridDataItem container = (GridDataItem)l.NamingContainer;
        l.Text = ((DataRowView)container.DataItem)[colname].ToString() + "<br />";
    }
}

public class MyEditTemplate : IBindableTemplate
{
     private string colname;
     public MyEditTemplate(string cName)
    {
        colname = cName;
    }
    public void InstantiateIn(Control container)
    {
        GridEditFormItem item = ((GridEditFormItem)(container.NamingContainer));
        DropDownList drop = new DropDownList();
        drop.ID = "dropdownlist"+colname;
        container.Controls.Add(drop);
    }
    public System.Collections.Specialized.IOrderedDictionary ExtractValues(System.Web.UI.Control container)
    {
        OrderedDictionary od = new OrderedDictionary();
        od.Add("OrderID", ((DropDownList)(((GridEditFormItem)(container)).FindControl("dropdownlist"+colname))).DataValueField);
        return od;
    }
}

protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
    if (e.Item is GridEditFormItem && e.Item.IsInEditMode)
    {
        GridEditFormItem editItem = (GridEditFormItem)e.Item;
        DropDownList ddlEmployeeid = (DropDownList)editItem.FindControl("dropdownlistEmployeeID");
        ddlEmployeeid.DataSourceID = "SqlDataSource1";
        ddlEmployeeid.DataTextField = "EmployeeID";
        ddlEmployeeid.DataValueField = "EmployeeID";
        ddlEmployeeid.SelectedValue = DataBinder.Eval(editItem.DataItem, "EmployeeID").ToString();
        DropDownList ddlShipCity = (DropDownList)editItem.FindControl("dropdownlistShipCity");
        ddlShipCity.DataSourceID = "SqlDataSource1";
        ddlShipCity.DataTextField = "ShipCity";
        ddlShipCity.DataValueField = "ShipCity";
        ddlShipCity.SelectedValue = DataBinder.Eval(editItem.DataItem, "ShipCity").ToString();
    }
}

Thanks,
Princy

[Fahad]

I want to add rows dynamically in radgrid from code behind from a button (on CLICK Event) outside Radgrid & bind columns to it dynamically . Take the number & type of columns from Database. can you suggest a solution for the same ?

[Fahad]

When I click on "Add' button, the rows of Radgrid should be added & the columns (dropdowns) should be binded dynamically. I have the number of columns and their values stored in Database.

[Fahad]

When I click on "Add' button, the rows of Radgrid should be added & the columns (dropdowns) should be binded dynamically. I have the number of columns and their values stored in Database.

[To]

You can give yourself source?

I'm every need this demo.

[Beryl]

I am trying to add the template column to a grid that is created using  the Telerik:RadGrid control.  Is this possible?

[Attila Antal]

Hi Beryl,

Yes, it is possible. I have answered your questions you have posted in the other forum thread and are related to this topic.

See Add Template Column, Edit Template Column and RadDropdownlist to Grid programmatically.

Kind regards,
Attila Antal
Progress Telerik