$(function () {
var books = [
{code:"1",codeNm:"ActionScript"},
{code:"2",codeNm:"Asp"},
{code:"3",codeNm:"BASIC"},
{code:"4",codeNm:"C"},
{code:"5",codeNm:"Clojure"},
{code:"6",codeNm:"COBOL"},
{code:"7",codeNm:"ColdFusion"},
{code:"8",codeNm:"Erlang"}
];
var colM = [
{
title: "Books",
dataIndx: "books",
width: 500,
cls: 'pq-drop-icon pq-side-icon',
editor: {
type: "select",
attr:'multiple',
options: books,
valueIndx:"code",
labelIndx:"codeNm",
init: function (ui) {
//convert ui.cellData data format from string to array
//and assign it to editor value.
console.log(ui.cellData);
ui.$editor.val((ui.cellData || "").split(","))
//convert native select list to pqSelect.
.pqSelect({
deselect: false,
checkbox: true
});
setTimeout(function () {
//open editor dropdown on first activation.
ui.$editor.pqSelect('open');
})
}
},
},
];
var dataModel = {
location: "remote",
dataType: "JSON",
method: "GET",
url: "/content/invoice.json",
getData: function (response) {
response.data.forEach(function (rd) {
//make ShipAddress multiline text.
rd.ShipAddress = rd.ShipAddress + "\n" + rd.ShipCity + "\n" + (rd.ShipRegion || "") + "\n" + rd.ShipPostalCode;
})
console.log(response[0]);
response.data[0].books = "1,2,3";
response.data[0].code = ["1","2","3"];
response.data[0].codeNm = ["ActionScript","Asp","BASIC"];
return response;
}
}
$("div#grid_custom_editing").pqGrid({
title: "Multi select editor",
dataModel: dataModel,
colModel: colM
});
});
I modified the example source and wrote the code, but there is an error. I don't know what to do with valueIndx, labelIndx, and dataIndx, and I don't know what type to set the initial value. Could you please modify the source code