Add toolbar in the bottom of the header using jqgrid - 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'/>");

Related

jqGrid paging buttons work only on one click

I'm using jqGrid in my project and ran into a strange paging issue. I can click on the next page button and go from page 1 to page 2, but any other paging buttons I push after that I get stuck on page 2 and can't go to other pages. I can however type in a page number, hit enter and then it will update the page displayed. I have pasted the jqGrid code below.
jQuery(document).ready(function(){
jQuery("#groupsTable").jqGrid({
jsonReader: {
root:"rows",
page:"page",
total:"total",
records:"records",
repeatitems:false,
cell:"",
id:"id",
userdata:"userdata"
},
url:'project/selectTable/loadTableInfo.do',
datatype:'json',
colNames:['Name','Size', 'Number', 'Search','Delete'],
colModel:[
{name:'name',index:'name', width:500, sorttype:'text', searchoptions:{sopt:['cn']},
{name:'size',index:'size', sorttype:'int', width:150, searchoptions:{sopt:['le']}},
{name:'mailList',index:'mailList',sorttype:'int', width:150, searchoptions:{sopt:['le']}},
{name:'search',index:'search', stype:'select', width:60, sortable:false},
{name:'delete',index:'delete',width:60, stype:'select', sortable:false}],
pager:'#pager',
loadonce:true,
rowNum:50,
rowList:[10,25,50,75,100,500],
viewrecords:true,
height:600,
pgbuttons:true,
pginput:true,
loadComplete: function(){
var ids = jQuery("#groupsTable").getDataIDs();
for(var i=0;i<ids.length;i++){
var cl = ids[i];
X = "<span class='delete' onClick=deleteRow("+cl+");></span>"
searching = "<span class='search' onClick=search("+cl+");></span>"
jQuery("#groupsTable").setRowData(ids[i],{delete:X});
jQuery("#groupsTable").setRowData(ids[i],{search:searching});
}
jQuery('#groupsTable').filterToolbar({searchOnEnter:false});
jQuery('#groupsTable')[0].triggerToolbar();
},
caption:'General Info'
});
});
And the html:
<table id="groupsTable"></table>
<div id="pager"></div>
what i think you are implementing rowList in wrong manner, read the defination of rowList in this link
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:first_grid
or it could be a version problem also, check this link..
http://www.trirand.com/blog/?page_id=393/help/default-rowlist/
I hope it helps you

jqgrid - predefined formatter actions - change the default action of edit selected row button

Can we change the default action of the "edit selected row" button?
Here is my code for the grid
jQuery("#detFlex62_1").jqGrid({
url: root + mod + '/detaillistview',
datatype: "clientSide",
colNames:[' ', '<?=lang("users_company_code")?>', '<?=lang("users_company_name")?>', ' ', ' '],
colModel:[
{name:'myac', width:50, fixed:true, sortable:false, resize:false, formatter:'actions', formatoptions:{keys:true,delOptions: {reloadAfterSubmit:false},editOptions: {reloadAfterSubmit:false}}},
{name:'company_code',index:'company_code', width:100},
{name:'company_name',index:'company_name', width:100},
{name:'company_id',index:'company_id', width:100,hidden:true},
{name:'company_access_id',index:'company_access_id', width:100,hidden:true}
],
width: $('.body').width()-40,
height: 120,
pager: '#pagerFlex62_1',
sortname: 'user_id',
sortorder: "desc",
editurl: root + mod + '/detailpost',
caption:"<?=lang("users_title")?>",
onSelectRow: function(id){
activedf = "#detFlex62_1";
}
});
jQuery("#detFlex62_1").jqGrid('navGrid','#pagerFlex62_1',{edit:false,del:false,search:false, addfunc: df_add_1});
I know I should put something in the editOptions part of the code. Right now I only put reloadAfterSubmit:false. What is the option to execute our own custom function ?
If you need just calling custom function when you press 'Edit' button in navigation bar, your navgrid should look like this:
jQuery("#detFlex62_1").jqGrid('navGrid', "#mainGridNavi", { edit: true, add: false, del: false, editfunc: function() { alert('test'); }})
Regards.

jqGrid: Form isn't showing checkbox values

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.

jqgrid rtl horizontal scrollbar problem

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.

Adding a button to a row in jqgrid

I want to add a button to each row in my grid that will bring up a new window. Do not see this feature in this very rich control. Must be missing something
Here's one example, from the jqGrid demos page:
jQuery("#rowed2").jqGrid({
url:'server.php?q=3',
datatype: "json",
colNames:['Actions','Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'act', index:'act', width:75,sortable:false},
{name:'id',index:'id', width:55},
{name:'invdate',index:'invdate', width:90, editable:true},
{name:'name',index:'name', width:100,editable:true},
{name:'amount',index:'amount', width:80, align:"right",editable:true},
{name:'tax',index:'tax', width:80, align:"right",editable:true},
{name:'total',index:'total', width:80,align:"right",editable:true},
{name:'note',index:'note', width:150, sortable:false,editable:true}
],
rowNum:10,
rowList:[10,20,30],
imgpath: gridimgpath,
pager: jQuery('#prowed2'),
sortname: 'id',
viewrecords: true,
sortorder: "desc",
gridComplete: function(){
var ids = jQuery("#rowed2").getDataIDs();
for(var i=0;i<ids.length;i++){
var cl = ids[i];
be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=jQuery('#rowed2').editRow("+cl+"); ></ids>";
se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=jQuery('#rowed2').saveRow("+cl+"); />";
ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=jQuery('#rowed2').restoreRow("+cl+"); />";
jQuery("#rowed2").setRowData(ids[i],{act:be+se+ce})
}
},
editurl: "server.php",
caption:"Custom edit " }
).navGrid("#prowed2",{edit:false,add:false,del:false});
You can also do it with a custom formatter.
the current highest answer places the custom button code within loadComplete. it shoudl be gridComplete. The API has likely been changed since the question was answered.
in colModel , you can format using formatter by following code
formatter:function (cellvalue, options, rowObject) {
return "<input type='button' value='somevalue' onclick='some_function'\>";
}
This example might be helpful. See this wiki page and this answer from Oleg.
I am using a jqgrid to display a list of contacts. I have a column named 'Role' with a button that says 'Define', such that you can click on it and redefine that contact's role as primary, secondary, sales, or other.
Originally, the button element was being sent to the grid cell via XML, where $rowid was the id of the row (PHP):
<cell><![CDATA[<button data-idx='{$rowid}' class='contact_role_button btn' title='Define Role...'>Define</button>]]></cell>
This worked fine until I set autoencode: true on the grid. With this option set to true, the column was simply displaying the html.
Craig's answer displayed similar behavior, but a slight variation of it did the trick. I thought I'd share:
gridcomplete: function() {
var ids = $grid.getDataIDs();
for (var i=0;i<ids.length;i++){
var cl = ids[i],
button = '<button data-idx="'+cl+'" class="contact_role_button btn" title="Define Role...">Define</button>';
if (cl.substr(0,2) !== "jq") {
$('#'+cl).find('td[aria-describedby="list_role"]').html(button);
}
}
}
In other words, the setRowData method didn't work with autoencode set to true, but the DOM can be manipulated as desired within the gridcomplete event.

Resources