IvanSt IvanSt - 6 months ago 121
jQuery Question

free-jqGrid - The numeric value is displayed instead of the text for select cell

I am using free jqgrid version 4.13.2 and i have a grid with 2 select columns and a custom column with multiple checkboxes per cell.

One of the select columns has the values hardcoded and it works perfectly. The other one creates the select string dynamicly based on another grids rows and as far as i can see, it has nothing different from the working select.

When i am in edit, they are displayed correctly but after the row gets saved the dynamicly filled select displays the numeric value and so does the checkbox column.

My question is, is there something wrong with the generated select string? What can i do to get them working?

enter image description here
enter image description here

function getSpecificCell(grid, col){
var id = grid.find('tr[aria-selected="true"]').attr('id');
return grid.jqGrid('getRowData',id)[col];
}
function getAdresseSelectValues(){
var adrese = $("#adreseGrid").getGridParam('data'),
adreseDeReturnat="";
for(var i=0;i<adrese.length;i++){
adreseDeReturnat += adrese[i].adresseId + ":Str. " + adrese[i].streetId +" Nr. " + adrese[i].streetNumber;
if(adrese[i].building){
adreseDeReturnat += "Bl. " + adrese[i].building;
}
if(adrese[i].floor){
adreseDeReturnat += " Etaj "+ adrese[i].floor;
}
if(adrese[i].apartament){
adreseDeReturnat += " Ap. " + adrese[i].apartament;
}
if(adrese[i].interPhone){
adreseDeReturnat += " Interfon: " + adrese[i].interPhone;
}
adreseDeReturnat += ";";

}
adreseDeReturnat = adreseDeReturnat.substring(0,adreseDeReturnat.length-1);
return adreseDeReturnat;
}

var custOrdGrid = $("#customersOrdersGrid"),
custOrdPager = "#customersOrdersPager",
restURL = "/LicentaREST/rest/",
validationCount={},
getOrderDDLs = {};
getOrderDDLs = ajaxCall(restURL+"ddl/getOrderDDL");
var pizzaValues = getOrderDDLs.pizzaValues,
pasteValues = getOrderDDLs.hamburgerValues,
hamburgerValues = getOrderDDLs.pasteValues,
drinksValues = getOrderDDLs.drinksValues,
desertValues = getOrderDDLs.desertValues;
custOrdGrid.jqGrid({
datatype: "local",
mtype: "POST",
url: restURL + "orders/getCustomerOrders",
editurl: restURL +"orders/createUpdateOrder",
colModel: [
{ name: "orderId", index:"orderId",label:"",key:true,hidden:true},
{ name: "custId", index:"custId",label:"",hidden:true},
{ name: 'createdBy', index: 'createdBy', label:'Creat de', width: 90,editable: false,hidden:true },
{ name: 'orderedBy', index: 'orderedBy',search:false, label:'Client', width: 50, editable: false},
{ name: 'phoneNumber', index: 'phoneNumber',label:'Telefon',editable: false,width: 50},
{ name: 'pizza', index: 'pizza',editable: true,search:false,edittype:"custom",
editrules: {custom: true, custom_func: function(value,colname){
if(value=="" || value==null){
validationCount[colname] = false;
}
else{
validationCount[colname] = true;
}
return [true, ""];
}},
editoptions:{custom_element:multiCheckElem, custom_value:multiCheckVal,list:pizzaValues,dataEvents:[
{type: 'change', data:{ i: 7 }, fn: function(e) { onChangeFunc(e,custOrdGrid,getOrderDDLs);}}]}, label:'Pizza', width: 86 },
{ name: 'paste', index: 'paste',editable: true,search:false,edittype:"custom",
editrules: {custom: true, custom_func: function(value,colname){
if(value=="" || value==null){
validationCount[colname] = false;
}
else{
validationCount[colname] = true;
}
return [true, ""];
}},
editoptions:{custom_element:multiCheckElem, custom_value:multiCheckVal,list:pasteValues,dataEvents:[
{type: 'change', data:{ i: 7 }, fn: function(e) { onChangeFunc(e,custOrdGrid,getOrderDDLs);}}]}, label:'Paste', width: 80 },
{ name: 'hamburger', index: 'hamburger',editable: true,search:false,edittype:"custom",
editrules: {custom: true, custom_func: function(value,colname){
if(value=="" || value==null){
validationCount[colname] = false;
}
else{
validationCount[colname] = true;
}
return [true, ""];
}},
editoptions:{custom_element:multiCheckElem, custom_value:multiCheckVal,list:hamburgerValues,dataEvents:[
{type: 'change', data:{ i: 7 }, fn: function(e) { onChangeFunc(e,custOrdGrid,getOrderDDLs);}}]}, label:'Hamburger', width: 80 },
{ name: 'drinks', index: 'drinks',search:false,editable: true,edittype:"custom",
editrules: {custom: true, custom_func: function(value,colname){
if(value=="" || value==null){
validationCount[colname] = false;
}
else{
validationCount[colname] = true;
}
return [true, ""];
}},
editoptions:{custom_element:multiCheckElem, custom_value:multiCheckVal,list:drinksValues,dataEvents:[
{type: 'change', data:{ i: 7 }, fn: function(e) { onChangeFunc(e,custOrdGrid,getOrderDDLs);}}]}, label:'Bauturi', width: 80 },
{ name: 'desert', index: 'desert',search:false,editable: true,edittype:"custom",
editrules: {custom: true, custom_func: function(value,colname){
if(value=="" || value==null){
validationCount[colname] = false;
}
else{
validationCount[colname] = true;
}
if(validationCount.Pizza === false && validationCount.Paste === false && validationCount.Hamburger === false && validationCount.Bauturi === false && validationCount.Desert === false ){
return [false,'Cel putin un produs trebuie selectat'];
}
return [true, ""];
}},
editoptions:{custom_element:multiCheckElem, custom_value:multiCheckVal,list:desertValues,dataEvents:[
{type: 'change', data:{ i: 7 }, fn: function(e) { onChangeFunc(e,custOrdGrid,getOrderDDLs);}}]}, label:'Desert', width: 80 },
{ name: 'notes', index: 'notes',label:'Nota',edittype:'textarea', editoptions: { rows: "12", cols: "20"}, width: 80,editable: true},
{ name: 'total', index: 'total',label:'Total', width: 40,editable: false,align:'center' },
{ name: 'orderedAt', index:'orderedAt', label:'Data', width: 80,formatter: 'date', formatoptions: {newformat:"d/m/Y"},search:false},
{ name: 'adresa', index:'adresa',label:'Adresa',formatter:'select',stype:'select',searchoptions: {sopt: ['eq','ne'],value: getAdresseSelectValues()},editable:true,edittype:'select',editoptions:{value: getAdresseSelectValues}},
{ name: 'orderStatus', index: 'orderStatus', label:'Status',stype:'select',edittype:'select', editoptions:{value:"1:Comanda Primita;2:Comanda in livrare;3:Comanda anulata de client;4:Comanda refuzata de client;5:Comanda Finalizata"},formatter:'select', width: 90,editable: true}
],
pager: custOrdPager,
rowNum: 10,
beforeProcessing: function(data){
if(data && data.length>0){
var test = getAdresseSelectValues();
console.log(test);
for(var i=0;i<data.length;i++){

data[i].orderedAt = new Date(data[i].orderedAt);
data[i].total += " lei";
}
}
console.log(getAdresseSelectValues());
},
ajaxGridOptions: {contentType: 'application/json; charset=utf-8'},
serializeGridData: function (postData) {
postData = parseInt($("#customersGrid").find('tr[aria-selected="true"]').attr('id'));
return JSON.stringify(postData);
},
rowList: [10, 50, 100, 250,500],
sortname: 'id',
loadonce: true,
rownumbers: true,
forceClientSorting: true,
inlineEditing: {
ajaxSaveOptions: { contentType: "application/json" },
serializeSaveData: function (postData) {
if(postData.oper == "add"){
postData.createdBy = $("#userIdSession").val();
postData.custId = $("#customersGrid").find("tr[aria-selected='true']").attr("id");
postData.createdAt = new Date();
}
if(postData.oper == "edit"){
var data =custOrdGrid.getRowData(postData.orderId);
postData.createdBy = data.createdBy;
postData.custId = data.custId;
}
postData.adresa=parseInt(postData.adresa.replace('"',""),10);
postData.total = parseInt(custOrdGrid.jqGrid("getCell",postData.orderId,"total"),10);
return JSON.stringify(postData);
}
},
height: 220,
iconSet: "fontAwesome",
sortorder: 'desc',
viewrecords: true,
caption: 'Customer Orders',
autowidth: true

});

Answer

You use datatype: "local", but mtype: "POST", url: restURL + "orders/getCustomerOrders" and beforeProcessing options/callbacks, which shows that you do load the data from the server. The column adresa have the following properties

{
    name: 'adresa', index:'adresa',label:'Adresa',
    formatter:'select',
    stype:'select',searchoptions: {sopt: ['eq','ne'],value: getAdresseSelectValues()},
    editable:true,edittype:'select',editoptions:{value: getAdresseSelectValues()}
}

with formatter:'select'. It means that the data for adresa column return from the server are numbers like 26 and 27 on your first picture and you want to display there as texts Str. sadasdsd Nr. 34Bl. asdas Etaj asda Ap. asda and Str. asdasdada Nr. 123Bl. 123 Etaj 123 Ap. 123 because of usage editoptions.value defined as

"26:Str. sadasdsd Nr. 34Bl. asdas Etaj asda Ap. asda;27:Str. asdasdada Nr. 123Bl. 123 Etaj 123 Ap. 123"

The problem only is: you want to load the data from the server too. The data will be filled in the grid using formatter:'select'. Thus the value editoptions.value of the column adresa have to be set/modified before the formatter start working.

I suggest you to use beforeProcessing callback, where you process the server response and set/modify editoptions.value of the column adresa. You can use setColProp, for example, for setting editoptions.value. See the answer and this one for more implementation details.

I'd recommend you to use column template additionally (see the old answer) to reduce code duplicates in your code. It will simplify later modification/maintain of your code.

Some additional advices: you use hidden column name: "orderId" with key:true property. The value will be saved in <td> of the column and as the value of id attribute of the row (<tr>). I suggest you to remove the column and to use jsonReader: { id: "orderId" } instead (or localReader: {id: "orderId"} if you load the data not from the server). It will inform jqGrid to assign rowids based on the value of orderId property of input data. Additionally jqGrid will use orderId as the name of rowid during editing (set to editurl) instead of default name id.

You can consider to remove other hidden columns too (custId and createdBy). You need just add the option additionalProperties: ["orderId", "custId", "createdBy"] to inform jqGrid to read the properties from input data. The properties will be seen in custom formatter, rowattr, cellattr and be saved in the local data (accessible by getLocalRow method). In other words, the data will be save in JavaScript objects, but not in the DOM. It makes HTML/DOM cleaner and improve the performance of the page.

Comments