Related
enter image description here
I got a jqgrid, and I am trying to add a row by click the "+" botton, which is marked red. But the template is blank.
Below is scripts in JavaScripts.
$("#table_list_1").jqGrid({
url: "usermanage/getMainTableJson",
datatype:"json",
mytype:"GET",
height: 250,
autowidth:true,
colNames:['id','username','realname','email','createtime','updatetime'],
colModel:[
{name:'id',index:'id', width:'10%',align:'center'},
{name:'username',index:'username', width:'15%',align:'center'},
{name:'realname',index:'realname', width:'20%', align:"center"},
{name:'email',index:'email', width:'25%', align:"center"},
{name:'createdate',index:'createdate', width:'15%', align:"center", sortable:false},
{name:'updatedate',index:'updatedate', width:'15%',align:"center", sortable:false}
],
rownumbers:false,
sortname:'id',
sortorder:'asc',
viewrecords:true,
rowNum:10,
rowList:[10,20,40],
pager:$('#pager_list_1'),
add:true,
edit:true,
addtext:'Add',
edittext:'Edit'
});
$("#table_list_1").jqGrid('navGrid', '#pager_list_1',
{edit: true, add: true, del: true, search: true},
{height: 200, reloadAfterSubmit: true}
);
You should add editable: true property to the column, which you want to allow to edit. You can use cmTemplate property to specify default values for any property. Thus you can use for example the option
cmTemplate: { editable: true }
and to add editable: false to the column id. As the result all properties with exception id will be seen in the Add/Edit dialog.
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.
I'm loading local file (I'm parsing csv file into json and then transfer the array to jqGrid). Table generated through jqGrid should allow user to modify, add and delete the data in the grid. Everything seemed to work perfectly until I wanted to add a row to my grid. One of the columns had a parameter key = true which is my id for the rows. When I try to add new row, the grid changes my id into jpg1. The others columns are fine. Below is the code I'm using:
$("#jqGrid").jqGrid({
datatype: "local",
data: myData,
editurl: "clientArray",
colModel: [
{
label: 'Kod',
name: 'Kod',
width: 60,
editable: true,
key: true,
sorttype: 'number'
},
{
label: 'Firma',
name: 'Firma',
width: 120,
editoptions:
{
size: 40,
sopt:['cn']
},
editable: true,
sorttype: 'string'
},
{
label: 'Adres',
name: 'Adres',
width: 80,
editoptions: {size: 40},
editable: true
},
{
label: 'Miasto',
name: 'Miasto',
width: 80,
editoptions:
{
size: 40,
sopt:['cn']
},
editable: true
}
],
height: 'auto',
autowidth: true,
shrinkToFit: false,
forceFit: false,
autoencode: true,
viewrecords: true,
caption: "Title",
pager: "#jqGridPager",
sortable: true,
ignoreCase: true,
sortname: 'Kod',
sortorder: 'asc',
rowNum: 5,
rowList: [5, 10, 20, "10000:All"],
ondblClickRow: function(rowid) {
$("#jqGrid").jqGrid('editGridRow', rowid,
{
editCaption: "The Edit Dialog",
zIndex:100,
recreateForm: true,
closeAfterEdit: true,
width: 900,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
});
}
});
$('#jqGrid').jqGrid('navGrid',"#jqGridPager",
{ edit: true, add: true, del: true, search: false, refresh: true, view: true, cloneToTop: true},
// options for the Edit Dialog
{
editCaption: "The Edit Dialog",
zIndex:100,
recreateForm: true,
closeAfterEdit: true,
reloadAfterSubmit: true,
width: 900,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Add Dialog
{
width: 900,
zIndex:100,
closeAfterAdd: true,
recreateForm: true,
reloadAfterSubmit: true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Delete Dialog
delSettings,
// options for the Search Dialog
{
zIndex:100
},
// options for the View Dialog
{
width: '100%'
});
I'm attaching a screenshot that shows a problem:
Photo
The data I use is a file parsed into JSON array via Papaparse.js plugin.
EDIT:
I've added the test data if somebody would like to test the code.
var myData = [];
myData.push(
{
Kod: 1.1,
Firma: 'Hutchinson',
Adres: '5th Avenue',
Miasto: 'Wroclaw'
},
{
Kod: 2.1,
Firma: 'BMW',
Adres: '6th Avenue',
Miasto: 'Warsaw'
});
I will be grateful for any help.
If you need the grid only for local editing, you can consider just remove key: true property to solve the problem. It's the way, which I would recommend you. You can include id property in the input data which will be used as value of rowid (id of <tr> elements).
Alternatively you can change the block "options for the Add Dialog" to the following
// options for the Add Dialog
{
width: 900,
zIndex:100,
closeAfterAdd: true,
recreateForm: true,
reloadAfterSubmit: true,
onclickSubmit: function (options, postdata, frmoper) {
// save Kod in some other parameter
return {myKod: postdata.Kod};
},
afterSubmit: function (jqXHR,postdata, frmoper) {
// restore the correct value
postdata.Kod = postdata.myKod;
// inform jqGrid that it was not an error
return [true];
}
},
You still don't would be able to change the id of the row in the way.
By the way you wrote that you use jqGrid 4.7.1. I want remind you that jqGrid 4.7.0 is the last version which is free. It's the reason why I started free jqGrid project which still free. You can get it here (see readme and wiki).
The demo shows an example of the above code fixes using free jqGrid 4.8.
I use the following code for bind the values in jqgrid.
And i create one link button for access the Particular Action Method.
I need to pass the firstcolumn value to the action method.
But ,If i use this Following href='#Url.Action("ViewApplicants", "HR")?JobsID="+rowObject[0]+" '.It show the undefined Value .How to solve this?
<div>
<table id="Jobtable"></table>
<div id="jQGridPager"></div>
<div id="dialog" title="View Job Detail"></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#Jobtable").jqGrid({
url: '/HR/PassJsonJob/',
datatype: "json",
mtype: 'GET',
colNames: ['Job ID', 'Job Title', 'Job Experience', 'Job Location', 'ViewApplicants'],
colModel: [
{ name: 'JobsID', index: 'JobsID', width: 150, align: 'left', editable: true },
{ name: 'JobTitle', index: 'JobTitle', width: 150, align: 'left', editable: true },
{ name: 'JobExperience', index: 'JobExperience', width: 150, align: 'left', editable: true },
{ name: 'JobLocation', index: 'JobLocation', width: 150, align: 'left', editable: true },
{
name: 'ViewApplicants', index: 'ViewApplicants', width: 150, sortable: false,
formatter: function (cellvalue, options, rowObject) {
alert(rowObject)
return "<a href='#Url.Action("ViewApplicants", "HR")?JobsID="+rowObject[0]+"'>View Applicants</a>";
}
}
],
rowNum: 10,
rowList: [10, 20, 30],
viewrecords: true,
loadonce: true,
gridview: true,
pager: "#jQGridPager",
cellEdit: false,
rowNumbers: true,
width: 1000,
caption: 'Applied Jobs',
viewrecords: true
})
$('#Jobtable').jqGrid('navGrid', '#jQGridPager',
{
edit: true,
add: false,
del: false,
view: false,
search: false
});
});
</script>
It's important to know the format of the server response from the URL /HR/PassJsonJob/. The format of rowObject corresponds to the format of items from the server response. So it could be that rowObject.JobsID instead of rowObject[0] would correct way to access JobsID property. Because you use loadonce: true the format of rowObject could be rowObject[0] at the first load. Later, for example, at local paging or sorting of data, the format of rowObject will be object with JobsID property, so rowObject.JobsID will be correct.
So the usage of rowObject.JobsID or rowObject[0] || rowObject.JobsID could fix your problem.
One more option could be to use the property key: true in the definition of JobsID column in colModel. One can use the property only if JobsID contains unique values in every row. In the case jqGrid will use the value from JobsID column as rowid: the value of id attribute assigned to the rows (<tr> elements) of the grid. In the case one could use options.rowId to access the JobsID value.
UPDATED: One more option exists in free jqGrid fork, which I develop since the end of 2014. The 2-d parameter (options) of the custom formatter has the property rowData, which contains the same information like rowObject, but it has always object format. Thus it's safe to use options.rowData.JobsID instead of rowObject[0] || rowObject.JobsID. One don't need to use the 3-d parameter of the the custom formatter at all. Free jqGrid didn't changed the format of the 3-d parameter to have the best upwards compatibility to the previous versions of jqGrid.
Here append similar questions but I cannot find answer to my one:
In html is
table id= grid and div id=pager:
Also I have mine js code:
var myGrid = $("#grid").jqGrid({
url: _options.gridFetch,
datatype: "json",
colModel:[
{name:'id',index:'id', width:55},
{name:'name',index:'name', width:555, editable:true},
{name:'is_promoted',index:'is_promoted', width:165, editable:true, formatter: $.adminCategoryEntries._boolFormatter, edittype: 'select', editoptions:{value:"1:Yes;0:No"}},
{name:'is_in_shop',index:'is_in_shop', width:165, editable:true, formatter: $.adminCategoryEntries._boolFormatter, edittype: 'select', editoptions:{value:"1:Yes;0:No"}},
{name:'actions', formatter:'actions', width: 85, formatoptions:{keys:true}},
],
pager: '#pager',
jsonReader : { repeatitems: false } ,
rowNum: 10,
rowList: [10, 20, 500],
viewrecords: true,
autowidth: true,
sortname: 'id',
sortorder: 'desc'
});
myGrid.jqGrid('navGrid','#pager',{edit:false,add:false,del:false,search:false});
I've use code from other stackoverflow tutorial.
And here is my issue: If I try to change number of showed rows in my navigator I can see all stored data (86 rows) but if I set rows to i.e 10 (value less than rows number)per page I always see in my navigator:
page 1 of 5
and I cannot switch it to another it always stays on first
json info:
>page: 1
>records: "86"
>rows: [{id:3, name:Ulkofilee/Naudanliha, is_promoted:1, is_in_shop:1},…]
>total: 5
thanks in advance
Radek
Are you getting the data from a server method you can control? It's somewhat cryptic, but the data coming from your _options.gridFetch needs to have a property named "total" defined that specifies the current page that should be viewed.