Develop Reference

EXTJs visible rows

I have a Property Grid with some values. When i selected row, it becomes visible. Can i make all rows is visible right away? Thanks in advance.
Here's grid
var propGrid = new Ext.grid.PropertyGrid({
url: 'fill-template-form-panel-id',
id: 'propGrid',
autoFill: true,
autoHeight: true,
width: '100%',
disableSelection : true,
source: {
"name": "Vasya",
"surname": "Pupkin"
},
style: 'margin:0 auto;margin-top:10px;'
});

Only have remove buttons for some rows?

I have a handsontable with data that would have a property that indicates a specific status (hasShipped if specifics are required). Is there a way to remove the "remove row" button from a row where the hasShipped value is true?
Table definition, in case it's important:
var hot = new Handsontable(container, {
data: hotData,
dataSchema: { Product: null, UOM: "EA", QtyShipped: 0 },
columns: [
{
data: 'Product',
title: "Product",
type: "text",
readOnly: isShipped
},
{
data: 'UOM',
title: "UOM",
readOnly: true,
type: "text"
},
{
data: 'QtyShipped',
title: "Qty<br />Shipped",
type: "numeric",
readOnly: isShipped
}],
allowInsertRow: true,
//allowRemoveRow: true, //TODO: Depending on mode and row
autoWrapCol: true,
colHeaders: true,
columnSorting: { column: 0, sortOrder: false },
contextMenu: ['undo', 'redo', 'row_above', 'row_below', 'remove_row'],
currentColClassName: 'activeCol',
currentRowClassName: 'activeRow',
dropdownMenu: true,
fixedColumnsLeft: 1,
outsideClickDeselects: false,
readOnly: <%= IsWatchList.ToString().ToLower() %>,
removeRowPlugin: true,
rowHeaders: true,
stretchH: "all", //used in conjunction #hot-container styling to make the table take up 100% of parent width
});

Given that I was already implementing the code to remove a row and had altered the code to insert my own custom styled button, I knew where the buttons were being injected.
Thanks to MonkeyZues's comment, I looked at the code where I was injecting the remove row button and, depending on the value of the HasShipped property, was able to inject (or not) the required row buttons
if (jsonObject != "") {
if (jsonObject.LoadDetails[row]["HasShipped"] == true) {
div.appendChild(btnNode);
elem.appendChild(div);
}
}

how to merge multiple columns into 1 column jqgrid

I have 5 columns that display different Levels from Level0 to Level4. I hav a requirement to show all these level columns into 1 main columns named Levels, i.e. 1 column name level having 5 sub columns named lv0, lv1... lv4?
I tried solution provided in How to display multiple values in same column in jqgrid
but it is merging the values and hence mismatch of values with the header.
Is there a way to merge columns into 1 columns and not just the values?
below is the colModel and ColNames for the jqgrid:
'detailViewcolNames': [
"Sub Project(s)",
"LV0",
"LV1",
"LV2",
"LV3",
"LV4",
"Status",
"%Comp",
"%Weight",
"Wins",
"Attention",
"Escalation",
"Comments",
"Next Steps"
],
'detailGridcolModel': [{
name: 'name',
width: '15%',
index: 'name',
title: false,
resizable: false,
sortable: false,
formatter: function(cellvalue, options, rowObject) {
var cellHtml = "<span class='gridTitle'>" + cellvalue + "</span>";
return cellHtml;
},
unformat: function(cellvalue, options, rowObject) {
return cellvalue;
},
}, {
name: "Status",
index: 'Status',
width: '5%',
title: false,
resizable: false,
sortable: false,
jsonmap: "from[Subtask].to.Status",
formatter: function(cellvalue, options, rowObject) {
return pathProjectModel.getStatusMapImage(cellvalue, options, rowObject);
}
}, {
name: 'LV0',
width: '5%',
title: false,
resizable: false,
sortable: false,
}, {
name: 'LV1',
width: '5%',
title: false,
resizable: false,
sortable: false,
}, {
name: 'LV2',
width: '5%',
title: false,
resizable: false,
sortable: false,
}, {
name: 'LV3',
width: '5%',
title: false,
resizable: false,
sortable: false,
}, {
name: 'LV4',
width: '5%',
title: false,
resizable: false,
sortable: false,
}, {
name: 'attribute[Percent Complete]',
index: 'attribute[Percent Complete]',
width: '10%',
title: false,
resizable: false,
sortable: false,
jsonmap: "attribute[Percent Complete]",
}, {
name: 'Weight',
index: 'Weight',
width: '10%',
title: false,
resizable: false,
hidden: true,
sortable: false,
jsonmap: "Weight",
}, {
name: "Win",
index: "Win",
width: '15%',
title: false,
resizable: false,
sortable: false,
jsonmap: "Win",
formatter: function(cellvalue, options, rowObject) {
var cellHtml = pathProjectModel.multiValuesFormatter(cellvalue, options, rowObject);
return cellHtml;
}
}, {
name: "Attention",
index: "Attention",
width: '15%',
title: false,
resizable: false,
sortable: false,
formatter: function(cellvalue, options, rowObject) {
var cellHtml = pathProjectModel.multiValuesFormatter(cellvalue, options, rowObject);
return cellHtml;
},
jsonmap: "Attention"
}, {
name: 'Escalation',
index: 'Escalation',
width: '15%',
title: false,
resizable: false,
sortable: false,
formatter: function(cellvalue, options, rowObject) {
var cellHtml = pathProjectModel.multiValuesFormatter(cellvalue, options, rowObject);
return cellHtml;
},
jsonmap: "Escalation"
}, {
name: 'Comments',
index: 'Comments',
width: '15%',
title: false,
resizable: false,
sortable: false,
formatter: function(cellvalue, options, rowObject) {
var cellHtml = pathProjectModel.multiValuesFormatter(cellvalue, options, rowObject);
return cellHtml;
},
jsonmap: "Comments"
}, {
name: 'Next Steps',
index: 'Next Steps',
width: '15%',
title: false,
resizable: false,
sortable: false,
formatter: function(cellvalue, options, rowObject) {
var cellHtml = pathProjectModel.multiValuesFormatter(cellvalue, options, rowObject);
return cellHtml;
},
jsonmap: "Next Steps"
}, ]
below is the Sample data. Here id property contains rowid
responseObj = {
id: "2432.XXXXXXXXXXXXXX",
"name": "project Name",
"Status": "On Track",
"LV0": "100",
"LV1": "90.0",
"LV2": "0.0",
"LV3": "12.0",
"LV4": "",
"attribute[Percent Complete]": "0.0",
"Weight": "30.0",
"Win": [
["fasdfgasdf"]
],
"Attention": [
["sdfasdga"]
],
"Escalation": [
["fedgsdshsdfh"]
],
"Comments": [
["dgdfhdfhdfuiopjnjkn"]
],
"Next Steps": [
["vbmcbvndfgec"]
]
}

If you really need to use old jqGrid 4.6.0 and to use datatype: "local" then you should change the format of input data. It's the way, which I would recommend you. Alternatively you could try to use datatype: "jsonstring" and provide the input data via datastr parameter instead of data. You will have to change jsonmap defined as function to read the input data. In any way you have to fix the values of name properties, which you use.
The name property of jqGrid will be used to generate id attributes of some internal elements. HTML5 don't allow to use spaces in id (see here the statement: "The value must not contain any space characters"). Additionally the name will be used in different CSS selectors and you can have problems in case of usage names, which contains [ or ] (see [Percent Complete]).
You should not use formatter to build the value of "virtual" property from other existing properties. Instead of that you should use jsonmap or "pre-process" the input data to set new property. If you do use custom formatter, then it's strictly recommended to specify unformat callback too.
The practical example is following. Let us you have input data with numeric the properties price and tax any you want to display the corresponding columns and total_price additionally, which build as the sum of price and tax. The recommended way: you should fill total_price once or to use jsonmap defined as function to calculate the sum of price and tax. After that you can use predefined formatter: "currency" to display the value. I think that you should generate one additional column from lv0, lv1... lv4 in exact the same way.
Additionally, I want to remark that the usage of old jqGrid 4.6 now is dangerous, because it's not supported since 2014. To be exact, there are not exist "jqGrid" product at all. There are exist two main forks of the old jqGrid: "free jqGrid", which I develop, and which current version is 4.14.0 and commercial "Guriddo jqGrid JS", which current version is 5.2.1. I strictly recommend you to migrate to one from the currently developed and supported products. I remind you about the problem described in the answer. The version of jqGrid, existing at the time, displayed wrong grid in the new version of Chrome. Google publish new version every 1.5-2 months. It could be that jqGrid 4.6 (and your existing web application) will display wrong grids in the next version of Chrome/Firefox or any other web browser. The only solution of the problem will be migration to another version of jqGrid, with the fixed code. If you continue to use jqGrid 4.6 then you will have to implement the fix yourself. If you would use the current version of "free jqGrid" or "Guriddo jqGrid JS" then the fix will implement developers of the corresponding product and you will need just to download the new version from GitHub.

jqGrid ignores first keystroke after showing alert/confirm dialog

i have a requirement to show a confirmation message before editing a cell. User can either choose to use a auto-calculated value or can enter new value in the Col 2. If user chose to use the auto-calculated value, next cell (Col 3) should be put in edit mode.
I am using code shown below, so when user tabs thru Col 1 to Col 2, it displays a confirmation dialog box. When user clicks Cancel on the dialog box, the focus remains in Col 2 and if user clicks on Ok focus is set to Col 3.
The problem here is that, after closing the dialog box, when i try to type in the textbox, the first keystroke is ignored and nothing happens. However subsequent keystrokes work fine.
Strange thing is that, if i click directly in Col 2, everything works fine (first keystroke is not ignored). Issue happens only when i navigate from Col 1 to Col 2 by pressing tab.
Please help me fix this issue.
$(gridId).jqGrid({
colNames: ["Id", "Name", "Col 1", "Col 2", "Col 3"],
colModel: [
{ name: "Id", index: "Id", hidden: true, key: true, formatter: 'text' },
{ name: "Name", index: "Name", width: '165px', align: 'left', resizable: false, editable: false, classes: 'non-editable', formatter: 'text' },
{ name: "Col1", index: "Col1", width: '60px' },
{ name: "Col2", index: "Col2", width: '60px' },
{ name: "Col3", index: "Col3", width: '60px' }
],
hidegrid: false,
rowNum: 50,
rowList: [10, 20, 50, 100],
scroll: true,
loadonce: true,
sortorder: "asc",
height: 370,
datatype: 'json',
viewrecords: true,
mtype: 'GET',
ignoreCase: true,
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
userdata: "userdata"
},
url: gridUrl,
editurl: '#',
cellEdit: true,
cellsubmit: 'clientArray',
footerrow: true,
multiselect: false,
//autowidth: true,
cmTemplate: {
//Default col model properties, if not using default, override in the colmodel
resizable: false,
edittype: "text", //for checkbox, override in the colmodel
align: "right",
editable: true,
formatter: 'number', //for text, override in the colmodel
formatoptions: { decimalSeparator: ".", thousandsSeparator: "", decimalPlaces: 1, defaultValue: '', align: "right" },
editrules: { number: true} //Setting numeric validation for all columns as all the editable columns are numbers
},
beforeEditCell: function (rowid, cellname, value, iRow, iCol) {
var grid = $(this);
if (prevCellName != cellname && cellname == "Col2") {
var autoCalculated = 123;
var response = confirm("The Col 2 auto-calculated value is " + autoCalculated + ". Would you like to use this value?");
if (response == true) {
setTimeout(function () {
grid.jqGrid('setCell', rowid, "Col2", autoCalculated);
}, 10);
setTimeout(function () {
grid.jqGrid('editCell', iRow, iCol + 1, true);
}, 20);
}
}
prevCellName = cellname;
}
});

Colours disappear after resort jqGrid

When css attributes are set during initialization it works fine, colours and backgrounds in cells also change when initiated from a function. But when I sort the columns all colours set from function disappear and go back to the normal grid.
<script>
var Mydata =[
{
"id":"560058",
"nm" : "L 41971",
"temp" : "21.2",
"ignition" : "off",
"pos_x" : "55.2024832",
"pos_y" : "24.9640256",
"drv" : "",
"pos_s" : "0",
"param24" : "0",
"param240" : "0",
"pwr_ext" : "12.825"
},
{
"id":"560059",
"nm" : "L 41972",
"temp" : "21.2",
"ignition" : "off",
"pos_x" : "55.2024832",
"pos_y" : "24.9640256",
"drv" : "",
"pos_s" : "0",
"param24" : "0",
"param240" : "0",
"pwr_ext" : "12.825"
}
];
var grid = $("#live_view");
grid.jqGrid({
height: '100%',
width: '700',
datatype: "local",
loadonce: true,
data : Mydata,
gridview: true,
colNames: ['Name', 'Temperature', 'Ignition', 'lat', 'lon', 'Driver', 'Speed', 'param24', 'movement', 'pwr_ext'],
colModel:[
{name:'nm',index:'nm'},
{name:'temp',index:'temp'},
{name:'ignition',index:'ignition'},
{name:'pos_x',index:'pos_x'},
{name:'pos_y',index:'pos_y'},
{name:'drv',index:'drv'},
{name:'pos_s',index:'pos_s'},
{name:'param24',index:'param24'},
{name:'param240',index:'param240'},
{name:'pwr_ext',index:'pwr_ext'},
],
rowNum:100,
rowList:[100,200,300],
pager: '#pager2',
sortname: 'param240',
viewrecords: true,
sortorder: "desc",
caption:"Vertex Live View",
loadComplete: function() {
grid.jqGrid('setCell',"560058","nm","",color:'red'});
},
});
$("#live_view").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});
$("#cc").click(function (){
$("#live_view").jqGrid('setCell',"560058","nm","",{color:'blue'});
})
</script>
Change Colour

When you sort, it recreates the html. For all jqgrid knows, the column you modified might not even be visible on the current page after sorting. Bottomline, you will need to reapply the colours.
You could peruse the jqGrid api, to see if they allow setting the colour of the cell from the model data. I don't think so though.