DropDown
HTML
<link rel="stylesheet" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/css/ui.jqgrid.css">
<script src="http://www.trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="http://ivaynberg.github.com/select2/select2-3.3.1/select2.js"></script>
<link rel="stylesheet" href="http://ivaynberg.github.com/select2/select2-3.3.1/select2.css">
<table id="grid"></table>
JavaScript
$(function () {
var localData = [{
id: '0',
option: '1',
Name: "One"
}, {
id: '1',
option: '2',
Name: "Two"
}, ];
var grid = jQuery("#grid");
grid.jqGrid({
datatype: 'local',
data: localData,
editurl: 'clientArray',
colNames: ["Id", "option", "name"],
colModel: [{
name: 'id',
index: 'id',
width: 20
}, {
name: 'option',
index: 'option',
editable: true,
formatter: 'select',
edittype: 'select',
width: 300,
editoptions: {
value: {
'1': 'This is a long text 123123123123123',
'2': 'The quick brown fox jumps over the lazy dog',
'3': '1',
'4': '<span>24242</span>',
'5': '43242',
'6': '{"a":"a","b","b"}',
'7': '<em>test</em>',
}
}
}, {
name: 'Name',
index: 'Name'
}, ],
gridview: true,
height: 'auto',
onSelectRow: function (id) {
jQuery('#grid').editRow(id, true);
$("#" + id + "_option").select2({
"width": "300"
});
},
loadComplete: function () {
var grid = $("#grid");
var ids = grid.getDataIDs();
for (var i = 0; i < ids.length; i++) {
grid.setRowData(ids[i], false, {
height: 40
});
}
grid.setGridHeight('auto');
}
});
});