This is a migrated thread and some comments may be shown as answers.

How can we Configure the ComboBox within the Grid.

1 Answer 138 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Pritpal asked on 15 Mar 2012, 11:26 AM

Hello,

I would like to know, how can we place comboBox within the Grid cell.

Please look at the codes

<!DOCTYPE html>

<html>

<head>

<title></title>

<script src="js/jquery.min.js"></script>

<script src="js/kendo.all.js"></script>

<link href="css/kendo.common.css" rel="stylesheet" />

<link href="css/kendo.default.css" rel="stylesheet" />

</head>

<body>

<div id="example" class="k-content">

<div id="grid"></div>

<script>

$(document).ready(function (){

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" && 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 },

Status: { type: "string", editable:false},

Remarks: { editable: false, nullable: false }

}

});

$("#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: function(container, options) {

$('<input name="' + options.field + '"/>').appendTo(container).kendoComboBox([

{text: "Item1", value: "1"},

{text: "Item2", value: "2"}

]);

}

},

{ field: "Remarks", width: "50px",template:('<a href="http://www.xyz.com?eid=#=ID#" target="_blank">#=Remarks#</a>')},

{ command: "destroy", title: "Delete", width: "100px" }],

editable: true

});

</script>

</div>

</body>

</html>

We just want to implement the comboBox, grid can also update the data onchange of combobox. I tried to implement it on this style (please look below.), Using this code we can not able to update or save the data into database.

template: ('<select id="combobox" name="Status"/><option value="#=Status#">#=Status#</option><option value="Added">Added</option><option value="Rejected">Rejected</option></select>')

And it also not same as Kendo ComboBox. Please provide me some information about this.

Thanks

Pps

How can we Configure the ComboBox within the Grid.

1 Answer, 1 is accepted