title: How can we configure Kendo-UI ComboBox with Grid.
body: <p>I have a problem to configure the Kendo-Ui with Combo-box with custom values. I have seen this question  <a href="https://stackoverflow.com/questions/9559269/how-to-use-combobox-as-kendo-ui-grid-column">How to use ComboBox as Kendo UI grid column?</a> but we are unable to configure the whole ... </p>
  
  <p>Please look at the codes. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/kendo.all.js"&gt;&lt;/script&gt;
  &lt;link href="css/kendo.common.css" rel="stylesheet" /&gt;
  &lt;link href="css/kendo.default.css" rel="stylesheet" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
          &lt;div id="example" class="k-content"&gt;
          &lt;div id="grid"&gt;&lt;/div&gt;
  
          &lt;script&gt;
                 $(document).ready(function (){
  
  
  
               //   var crudServiceBaseUrl = "http://localhost/kendo-prac/",
                      dataSource = new kendo.data.DataSource({
                          transport: {
                              read:{
                              url: "http://localhost/kendo-prac/data/employees.php",
                               dataType: "jsonp"
                              },
                              update: {
                                url: "http://localhost/kendo-prac/data/update.php",
                                dataType: "jsonp"
                              },
                              destroy: {
                                  url:"http://localhost/kendo-prac/data/delete.php",
                                  dataType: "jsonp"
                              },
                              parameterMap: function(options, operation) {
                                  if (operation !== "read" &amp;&amp; options.models) {
                                      return {models: kendo.stringify(options.models)};
                                  }
                              }
                          },
                          batch: true,
                          pageSize: 10,
                          schema: {
                        model: {
                                  id: "ID",
                                  fields: {
                                      Name: { editable: false, nullable: false },
                                      Title: { editable: true, nullable: false },
                                      URL: { editable: true, nullable: false },
                                      FTP: { editable: true, nullable: false },
                                  //  date: { editable: false, nullable: false },
                                      Status: { type: "string", editable:false},
                                      Remarks: { editable: false, nullable: false }
                                  }
                      }
                          }
                      });
          //       template: ('&lt;select id="combobox" name="Status"/&gt;&lt;option value="#=Status#"&gt;#=Status#&lt;/option&gt;&lt;option value="Added"&gt;Added&lt;/option&gt;&lt;option value="Rejected"&gt;Rejected&lt;/option&gt;&lt;/select&gt;') 
  
                $("#grid").kendoGrid({
                      dataSource: dataSource,
                      navigatable: true,
                      pageable: true,
                      height: 650,
                      scrollable: true,
                      sortable: true,
                      toolbar: ["save", "cancel"],
                      columns: [                   
                          { field: "Name", width: "60px" },
                          { field: "URL", width: "350px" },
                          { field: "Title", width: "150px" },
                          { field: "FTP", width: "150px" },
                      //  { field: "Date", width: "150px" },
                      //  { field: "Status", width: "100px" },
                          {field: "Status", width:"150px", template: ('&lt;select id="combobox" name="Status"/&gt;&lt;option value="#=Status#"&gt;#=Status#&lt;/option&gt;&lt;option value="Added"&gt;Added&lt;/option&gt;&lt;option value="Rejected"&gt;Rejected&lt;/option&gt;&lt;/select&gt;')},
                      //  { field: "Action", width: "100px" },
                      //  { field: "Code", width: "100px" },
                          { field: "Remarks", width: "50px",template:('&lt;a href="http://www.seoranksmart.com?eid=#=ID#" target="_blank"&gt;#=Remarks#&lt;/a&gt;')},
                          { command: "destroy", title: "Delete", width: "100px" }],
                      editable: true
                  });
                      $("#com").kendoComboBox({
                      dataTextField: "text",
                      dataValueField: "value",
                      dataSource: [
                          { text: "Cotton", value: "1" },
                          { text: "Polyester", value: "2" },
                          { text: "Cotton/Polyester", value: "3" },
                          { text: "Rib Knit", value: "4" }
                      ],
                      filter: "contains",
                      suggest: true,
                      index: 3
                  });
              });
          &lt;/script&gt;
      &lt;/div&gt;
  
  
   &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>We have not implement able to configure the Combobox. we can simply built the select box with following options. We just update the Status from Combobox. </p>
  
  <p>Thanks </p>
  
  <p>Alen</p>