Related
I am trying to delete a row from jqgrid using the method delRowData which is using the grouping feature. When i delete a row from the jqgrid it doesn't seem to be updating the count in the groupText. Below is the code I have tried
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery-ui-custom.css" />
<link rel="stylesheet" type="text/css" href="ui.jqgrid.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script src="js/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.js" type="text/javascript"></script>
<script src="js/jquery.contextmenu.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
var mydata = [
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"1",invdate:"2010-05-24",name:"test",note:"note",tax:"10.00",total:"2111.00"} ,
{id:"2",invdate:"2010-05-25",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
{id:"29",invdate:"2007-09-01",name:"test3",note:"note3",amount:"450.00",tax:"40.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"},
{id:"19",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"40.00",total:"430.00"},
{id:"11",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"12",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"13",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"35.00",total:"430.00"},
{id:"14",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"15",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"16",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"17",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"18",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"21",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"22",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"23",invdate:"2007-09-01",name:"test3",note:"note3",amount:"450.00",tax:"30.00",total:"430.00"},
{id:"24",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"25",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"26",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"27",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"28",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}
];
jQuery("#list3").jqGrid({ data: mydata,
datatype: "local",
height: 400,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right"},
{name:'tax',index:'tax', width:80, align:"right"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
rowNum:100,
rowList:[10,20,30],
pager: '#pager3',
sortname: 'amount asc, tax',
viewrecords: true,
sortorder: "asc",
loadonce: true,
multiSort: true,
grouping : true,
groupingView : {
groupField : ['invdate'],
groupColumnShow : [false],
groupText : ['<b>{0} - ({1})</b>'],
groupCollapse : false,
groupOrder: ['asc'],
groupSummary : [false],
plusicon : 'ui-icon ui-icon-triangle-1-e',
minusicon : 'ui-icon ui-icon-triangle-1-s'
},
caption: "Load Once Example"
});
jQuery("#deleteButton").click(function(){
var rowid = $("#list3").jqGrid ("getGridParam", "selrow");
jQuery("#list3").jqGrid("delRowData",rowid);
});
});
</script>
</head>
<body>
<table id="list3"></table>
<button id="deleteButton">Delete Row</button>
</body>
</html>
I hope I have explained my problem. Please let me know if anything else need to be added.
BTW I am using jqgrid version : "4.5.4"
Thanks in advance
Mobin
I got the solution from the trirand forum
I just had to destroy and recreate the grouping after calling delRowData on the row.
jQuery("#list3").jqGrid('groupingRemove', true);
$('#list3').jqGrid('groupingGroupBy', 'invdate');
I tried solutions given for this problem. But still, it is not working. I feel JSON response is not in the right format.
Have implemented JQGrid in struts2. Create a user list in action and returned as json type using result type as json in struts.xml.
This is the Json i obtained,
{"JSON":"success","userList":[{"fName":"abi","lName":"babu"},{"fName":"abi1","lName":"babu1"},{"fName":"abi2","lName":"babu2"},{"fName":"abi3","lName":"babu3"},{"fName":"abi4","lName":"babu4"},{"fName":"abi5","lName":"babu5"},{"fName":"abi6","lName":"babu6"}]}
The JSP page is,
<script type="text/javascript">
$(function () {
'use strict';
$("#datagrid").jqGrid({
url: "json-table",
datatype: "json",
colNames:['fName','lName'],
colModel:[
{name:'fName',index:'fName', key:true, width:100,editable:true,editoptions:{size:10}},
{name:'lName',index:'lName', width:100,editable:true},
],
rowNum:10,
rowList:[3,6],
loadonce: true,
pager: '#navGrid',
sortname: 'fName',
sortorder: "asc",
height: "auto", //210,
width:600,
onSelectRow: function(id) {
var getID = $(this).jqGrid('getCell', id, 'fName');
},
viewrecords: true,
caption:"JQ GRID"
});
});
</script>
Any help would be highly appreciated. Thanks.
You need just include jsonReader parameter which corresponds the format of your input data:
jsonReader: {root: "userList", repeatitems: false}
See the demo.
I have the following call to load a grid:
$("#searchlist").jqGrid({
url:'./searchlibrary',
datatype: 'json',
mtype: 'POST',
postData: {
type: function(){return $('select[name="searchtype"]').val();},
criteria: function(){return getSearchData();}
},
colNames:['Resource Name','Unit', 'Topic','Document Type','Content Type','Select'],
colModel :[
{name:'resourceName', index:'resourceName', width:380, align:'left'},
{name:'unit', index:'unitID', width:40, align:'center',sortable:true,
sorttype:'text'},
{name:'topic', index:'topicID', width:220, align:'center',sortable:true},
{name:'docType', index:'docTypeID', width:97, align:'center',
sortable:true},
{name:'contentType', index:'contentTypeID', width:97, align:'center',
sortable:true},
{name: 'select', width:55, align: "center", sortable: false, editable: true,
edittype: "checkbox", editoptions: { value:"Yes:No" },
formatter:"checkbox",formatoptions: {disabled : false}}
],
rowNum:20,
sortname: 'resourceName',
sortorder: 'asc',
viewrecords: true,
gridview: true,
width:878,
height:251
});
Notice the last item in the colModel section. Notice the editoptions section. When the grid is loaded it seems to be ignoring this. Checking the element in chrome shows the following code being generated:
<input type="checkbox" value=" " offval="no">
Am I doing something wrong in the declaration?
UPDATE
Here's the JSON returned:
{"total":1,"page":"1","records":"4","rows":[{"id":"1","cell":["Test Resource 1","1","Topic 1","pdf","course","1"]},{"id":"2","cell":["Test Resource 2","1","Topic 1","pdf","course","2"]},{"id":"3","cell":["Test Resource 3","1","Topic 2","mp4","course","3"]},{"id":"4","cell":["Test Resource 4","1","Topic 2","wmv","course","4"]}]}
This still gives me 4 results all checked by default. This is what's in my colModel for select now:
{name: 'select', index:'resourceID', width:55, align: "center", sortable: false, editable: true, edittype: "checkbox", editoptions: { value:"Yes:No", defaultValue:"No" }, formatter:"checkbox",formatoptions: {disabled : false}}
The first generated html for one of the select cells is this:
<input type="checkbox" checked="checked" value="1" offval="no">
If you loads the data in the grid the values for the select column will be filled as the checkbox with respect of the formatter:"checkbox". If the value is "" the default value can be used. So one can use defaultValue of the formatoptions to specify the default value. The HTML fragment
<input type="checkbox" value=" " offval="no">
with " " value shows that you have probably wrong data with the space instead of empty string. If you need to fill the data correctly you need return from the server the data having true, false, 1, 0, yes, no, on or off (the case of all values are not important). See the source code for more details.
So you should one more time verify your data returned from the server. I personally prefer to use 1 and 0 as the input values for checkboxes.
When I resize my grid , and the horizontal scrollbar appears , I see that an extra space in the header is created for it , but I still see it on the other grid columns. i want to see this scrollbar only on the most left column.
this is my code:
$(function()
{
$("#gridTable").jqGrid(
{
editurl: "clientArray",
direction:"rtl",
datatype: "local",
colNames:['Code1','Code2', 'Code3', 'Code4','Code5','Code6','Code7','Code8','Code9'],
colModel:[
{name:'code1',index:'code1', width:60, sorttype:"int" , editable:true, edittype:'text'},
{name:'code2',index:'code2', width:150, sorttype:"date" , editable:true, edittype:'text'},
{name:'code3',index:'code3', width:150 , editable:true, edittype:'text'},
{name:'code4',index:'code4', width:80, sorttype:"float" , editable:true, edittype:'text'},
{name:'code5',index:'code5', width:80, sorttype:"float" , editable:true, edittype:'text'},
{name:'code6',index:'code6', width:80, sorttype:"float" , editable:true, edittype:'text'},
{name:'code7',index:'code7', width:80, sortable:false , editable:true, edittype:'text'},
{name:'code8',index:'code8', width:80, sorttype:"float" , editable:true, edittype:'text'},
{name:'code9',index:'code9', sorttype:"float" , editable:true, edittype:'text'},
],
height: '120px' ,
scrolling: true,
autowidth: true,
shrinkToFit: false
});
$("#gridTable").closest(".ui-jqgrid-bdiv").css({ 'overflow-y' : 'scroll' });
var mydata = [
{code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
{code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
{code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
{code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
{code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
{code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
{code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
];
for(var i=0;i<=mydata.length;i++)
jQuery("#gridTable").jqGrid('addRowData',i+1,mydata[i]);
});
and this is a picture of the problem:
Any help will be appritiated ,
Thank's in advance.
Try to verify that the problem with the horizontal scrollbar exist in Google Chrome or Safari web browsers. If in the browsers you will have no horizontal scroll bar, that the problem which you have is the same which I described here.
The problem that jqGrid had wrong width calculation in case of shrinkToFit:false. My suggestion to fix the bug is implemented in the jqGrid code on the GitHub and will be sure in the code of the next jqGrid version. So you can either try to use developer (non-minimized) version of jqGrid from the GitHub or set the correct width of the grid explicitly like I described in the bug report.
One more workaround: you can fix the grid width with respect of fixGridWidth function which code I posted here.
UPDATED: I looked the problem one more time and can say that your problem come really mostly from the bug in jqGrid in case of shrinkToFit:false usage. After the changing of one line of jqGrid code (after the bug fixing) and minor changes in the definition of jqGrid the grid will be the following
you can see it live here. The corresponding code is
$(function() {
var mydata = [
{id:"1",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
{id:"2",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
{id:"3",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
{id:"4",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
{id:"5",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
{id:"6",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
{id:"7",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""}
];
$("#gridTable").jqGrid({
editurl: "clientArray",
direction:"rtl",
datatype: "local",
data: mydata,
colNames:['Code1','Code2', 'Code3', 'Code4','Code5','Code6','Code7','Code8','Code9'],
colModel:[
{name:'code1',index:'code1', width:60, sorttype:"int", editable:true},
{name:'code2',index:'code2', width:150, sorttype:"date", editable:true},
{name:'code3',index:'code3', width:150, editable:true},
{name:'code4',index:'code4', width:80, sorttype:"float", editable:true},
{name:'code5',index:'code5', width:80, sorttype:"float", editable:true},
{name:'code6',index:'code6', width:80, sorttype:"float", editable:true},
{name:'code7',index:'code7', width:80, sortable:false, editable:true},
{name:'code8',index:'code8', width:80, sorttype:"float", editable:true},
{name:'code9',index:'code9', sorttype:"float", editable:true}
],
height: 'auto',
shrinkToFit: false
});
});
The code fix small bugs in you code and make minimal optimization with respect of the usage of the data parameter instead of addRowData. The small bugs in your code are following:
at the end of initializing of mydata you have comma before ']' which is syntax error. The same error you have in the definition of the colModel. You should remove both commas before ']'. In the case of usage data it would be strictly recommended to include additional id property in the definition of every item in the mydata array. The id will define the corresponding row id.
in the loop for(var i=0;i<=mydata.length;i++) you will try to access to undefined element mydata[mydata.length]. The loop should be changed to for(var i=0;i<mydata.length;i++). More better is to fill grid with respect of data parameter (see the code above).
the parameter edittype:'text' used in all columns is default, so you can remove it.
there are not exist jqGrid parameter scrolling: true which will be just ignored by jqGrid.
the jqGrid parameter autowidth: true seems to me not good in case of the usage together with shrinkToFit: false, because it will follow to the change of the grid width. So you will either have horizontal scroll bar in the grid because of autowidth: true or you will have many free space as the part of grid.
setting the grid height explicitly like height: '120px' instead of height: 'auto' can also follows to vertical scroll bar which will take the grid width. So the horizontal bar can be also seen.
UPDATED: I recommend additionally to look at the demo and this one from the comment.
UPDATED 2: No such problem exist in free jqGrid.
i want to add one more tool bar with different buttons in the bottom of the header. is there any possibilities?
used
toolbar: [true,"top"] or toolbar: [true,"bottom"]
its showing same toolbars...
in the bottom toolbar contains Add, edit, delete buttons..
i want to make change in top toolbar contains ADD button only.. & bottom toolbar contains Edit, Delete, refresh, etc.,
Thank you,
Probably you misunderstood toolbar parameter of the jqGrid. Perhaps you want use Navigator having cloneToTop: true which works if you define additionally toppager: true jqGrid option. This option clone the pager div on the top of the jqGrid. After this one can easy remove some elements from the top or bottom "toolbar":
jQuery("#list").jqGrid({
// some parameters
toppager: true,
// some other paremeters
}).jqGrid('navGrid','#pager',{cloneToTop:true});
var topPagerDiv = $("#list_toppager")[0];
$("#edit_list_top", topPagerDiv).remove();
$("#del_list_top", topPagerDiv).remove();
$("#search_list_top", topPagerDiv).remove();
$("#refresh_list_top", topPagerDiv).remove();
$("#list_toppager_center", topPagerDiv).remove();
$(".ui-paging-info", topPagerDiv).remove();
var bottomPagerDiv = $("div#pager")[0];
$("#add_list", bottomPagerDiv).remove();
The part "list" of different id names from the code above will be used because we use <table> element with id="list".
From the Demo site:
HTML
Java Scrpt code
jQuery("#myGrid").jqGrid({
url:'server.php?q=1',
datatype: "xml",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:55},
{name:'invdate',index:'invdate', width:90},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right"},
{name:'tax',index:'tax', width:80, align:"right"},
{name:'total',index:'total', width:80,align:"right"},
{name:'note',index:'note', width:150, sortable:false}
],
rowNum:10,
rowList:[10,20,30],
pager: '#pgmyGrid',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"Toolbar Example",
editurl:"someurl.php",
toolbar: [true,"top"] //THIS IS IMPORTANT!
});
jQuery("#myGrid").jqGrid('navGrid','#pgmyGrid',{edit:false,add:false,del:false});
$("#t_myGrid").append("<input type='button' value='Click Me' style='height:20px;font-size:-3'/>");