How to populate ASPxComboBox?

Question

I have Editable ASPxGridView and confused how to populate the ASPxComboBox init.

Consider The following scenario in which we have a list of cars with colors.

After Edit is clicked.

I want to add datasource to this highlighted color combobox. My code is given below:

ASP Code

<dx:ASPxGridView ID="grid" runat="server" AutoGenerateColumns="False" 
KeyFieldName="ID" onstartrowediting="ASPxGridView1_StartRowEditing">
<Columns>
    <dx:GridViewCommandColumn VisibleIndex="0">
        <EditButton Visible="True">
        </EditButton>
    </dx:GridViewCommandColumn>
    <dx:GridViewDataTextColumn Caption="ID" FieldName="ID" Name="ID" 
        VisibleIndex="1">
    </dx:GridViewDataTextColumn>
    <dx:GridViewDataTextColumn Caption="Car" FieldName="Car" Name="Car" 
        VisibleIndex="2">
        <EditItemTemplate>
               <dx:ASPxComboBox ID="ASPxComboBox1" runat="server" 
                           Text='<%# Eval("Car") %>'>
               </dx:ASPxComboBox>
        </EditItemTemplate>
    </dx:GridViewDataTextColumn>
    <dx:GridViewDataTextColumn Caption="Color" FieldName="Color" Name="Color" 
        VisibleIndex="3">
        <EditItemTemplate>
            <dx:ASPxComboBox ID="colorCombo" runat="server">
            </dx:ASPxComboBox>
        </EditItemTemplate>
    </dx:GridViewDataTextColumn>
</Columns>

C# Code

protected void Page_Load(object sender, EventArgs e)
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("ID");
            dt.Columns.Add("Car");
            dt.Columns.Add("Color");

            DataRow dr = dt.NewRow();
            dr["ID"] = "1";
            dr["Car"] = "Suzuki";
            dr["Color"] = "Green";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["ID"] = "2";
            dr["Car"] = "Toyota";
            dr["Color"] = "Blue";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["ID"] = "3";
            dr["Car"] = "Toyota";
            dr["Color"] = "Black";
            dt.Rows.Add(dr);

            grid.DataSource = dt;
            grid.DataBind();
        }

        protected void ASPxGridView1_StartRowEditing(object sender,
                          DevExpress.Web.Data.ASPxStartRowEditingEventArgs e)
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("ID");
            dt.Columns.Add("Color");

            DataRow dr = dt.NewRow();
            dr["ID"] = "1";
            dr["Color"] = "Green";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["ID"] = "2";
            dr["Color"] = "Blue";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["ID"] = "3";
            dr["Color"] = "Black";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["ID"] = "4";
            dr["Color"] = "Red";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["ID"] = "5";
            dr["Color"] = "Yellow";
            dt.Rows.Add(dr);


            ASPxComboBox cb=(ASPxComboBox)grid.FindEditRowCellTemplateControl(
                                 grid.Columns["Color"] as GridViewDataColumn  
                                , "colorCombo");
            cb.DataSource = dt;
            cb.DataBind();

        }

After putting break point on cb.Datasource = dt; it is verified that values are populated but not viewed on the page. This populating of combobox cannot be done on page_load(). If anyone know the solution kindly tell me in easy and simple words.

NOTE: Datasource is coming from database, here I just hardcoded it in Pageload().

Solution 1

You can do this with an XML datasource. That way you can avoid the code behind, populate the list and display the current color selection. You will need to convert the GridViewDataTextColumn to a GridViewDataComboBoxColumn and then add the XML datasource to it. Too add an xml datasource just right click on the App_Data folder and select Add->New Item. Select an xml file and name it colors.xml. Code below:

XML:

<colors>
  <item ID="1" Color="Green"></item>
  <item ID="2" Color="Blue"></item>
  <item ID="3" Color="Black"></item>
  <item ID="4" Color="Red"></item>
  <item ID="5" Color="Yellow"></item>
</colors>

Lines to add to ASPX:

<asp:XmlDataSource ID="colorsXML" runat="server" DataFile="~/App_Data/colors.xml" XPath="colors/item" ></asp:XmlDataSource>

Change:

<dx:GridViewDataTextColumn Caption="Color" FieldName="Color" Name="Color" 
    VisibleIndex="3">
    <EditItemTemplate>
        <dx:ASPxComboBox ID="colorCombo" runat="server">
        </dx:ASPxComboBox>
    </EditItemTemplate>
</dx:GridViewDataTextColumn>

To this:

<dx:GridViewDataComboBoxColumn Caption="Color" FieldName="Color" Name="Color" VisibleIndex="3">
<PropertiesComboBox DataSourceID="colorsXML" ValueField="ID" TextField="Color"></PropertiesComboBox>
</dx:GridViewDataComboBoxColumn>

Wipe out the code in the StartRowEditing function, you won't need it:

protected void ASPxGridView1_StartRowEditing(object sender, DevExpress.Web.Data.ASPxStartRowEditingEventArgs e)
{

}

Solution 2

I go with the approach shown by dcreight.

If you are using objectdata source for binding your combobox you can modify the code suggested by him as follows:

 <dx:GridViewDataComboBoxColumn Caption="Color" FieldName="ID" Name="Color" VisibleIndex="3">
<PropertiesComboBox DataSourceID="objColors" ValueField="ID" TextField="Color" ValueType="System.String"></PropertiesComboBox>
</dx:GridViewDataComboBoxColumn>

Make sure the fieldname and valuefield of propertiescombobox match. Also Define the objectdatasource in your code outside the gridview

  <asp:ObjectDataSource ID="objColors" SelectMethod="GetColors" TypeName="ClassFileName"
 runat="server"></asp:ObjectDataSource>