JavaScript DropDownList in jqxgrid
Invoke the checkAll method of the jqxDropDownList.
Author: http://jqwidgets.com
HTML
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div class="col-lg-12" id="assignQuestionGrid"></div>
JavaScript
var data = [{
question:'First question',
ddSelect1:'valueB'
},{
question:'Second question',
ddSelect1:undefined
},{
question:'Third question',
ddSelect1:undefined
}];
var source = {
datatype: "json",
localdata: data,
datafields: [{
name: 'question',
type: 'string'
},{
name: 'ddSelect1',
type: 'string'
}]
};
// source.dataBind();
// $scope.editAssignQueStionSection={};
var adapter = new $.jqx.dataAdapter(source);
$("#assignQuestionGrid").jqxGrid({
height: 400,
altRows: true,
width: '100%',
theme: 'bootstrap',
source: adapter,
autorowheight: true,
autoheight: true,
selectionmode: 'singlecell',
editable: true,
ready: function() {
console.log("grid is ready");
},
columns: [{
text:"Question",
datafield:'question',
width: "30%",
editable:false
},{
text:"Select Users",
datafield:'ddSelect1',
width:'20%',
columntype: 'dropdownlist',
createeditor: function(row, cellvalue, editor, cellText, width, height) {
var ddSource = [{
label:"labelA",
value:"valueA"
},{
label:"labelB",
value:"valueB"
},{
label:"labelC",
value:"valueC"
}];
console.log("ddSource ==>",ddSource);
editor.jqxDropDownList({
dropDownHeight: '60px',
checkboxes: false,
filterable: true,
displayMember: 'label',
valueMember: 'value' ,
source: ddSource
});
}
}]
});