DHTMLX Grid: Populate cells with dropdown menu

I have 2 columns in dhtmlx grid table. I want to populate the second column with dropdown menu for each cell.

I am generating xml document in C#

The generated xml document in C#:

<rows>

  <head>
    <column type="ed" width="205" sort="str">Product</column>
    <column type="co" width="205" sort="na" id="last">Class</column>
  </head>

 <row id="1">
   <cell>Product_name_1</cell>
   <cell>
    <select>
      <option id="1" value="1">first_option</option>
      <option id="2" value="2">second_option</option>
    </select>
   </cell>
 </row>

 <row id="2">
   <cell>Product_name_2</cell>
   <cell>
    <select>
      <option id="3" value="4">first_option</option>
      <option id="4" value="4">second_option</option>
    </select>
   </cell>
 </row>

</rows>

Html and Javascript code:

<body>
<div id="mygrid_container" style="width:1026px;height:500px"></div>
<script>
    var mygrid;
    $(document).ready(function () { 
        $.ajax({
            url: "/Admin/XMLForProducts",
            dataType: "json",
            type: "GET",
            data: {},
            success: function (result) {
                mygrid = new dhtmlXGridObject('mygrid_container');
                mygrid.init();
                mygrid.parse(result, "xml");
            }
        });
    });
</script>
</body>

In this scenario I'm just getting first column populate with values (Product_name_1 and Product_name_2) and I'm not getting the second column with dropdown menu for each cell and I don't how to fix this..

Solution

You need to use some kind of escaping the spacial characters in your xml. For example,

instead of:

    <cell>
        <select>
          <option id="3" value="4">first_option</option>
          <option id="4" value="4">second_option</option>
        </select>
       </cell>

you need:

<cell><![CDATA[<select><option id="3" value="4">first_option</option><option id="4" value="4">second_option</option></select>]]></cell>

Here is the tutorial about handling special chars in the xml: http://docs.dhtmlx.com/doku.php?id=others:special_characters_in_xml

Also we are not recommending to use html inputs such way in your grid. You may try to use the "combo" exCell.

Here you can find a ready-working example:

http://www.dhtmlx.com/docs/products/dhtmlxGrid/samples/13_interaction_other_components/01_pro_combo.html

and a tutorial:http://docs.dhtmlx.com/doku.php?id=dhtmlxgrid:how_to_use_new_excell_combo