Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can we configure Kendo-UI ComboBox with Grid.
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload