[Solved] Access DropDownList in DetailTables cell

[Mark]

Hi

My RadGrid is using a DetailTables and one of its columns is a GridTemplateColumn with an ASP.NET DropDownList server control.

On server side I use DetailTableDataBind to bind data to the detail grid which works fine. However at this stage I would also like to populate the DropDownList with lookup values.

How do I access this? When looking in GridDetailTableDataBindEventArgs the e.DetailTableView.Items array is always zero.

Let me know if you require any further information.


Kind regards

Mark Eaton

[Ves]

Hello Mark,

DetailTableDataBind event is too early to find these DropDownList controls as they do not exist yet. You can wire ItemDataBound event. However it will be fired for all items including those for the MasterTableView, so you will need to check if e.Item belongs to the correct GridTableView. You can find this task discussed in details in this help topic. Once you have verified that the currently bound item is from the details table you can access the DropDownList using FindControl method. You can find additional details about accessing RadGrid cells and rows here. I hope this helps.

All the best,
Ves
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Mark]

Thanks, that made more sense. I can access these controls nicely.


Kind regards

Mark Eaton

[David]

C# code :

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
    DataTable dt;
    DataTable gender;
    
    protected void Page_Load(object sender, EventArgs e)
    {       
        if (!IsPostBack)
        {
            DataRow dr;            
            int i;            
            
            dt = new DataTable();
            dt.Columns.Add("Name", typeof(string));
            dt.Columns.Add("Age", typeof(int));
            dt.Columns.Add("GenderId", typeof(string));

            for (i = 1; i <= 10; i++)
            {
                dr = dt.NewRow();
                dr["Name"] = "Test-" + i.ToString();
                dr["Age"] = i;
                dr["GenderId"] = "M";

                dt.Rows.Add(dr);
            }

            Session["dt"] = dt;

            gender = new DataTable();
            gender.Columns.Add("GenderId", typeof(string));
            gender.Columns.Add("Description", typeof(string));

            dr = gender.NewRow();
            dr["GenderId"] = "M";
            dr["Description"] = "Male";
            gender.Rows.Add(dr);

            dr = gender.NewRow();
            dr["GenderId"] = "F";
            dr["Description"] = "Female";
            gender.Rows.Add(dr);

            Session["gender"] = gender;

            dgData.DataSource = dt;            
            dgData.DataBind();

            i = 1;           
        }
        else
        {
            dt = (DataTable) Session["dt"];
            gender = (DataTable) Session["gender"];

            dgData.DataSource = dt;
        }        
    }
    protected void RadComboBox1_ItemDataBound(object sender, Telerik.Web.UI.RadComboBoxItemEventArgs e)
    {
        //e.Item.Text = e.Item.DataItem.ToString();
    }
    protected void dgData_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
    {        
        if (e.Item.ItemType == Telerik.Web.UI.GridItemType.Item ||
            e.Item.ItemType == Telerik.Web.UI.GridItemType.AlternatingItem)
        {                                    
            if (e.Item.Edit)
            {
                Telerik.Web.UI.GridDataItem dataItem = (Telerik.Web.UI.GridDataItem)e.Item;
                Telerik.Web.UI.RadComboBox cmb = (Telerik.Web.UI.RadComboBox)dataItem["GenderId"].FindControl("RadComboBox1");                

                cmb.DataSource = gender;
                cmb.DataBind();
            }            
        }        
    }    
}

ASPX code :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="dgData">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="dgData" LoadingPanelID="RadAjaxLoadingPanel1"/>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="50">
            <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
                style="border: 0px;" />
        </telerik:RadAjaxLoadingPanel>
        <div>
            <telerik:RadGrid ID="dgData" runat="server" AllowPaging="True" GridLines="None" ShowGroupPanel="True" PageSize="5" AllowAutomaticDeletes="True" AllowAutomaticInserts="True" AllowAutomaticUpdates="True" AutoGenerateColumns="False" ShowStatusBar="True" Skin="Vista" AutoGenerateDeleteColumn="True" AutoGenerateEditColumn="True" AllowMultiRowEdit="True" AllowMultiRowSelection="True" GroupingEnabled="False" OnItemDataBound="dgData_ItemDataBound">
                <ExportSettings>
                    <Pdf FontType="Subset" PaperSize="Letter" />
                    <Excel Format="Html" />
                </ExportSettings>
                <MasterTableView CommandItemDisplay="Top" CurrentResetPageIndexAction="SetPageIndexToFirst"
                    Dir="LTR" Frame="Border" TableLayout="Auto">
                    <CommandItemTemplate>
                        <div style="padding:10px 0px;">
                            Custom command item template &nbsp;
                            <asp:LinkButton Style="vertical-align: bottom" ID="btnEditSelected" runat="server"
                                CommandName="EditSelected" CausesValidation="false" Visible='<%# dgData.EditIndexes.Count == 0 %>'><img style="border:0px;vertical-align:middle;" alt="" src="../../DataEditing/Img/Edit.gif" /> Edit Selected Products</asp:LinkButton>
                            <asp:LinkButton ID="btnUpdateEdited" runat="server" CommandName="UpdateEdited" Visible='<%# dgData.EditIndexes.Count > 0 %>'><img style="border:0px;vertical-align:middle;" alt="" src="../../DataEditing/Img/Update.gif" /> Update Products</asp:LinkButton>
                            &nbsp;
                            <asp:LinkButton ID="btnCancel" runat="server" CommandName="CancelAll" CausesValidation="false" Visible='<%# dgData.EditIndexes.Count > 0 || dgData.MasterTableView.IsItemInserted %>'><img style="border:0px;vertical-align:middle;" alt="" src="../../DataEditing/Img/Cancel.gif" /> Cancel editing</asp:LinkButton>
                            &nbsp;
                            <asp:LinkButton ID="LinkButton2" runat="server" CommandName="InitInsert" Visible='<%# !dgData.MasterTableView.IsItemInserted %>'><img style="border:0px;vertical-align:middle;" alt="" src="../../DataEditing/Img/AddRecord.gif" /> Add new Product</asp:LinkButton>
                            <asp:LinkButton ID="LinkButton3" runat="server" CommandName="PerformInsert" Visible='<%# dgData.MasterTableView.IsItemInserted %>'><img style="border:0px;vertical-align:middle;" alt="" src="../../DataEditing/Img/Insert.gif" /> Add this Product</asp:LinkButton>
                            &nbsp;
                            <asp:LinkButton ID="LinkButton1" OnClientClick="javascript:return confirm('Delete all selected Products?')"
                                runat="server" CommandName="DeleteSelected" CausesValidation="false"><img style="border:0px;vertical-align:middle;" alt="" src="../../DataEditing/Img/Delete.gif" /> Delete Selected Products</asp:LinkButton>
                            &nbsp;&nbsp;&nbsp;
                            <asp:LinkButton ID="LinkButton4" runat="server" CommandName="RebindGrid"><img style="border:0px;vertical-align:middle;" alt="" src="../../DataEditing/Img/Refresh.gif" /> Refresh Product list</asp:LinkButton>
                        </div>
                    </CommandItemTemplate>
                    <RowIndicatorColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType"
                        Visible="False">
                        <HeaderStyle Width="20px" />
                    </RowIndicatorColumn>
                    <ExpandCollapseColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType"
                        Resizable="False" Visible="False">
                        <HeaderStyle Width="20px" />
                    </ExpandCollapseColumn>
                    <EditFormSettings>
                        <EditColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType">
                        </EditColumn>                       
                    </EditFormSettings>
                    <Columns>
                        <telerik:GridClientSelectColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType" UniqueName="column3"></telerik:GridClientSelectColumn>
                        <telerik:GridBoundColumn CurrentFilterFunction="NoFilter" DataField="Name" FilterListOptions="VaryByDataType"
                            ForceExtractValue="None" HeaderText="Name" UniqueName="Name" ReadOnly="True" SortExpression="Name">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn CurrentFilterFunction="NoFilter" DataField="Age" FilterListOptions="VaryByDataType"
                            ForceExtractValue="None" HeaderText="Age" UniqueName="Age" SortExpression="Age">
                        </telerik:GridBoundColumn>
                        <telerik:GridTemplateColumn CurrentFilterFunction="NoFilter" DataField="GenderId"
                            FilterListOptions="VaryByDataType" ForceExtractValue="None" HeaderText="Gender Id"
                            SortExpression="GenderId" UniqueName="GenderId">                               
                            <ItemTemplate>
                                <%# DataBinder.Eval(Container.DataItem, "GenderId") %>                               
                            </ItemTemplate>
                            <EditItemTemplate>
                                <telerik:RadComboBox ID="RadComboBox1" runat="server" OnItemDataBound="RadComboBox1_ItemDataBound">
                                    <HeaderTemplate>
                                        <table cellspacing="0" cellpadding="0" border="0">
                                            <tr>
                                                <td style="width:20px">Id</td>
                                                <td style="width:40px">Description</td>
                                            </tr>
                                        </table>
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <table cellspacing="0" cellpadding="0" border="0">
                                            <tr>
                                                <td><%# DataBinder.Eval(Container.DataItem, "GenderId")%></td>
                                                <td><%# DataBinder.Eval(Container.DataItem, "Description")%></td>
                                            </tr>
                                        </table>
                                    </ItemTemplate>                                   
                                </telerik:RadComboBox>
                            </EditItemTemplate>
                        </telerik:GridTemplateColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings AllowDragToGroup="True">
                    <Selecting AllowRowSelect="True" />
                </ClientSettings>
                <PagerStyle Mode="NextPrevAndNumeric" />
                <GroupPanel ID="GroupPanel" Style="width: 100%;" Visible="True">
                </GroupPanel>
            </telerik:RadGrid>
        </div>
    </form>
</body>
</html>

Hi,

I'm using RadGrid right now, and I'm using template column in one of the columns. I put a combobox in the edit template column. I need to access the combobox to bind the data, and I'm using the code above. But it gave a null exception, it seems that it cannot find the control. can you help me? thx.

[Yavor]

Hi David,

If you are using the standard edit mode, you can still use the ItemDataBound event handler, and check for items of type GridEditFormItem  (if e.Item is GridEditFormItem && e.Item.IsInEditMode), and then access the combobox.

All the best,
Yavor
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[David]

It works, thanx

regards,

David

[David]

Hi Again,

I have succeeded  in binding  the data  to the radcombobox.  Now, I want to assign the selected value with the value on the grid. Because whenever I clicked "Edit" the selected value in the radcombobox was always not the same as the value in the grid.

I tried to use the following code :

    protected void dgData_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
    {
        if (e.Item is Telerik.Web.UI.GridEditableItem
            && (e.Item as Telerik.Web.UI.GridEditableItem).IsInEditMode)
        {
            Telerik.Web.UI.GridEditableItem editedItem = e.Item as Telerik.Web.UI.GridEditableItem;

            Telerik.Web.UI.RadComboBox cmb = editedItem.FindControl("RadComboBox1") as Telerik.Web.UI.RadComboBox;
            Telerik.Web.UI.RadComboBox cmb2 = editedItem.FindControl("RadComboBox2") as Telerik.Web.UI.RadComboBox;

            cmb.DataSource = gender;
            cmb.DataValueField = "GenderId";
            cmb.DataBind();

            cmb2.DataSource = city;
            cmb2.DataTextField = "Name";
            cmb2.DataValueField = "CityId";
            cmb2.DataBind();

            cmb2.SelectedValue = editedItem["CityId"].Text;
        }

, but it didn't work. The "editedItem["CityId"].Text" always returns the empty string value.

Can you help me to solve this problem? Thanx.

Regards,


David

---

[Yavor]

Hi David,

The following code sample shows one possible implementations:

.cs

 protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridEditFormItem && e.Item.IsInEditMode)
        {
            GridEditFormItem editedItem = (GridEditFormItem)e.Item;

            RadComboBox cmb = editedItem.FindControl("RadComboBox1") as RadComboBox;

            cmb.DataSource = AccessDataSource1;
            cmb.DataValueField = "CategoryName";
            cmb.DataTextField = "CategoryName";
            cmb.SelectedValue = ((System.Data.DataRowView)(e.Item.DataItem)).Row["CategoryName"].ToString();
            cmb.DataBind();
        }

    }

I hope this information helps.

Kind regards,
Yavor
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center