It now works resize column

[SHIN WOOCHUL]

I set this grid, but it dose not resize column width when drag mouse, Is that any property to use this ability?

[paramvir]

Columns are resizable by default.

Column becomes unresizable with mouse if

1. column.resizable is set it to false.

https://paramquery.com/pro/api#option-column-resizable

or

2. column.width is in %

[SHIN WOOCHUL]

But I remove width % and I did not set resizable  ability, this is my code
But It still not resize column, Only used mouse db click can resize size

Code: [Select]

function setGrid01(list) {

var colM = [ {
title : "<msg:message code="label.partNo"/>",
//width : '30%',
dataIndx : "itemCd",
editable : false
}, {
title : "<msg:message code="label.partNm"/>",
//width : '40%',
dataIndx : "engItemNm",
editable : false
}, {
title : "planQnty",
//width : '10%',
format : '##,##0',
dataType : "float",
dataIndx : "planQnty",
}, {
title : '<msg:message code="btn.delete"/>',
dataIndx : "check",
type : 'checkbox',
cbId : 'chk'

}, {
dataIndx : 'chk',
dataType : 'bool',
cb : {
header : false
},
hidden : true,
editable : function(ui) {
//Number(list[i].orderQnty) <=(Number(list[i].inQnty)+Number(list[i].deliveryAllQnty))
return true;
}

} ];

var obj = {
width : '100%',
height : 300,
colModel : colM,
title : '<i class="fa fa-cogs"></i><msg:message code="box.itemList"/>',
loadonce : false,
hwrap : true,
wrap : true,
dataModel : {
data : list
},
sort : function() {
autoMerge(this);
},
flex : {
one : true
},
scrollModel: { autoFit: true },
};

gridObj01 = obj;
$("#grid01").pqGrid(obj);
}

function setGrid02(list) {
console.log(list);
var colM = [ {
title : "<msg:message code="label.itemNo"/>",
width : '30%',
dataIndx : "prtCd",
editable : false
}, {
title : "<msg:message code="label.itemNm"/>",
width : '40%',
dataIndx : "engItemNm",
editable : false
}, {
title : "DemandQnty",
width : '5%',
format : '##,##0',
dataType : "float",
dataIndx : "demandQnty",
editable : false
}, {
title : "RemainQnty",
colModel : [ {
title : "D100",
width : '5%',
format : '##,##0',
dataType : "float",
dataIndx : "remainQnty",
editable : false,
render : function(ui){
var remainQnty = ui.rowData.remainQnty;
var d200Qnty = ui.rowData.d200Qnty;
return remainQnty-d200Qnty;
}
}, {
title : "D200",
width : '5%',
format : '##,##0',
dataType : "float",
dataIndx : "d200Qnty",
editable : false
}, ]
}, {
title : "<msg:message code='label.boxPerQ'/>",
width : '5%',
format : '##,##0',
dataType : "float",
dataIndx : "boxQnty",
editable : false
}, {
title : "<msg:message code='label.supplyBoxQnty'/>",
width : '3%',
format : '##,##0',
dataType : "float",
dataIndx : "supBoxQnty",
editable : false,
align : 'center',
render : function(ui) {
var rowData = ui.rowData;
ui.rowData.supBoxQnty = getSupplyQnty(rowData);
}
},

];

var obj = {
width : '100%',
height : 300,
colModel : colM,
title : '<i class="fa fa-cogs"></i><msg:message code="box.itemList"/>',
loadonce : false,
hwrap : true,
wrap : true,
dataModel : {
data : list
},
flex : {
one : true
},
scrollModel: { autoFit: true },
rowInit : function(ui) {//row처음 셋팅할때
var demandQnty = ui.rowData.demandQnty;
var remainQnty = ui.rowData.remainQnty;
if (demandQnty > remainQnty) {
return {
style : "background: #FFB85A;" //can also return attr (for attributes) and cls (for css classes) properties.
};
}
},
};

gridObj02 = obj;
$("#grid02").pqGrid(obj);
}


[paramvir]

In your second grid in setGrid02(), column widths are still in '%'

Please share a jsfiddle if still facing issues.