How do I add a Dropdown to a Grid programmatically

[Jerry]

I'm binding to a DataTable using the RadGrid and set to AutoGenerateColumns
but I need to add a dropdown list to each cell.

I can't use the "template columns" to create the dropdown because the column name could change from day to day.

 

The function I really would like is when a cell is clicked on it would switch to a dropdown.

 

If you have an example of this it would be fantastic.

[Princy]

Hi Jerry,

Try the following code snippet to add a DropDownList to cell dynamically.

ASPX:

 <ClientSettings EnablePostBackOnRowClick="true"  >
         </ClientSettings>

CS:

  protected void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)
    {
        if (e.CommandName == "RowClick")
        {
            DropDownList ddl = new DropDownList();
            ddl.ID = "DropDownList1";
            GridDataItem item = (GridDataItem)e.Item;
            item["columnUniqueName"].Controls.Add(ddl);
        }
    }

Thanks
Princy.

[Jerry]

Thank you for your prompt reply.

 

I'm sorry if my questions are basic but I just started using the RadGrid.

 

1) How can I get the value so I could add it to the DropDownList?

 

2) When the user click out of the cell how can I change it back with the new value?

 

 

Thank you again.

[Shinu]

Hi Jerry,

Try the following code snippet to add a DropDownList on cell click and add  cell text as an item in the DropDown.

CS:

protected void RadGrid2_ItemDataBound(object sender, GridItemEventArgs e)
    {

        if (e.Item is GridDataItem)
        {
            GridDataItem item = (GridDataItem)e.Item;
            string strcell = item["FirstName"].Text;
            int rowindx = item.ItemIndex;
            item["FirstName"].Attributes.Add("OnClick", "return Show('" + strcell + "');");

        }
    }
    protected override void RaisePostBackEvent(IPostBackEventHandler source, string eventArgument)
    {
        base.RaisePostBackEvent(source, eventArgument);

        if (source == this.RadGrid2 )
        {
           string strcell=  eventArgument.Split(':')[1];
           foreach (GridDataItem item in RadGrid2.MasterTableView.Items)
           {
               if (item["FirstName"].Text == strcell)
               {
                   DropDownList ddl = new DropDownList();
                   ddl.ID = "DropDownList12";
                   ddl.Items.Add("Item1");
                   ddl.Items.Add("Item2");
                   ddl.Items.Add(strcell);
                   item["FirstName"].Controls.Add(ddl);
                   ddl.SelectedIndexChanged += new EventHandler(ddl_SelectedIndexChanged);
                   item["FirstName"].Attributes.Clear();
               }
           }


        }
    }

JS:

<script type="text/javascript" language="javascript">
     function Show(strcell,index)
     {
      __doPostBack("<%= RadGrid2.UniqueID %>", "RowClicked:" + strcell );
     }
    </script>

Thanks
Shinu.

[Jerry]

Hi Shine and princy, it looks like the solution you gave me was not correct and/or complete. below is the modification I did to make it run correctly to some degree.

 

What I'm trying to achieve is when I click on any cell on the datagrid it will change to a Dropdown. Once an item is selected on the dropdown it will change back to its original state with it's new value.

 

 

Do you have a working example that is simple, efficient, and using Ajax.net?

 

Note:

I'm creating all this dynamically because the data in the datatable (like the header) can change at anytime, which mean I can't hard code anything.

 

Again, a working example would be of great help.

 

 

Thank you in advance.

CS:
protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        string strcell = "";

        if (e.Item is GridDataItem)
        {
            //GridDataItem item = (GridDataItem)e.Item;

            foreach (GridColumn column in e.Item.OwnerTableView.RenderColumns)
            {
                if (column is GridBoundColumn)
                {
                        strcell = ((GridDataItem)e.Item)[column.UniqueName].Text;

                        //int rowindx = e.Item.ItemIndex;
                        ((GridDataItem)e.Item)[column.UniqueName].Attributes.Add("OnClick", "return Show('" + column.UniqueName + "|" + strcell + "');");
                        
                }
            }
        }
    }
    protected override void RaisePostBackEvent(IPostBackEventHandler source, string eventArgument)
    {
        base.RaisePostBackEvent(source, eventArgument);

        if (source == this.RadGrid1)
        {
            string strcell = eventArgument.Split('|')[1];
            string columnName = eventArgument.Split('|')[0];
            foreach (GridDataItem item in RadGrid1.MasterTableView.Items)
            {
                if (item[columnName].Text == strcell)
                {
                    DropDownList ddl = new DropDownList();
                    ddl.ID = "DropDownList12";
                    ddl.Items.Add(strcell);
                    ddl.Items.Add("Item1");
                    ddl.Items.Add("Item2");                  
                    item[columnName].Controls.Add(ddl);
                    ddl.SelectedIndexChanged += new EventHandler(ddl_SelectedIndexChanged);
                    item[columnName].Attributes.Clear();
                    break;
                }
            }
        }
    }


ASPX:

     function Show(strcell,index) 
     { 
      __doPostBack("<%= RadGrid1.UniqueID %>", strcell ); 
     }

[Curley]

Thanks this thread was a big help.

[Curley]

I've successfully used the code above to dynamically add dropdownlist to the grid, but I can't get its SelectedIndexChanged event to fire. Please help!

[Iana Tsolova]

Hi Curley,

Try setting the AutoPostBack property of the dropdown to true and see if it makes any difference. Its default value is false, so by default the dropdown does not invoke postback.

Regards,
Iana
the Telerik team

[Curley]

I've set autopostback to true, I've given the dropdownlist an ID and assigned it a selectedindexchanged method.

Is there any other way to created a dropdownlist in a telerik grid that can be used in normal mode? My goal is to to have a dropdownlist pre-filled and populated when the grid loads. Next, I need to be able to select an item in the dropdownlist that will redirect you to another web page. This is why i need the selectedindexchanged event to fire.

[Iana Tsolova]

Hi Curley,

Another approach is to add a declarative GridTemplateColumn and define the DropDownList in its ItemTemplate. Then you can handle the SelectedIndexChanged event, set AutoPostBack to true and assign a declarative datasource to the DataSourceID property.

Other than this, if you need to add the DropDownList dynamically, the already discussed approach is the proper one.

Regards,
Iana
the Telerik team

[Curley]

I have also tried using the technique in the Creating ItemTemplate/EditItemTemplate of GridTemplateColumn programmatically section of the following help page:
http://www.telerik.com/help/aspnet/grid/grdprogrammaticcreation.html

The selectedindexchanged event still doesn't fire when I select an item in the dropdownlist. Here is my code below:

Public Class LoadControls
    Implements ITemplate
    Protected WithEvents ddl As DropDownList
    Private colname As String


    Public Sub New(ByVal cName As String)
        MyBase.New()
        colname = cName
    End Sub



    Public Sub InstantiateIn(ByVal container As System.Web.UI.Control) Implements System.Web.UI.ITemplate.InstantiateIn
        ddl = New DropDownList
        ddl.ID = "DropDownList2"
        ddl.Items.Add("Select Page")
        ddl.Items.Add("View Card Transactions")
        ddl.Items.Add("Edit Customer")
        ddl.AutoPostBack = True
        ddl.CausesValidation = True
        Dim table As Table = New Table
        Dim row1 As TableRow = New TableRow
        Dim cell1 As TableCell = New TableCell
        row1.Cells.Add(cell1)
        table.Rows.Add(row1)
        container.Controls.Add(ddl)
        AddHandler ddl.SelectedIndexChanged, AddressOf AdvancedSearch.DropDownList2_SelectedIndexChanged
    End Sub

    Protected Sub DropDownList2_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles ddl.SelectedIndexChanged
        Dim cars As String = "jag"
    End Sub

End Class



Here is the code that I use to generate the column in the grid.

            Dim ColumnDropDownList As Telerik.Web.UI.GridTemplateColumn

            ColumnDropDownList = New Telerik.Web.UI.GridTemplateColumn

            Dim columndropdownlistname As String = "Navigation"

            ColumnDropDownList.ItemTemplate = New LoadControls(columndropdownlistname)

            ColumnDropDownList.HeaderText = "Navigation"

            Me.wrgAdvSearch.MasterTableView.Columns.Add(ColumnDropDownList)



Again the DropDownList2_SelectedIndexChanged changed event does not fire when I select different items from the dropdownlist.

I have only been able to get a selectedindexchanged event to fire from a dropdownlist that was coded on the asp side, but it's not efficient because we bind the grid after the page is loaded. Do you guys have any suggestions.

[Iana Tsolova]

Hi Curley,

I reviewed the and code observed that the DropDownList has CausesValidation set to true. Does it makes any difference if you turn it back to false?

Greetings,
Iana
the Telerik team

[Curley]

Setting CausesValidation to false doesn't make any difference. The following post had the exact same problem but I can't find his resolution to the problem.

http://www.telerik.com/community/forums/aspnet-ajax/grid/grid-with-dynamic-columns-gridtemplatecolumn-dynamic-control-events-not-firing.aspx


Creating Dynamic Controls  is a serious  issue that you guys need to address. Myself and others have followed your examples to the max and still haven't gotten it to work properly. I'm seriously disappointed in the flexibility of the RadGrid.

[Iana Tsolova]

Hi Curley,

There is nothing special in instantiating controls in the GridTemplateColumn ItemTemplate. You just have to follow the rules for implementing the ITemplate of the ASP.NET Framework. The only thing you should have in mind is the way you add the columns in the grid which is described in the Programmatic Creation topic of the grid.

I prepared a sample based on your requirements. It follows the samples in the mentioned help topic.
Check it out and let me know if it works as desired and what differs in your case.

Greetings,
Iana
the Telerik team

[Curley]

Thanks for sending the solution as it helped me to figure out my problem. I wasn't creating the GridTemplateColumn and binding the dropdownlist in the PageInit. Also, I didn't have the following line in the InstantiateIn method....

 Dim container As GridDataItem = DirectCast(DDL.NamingContainer, GridDataItem)

I think you guys should showcase this feature in the live the demo section because its extremely powerful and should be a good selling point.

[Iana Tsolova]

Hi Curley,

Thank you for your feedback.

We have a demo for creating RadGrid programmatically. But you are right that we do not have a single demo with a dynamically added GridTemplateColumn. We will consider adding a demo illustrating this.


Regards,
Iana
the Telerik team