rowpos and colpos in beforShowForm - jqgrid

Is there an option to include rowpos and colpos in beforShowForm. I understand that it should be used under formoption setting of colModel. but my grid has customised edit (say status) and normal edit. I want different alignment for these two. below are my code for reference
bulkgrid.jqGrid('navGrid','#bulkktrackpager',{
edit: true,
add: true,
del: true,
search: true,
view: true,
//cloneToTop: true,
}).navButtonAdd('#bulkktrackpager',{
caption:"Status",
buttonicon:"ui-icon-lightbulb",
position:"last",
});
any idea???? many thanks..
}).navButtonAdd('#bulkktrackpager',{
caption:"Status",
buttonicon:"ui-icon-lightbulb",
position:"last",
onClickButton: function(){
var $self = $(this);
$self.jqGrid("editGridRow", $self.jqGrid("getGridParam", "selrow"),
{
beforeInitData: function(formid) {
bulkgrid.setColProp('status', {
formoptions : {
rowpos : 1,
colpos: 1,
},
});
bulkgrid.setColProp('ctno', {
formoptions : {
rowpos : 1,
colpos: 2,
},
});
//similaryly other elements
},
beforeShowForm: function(form) {
$("#tr_agent").hide();
},
recreateForm: true,
editData: {//Function to Add parameters to the status
oper: 'status',
},
closeAfterEdit: true,
reloadAfterSubmit: true,
});
}
});
Images
Image2

You can use rowpos and colpos properties of formoptions. You can set the values dynamically inside of beforeInitData callback. You should use recreateForm: true option additionally to be sure that jqGrid uses the current values.
The demo created for the answer demonstrate "static" usage of rowpos and colpos properties of formoptions. If you need to change alignment of all labels of the you can set text-align style (see the answer). Alternatively you can set CSS style text-align for specific labels only. You need to set the style inside of beforeShowForm callback for example.

Related

jqGrid Trying to apply filter(s) on Grid creation

I have an object that contains the following filter string:
prefs.filters={"groupOp":"AND","rules":[{"field":"FirstName","op":"cn","data":"max"}]}
Here is my grid create, where I am trying to apply the filters in the postData setting:
// Set up the jquery grid
$("#jqGridTable").jqGrid(
{
// Ajax related configurations
url: jqDataUrl,
datatype: "json",
mtype: "GET",
autowidth: true,
// Configure the columns
colModel: columnModels,
// Grid total width and height
height: "100%",
// customize jqgrid post init
gridComplete: function()
{
CRef.updateJqGridPagerIcons("jqGridTable");
},
// Paging
toppager: true,
rowNum: 20,
rowList: [5, 10, 20, 50, 100],
viewrecords: true, // Specify if "total number of records" is displayed
// Default sorting
sortname: typeof prefs.sortCol !== "undefined" ? prefs.sortCol : "LastName",
sortorder: typeof prefs.sortCol !== "undefined" ? prefs.sortOrd : "asc",
sorttype: "text",
sortable: true,
postData: typeof prefs.filters !== "undefined" ? { filters: prefs.filters } : {},
//also tried this...
//postData: typeof prefs.filters !== "undefined" ? { JSON.stringify(filters: prefs.filters) } : {},
//remaining property settings excluded from post to keep short.
Update: Using .navGrid on grid as follows:
.navGrid("#jqGridTable",
{ refresh: true, add: false, edit: false, del: false, refreshtitle: getRefreshText('#Model.Instruction'), searchtitle: searchText },
{}, // settings for edit
{}, // settings for add
{}, // settings for delete
{ closeAfterSearch: true, closeOnEscape: true, multipleSearch: true, multipleGroup: true });
When grid is created, the filter in postData is not applied. I also tried triggering reload event after the initial create and that to did not apply filter either.
From other posts, I believe I'm on correct path, but appear to be missing something.
Update after comments:
I added the following code to loadComplete...
if ($("#jqGridTable").jqGrid("getGridParam", "datatype") === "json") {
setTimeout(function () {
$("#jqGridTable").jqGrid("setGridParam", {
datatype: "local",
postData: { filters: prefs.filters, sord: prefs.sortOrd, sidx: prefs.sortCol },
search: true
});
$("#jqGridTable").trigger("reloadGrid");
}, 50);
}
and it successfully retains the filters. :)
However, now I have interesting issue side effect. I can sort on columns and some columns will change to sort asc/desc correctly, but when I go to others and sort, they sort but in the order that they originally loaded which is neither asc or desc.
You have to set search: true option of jqGrid if you want that filters will be applied. Moreover you use datatype: "json". It means that the filters will be just send to the server and your server code have to decode the filters and to use there. One more remark. The correct value for postData would be { filters: JSON.stringify(prefs.filters) }.
UPDATED: I recommend you upgrade to the latest version (4.12.1) or free jqGrid. It's the fork of jGrid which I develop since the end of 2014. To use free jqGrid you can just change the URLs to jqGrid files to URLs described in the wiki article. After that you can use the following options:
loadonce: true,
forceClientSorting: true,
search: true,
postData: { filters: prefs.filters },
sortname: prefs.sortCol,
sortorder: prefs.sortOrd
and remove the loadComplete code which you posted in "Update after comments" part of your question. Free jqGrid will load all data returned from the server, apply the filter prefs.filters locally, sort the results locally and display the first page of the results (based on the page size rowNum: 20).
The old demo loads the JSON data from the server, sort the data locally and filter by isFinal === 1 and finally display the first page of results. The demo uses additionally custom sorting using sortfunc, additionalProperties, which allows to saved additionally properties in local data.
You can additionally include reloadGridOptions: { fromServer: true } to other options of navGrid which you use (refresh: true, add: false, ...). It will change the behavior of the Refresh button of the navigator bar to reload the data from the server if the user clicks on the button. See another answer, which I posted today for more information about new options of free jqGrid and loadonce: true.

jqGrid : easy way to have the refresh button

I just want to display the refresh button on my jqGrids. I thought it was provided naturally so I did this :
$.extend($.jgrid.nav, {
refresh: true,
refreshstate: "current"
});
but it does nothing. no button appearing.
How can I add a refresh button just triggering the reloadGrid ?
thank you
$.jgrid.nav cab be used to specify default values of navGrid parameters, but to create "refresh" button or some other button in the grid you need explicitly call navGrid method. For example
$("#gridId").jqGrid("navGrid", "#pager", {
add: false, edit: false, del: false, search: false, refresh: true
});
The method navGrid creates navigator structures in the specified pager and then places specified buttons in the navigator bar.
If you use toppager: true option then top pager will be created additionally. The pager will have id = grid_id + "_toppager" (gridId_toppager if id of the grid is gridId). You can have one or two pagers. You can call navGrid explicitly for one from the pagers or you can use cloneToTop: true option of navGrid to place the pager on every page.
If you have existing project with many grids you have sure one common JavaScript file with settings which you included on every page. You placed sure $.extend($.jgrid.nav, {...}); in the file. Whyt you can do is to specify common onInitGrid callback which calls navGrid:
$.extend($.jgrid.defaults, {
onInitGrid: function () {
var $self = $(this), p = $self.jqGrid("getGridParam");
if (p.pager) {
$self.jqGrid("navGrid", p.pager,
{add: false, edit: false, del: false, search: false, refresh: true, cloneToTop: true});
} else if (p.toppager) {
$self.jqGrid("navGrid", "#" + $.jgrid.jqID(p.id) + "_toppager",
{add: false, edit: false, del: false, search: false, refresh: true});
}
}
});

jqGrid filter toolbar show search operator selector just for single column

I have jqGrid table with many columns. Searching in grid is made using filter toolbar. For most of them search is just simple default operator. For one datetime column I want different kind of operators and datepicker selector.
I have added dataInit datepicker initialization to searchoptions, necessary operators to searchoptions.sopt. To show this operators I have set searchOperators to true. So for this column all is ok. I have datepicker with operator selector popup. But for all other columns default operator icon is shown on the left of it. It is annoying as operator is default and user couldn't change it. So is there is some possibility to hide them using jqGrid API? As far as I could see I could hide this only using my custom code:
I need to check my column model and after rendering of grid (may be in loadComplete) for all columns that have empty sopt or sopt.length == 0 to remove operator selector. Or add CSS class that hide it. Not sure which of these solution is better (hide or remove) because removing could broke some logic, and hiding could affect width calculation. Here is sample of what I mean on fiddle
function fixSearchOperators()
{
var columns = jQuery("#grid").jqGrid ('getGridParam', 'colModel');
var gridContainer = $("#grid").parents(".ui-jqgrid");
var filterToolbar = $("tr.ui-search-toolbar", gridContainer);
filterToolbar.find("th").each(function()
{
var index = $(this).index();
if(!(columns[index].searchoptions &&
columns[index].searchoptions.sopt &&
columns[index].searchoptions.sopt.length>1))
{
$(this).find(".ui-search-oper").hide();
}
});
}
Does anybody have some better ideas?
I find the idea to define visibility of searching operations in every column very good idea. +1 from me.
I would only suggest you to change a little the criteria for choosing which columns of searching toolbar will get the searching operations. It seems to me more native to include some new property inside of searchoptions. So that you can write something like
searchoptions: {
searchOperators: true,
sopt: ["gt", "eq"],
dataInit: function(elem) {
$(elem).datepicker();
}
}
I think that some columns, like the columns with stype: "select", could still need to have sopt (at least sopt: ["eq"]), but one don't want to see search operators for such columns. Specifying of visibility of searching operations on the column level would be very practical in such cases.
The modified fiddle demo you can find here. I included in the demo CSS from the fix (see the answer and the corresponding bug report). The full code is below
var dataArr = [
{id:1, name: 'steven', surname: "sanderson", startdate:'06/30/2013'},
{id:2, name: "valery", surname: "vitko", startdate: '07/27/2013'},
{id:3, name: "John", surname: "Smith", startdate: '12/30/2012'}];
function fixSearchOperators() {
var $grid = $("#grid"),
columns = $grid.jqGrid ('getGridParam', 'colModel'),
filterToolbar = $($grid[0].grid.hDiv).find("tr.ui-search-toolbar");
filterToolbar.find("th").each(function(index) {
var $searchOper = $(this).find(".ui-search-oper");
if (!(columns[index].searchoptions && columns[index].searchoptions.searchOperators)) {
$searchOper.hide();
}
});
}
$("#grid").jqGrid({
data: dataArr,
datatype: "local",
gridview: true,
height: 'auto',
hoverrows: false,
colModel: [
{ name: 'id', width: 60, sorttype: "int"},
{ name: 'name', width: 70},
{ name: 'surname', width: 100},
{ name: 'startdate', sorttype: "date", width: 90,
searchoptions: {
searchOperators: true,
sopt: ['gt', 'eq'],
dataInit: function(elem) {
$(elem).datepicker();
}
},
formatoptions: {
srcformat:'m/d/Y',
newformat:'m/d/Y'
}
}
]
});
$("#grid").jqGrid('filterToolbar', {
searchOnEnter: false,
ignoreCase: true,
searchOperators: true
});
fixSearchOperators();
It displays the same result like youth:

jqgrid open subgrid only if there is some data

here is declarations of my subgrid:
subGrid : true,
subgridtype: 'json',
subGridUrl: 'manuf_subgr.php',
subGridModel: [{ name : ['Package','Sticker','Manufacturer'],
width : [85,50,100],
params: ['Catalogue']
}
],
gridComplete: function() {
var timeOut = 50;
var rowIds = $("#schedule").getDataIDs();
$.each(rowIds, function (index, rowId) {
if(rowId.row_cnt != 0){
setTimeout(function() {
$("#schedule").expandSubGridRow(rowId);
}, timeOut);
timeOut = timeOut + 200;
}
});
}
what I expect to happen is this line if(rowId.row_cnt != 0) preventing opening a subgrid if there is no data returned from json... yet all grids are open regardless...
can someone help to implement stop for opening empty subgrids?
full code:
jQuery("#schedule").jqGrid({
url:'sched.php',
datatype: "json",
mtype:'GET',
colNames:['Street_Date','Label','Catalogue', 'Artist', 'Title','UKDP','UPCEAN','format'],
colModel:[
{name:'Street_Date',index:'Street_Date desc, ID', sorttype:"date", formatter:'date', formatoptions: {newformat:'d/m/Y'}, width:75},
{name:'label',index:'label', width:100,align:"center"},
{name:'Catalogue',index:'Catalogue', width:85},
{name:'Artist',index:'Artist', width:120},
{name:'Title',index:'Title', width:250},
{name:'UKDP',index:'UKDP', width:35, align:"right", formatter:"number", sorttype:"float"},
{name:'UPCEAN',index:'UPCEAN', width:120, align:"center"},
{name:'format',index:'format', width:70, sortable:false}
],
height: "100%",
rowNum:20,
rowList:[10,20,30,50,100],
sortname: 'id',
viewrecords: true,
sortorder: "desc",
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: true,
cell: "cell",
id: "id",
userdata: "userdata",
subgrid: {root:"rows", repeatitems: true, cell:"cell" }
},
pager: '#schedule_pager',
caption:"Release Schedule",
grouping:true,
groupingView : {
groupField : ['Street_Date']
},
subGrid : true,
subgridtype: 'json',
subGridUrl: 'manuf_subgr.php',
subGridModel: [{ name : ['Package','Sticker','Manufacturer'],
width : [85,50,100],
params: ['Catalogue']
}
],
gridComplete: function() {
var timeOut = 50;
var rowIds = $("#schedule").getDataIDs();
$.each(rowIds, function (index, rowId) {
if(rowId.row_cnt != 0){
setTimeout(function() {
$("#schedule").expandSubGridRow(rowId);
}, timeOut);
timeOut = timeOut + 200;
}
});
},
onSelectRow: function (rowId) {
$("#schedule").jqGrid ('toggleSubGridRow', rowId);
}
});
You write in the comment that you are newbie and it's the second day when you use it. jqGrid is relatively complex and your first example which you try to implement seems to me too complex for newbie. You try to load fill jqGrid with the data from the database and do grouping and subgrid in one grid.
What you try to implement in your demo can be solved by usage of expandOnLoad: true property of the subGridOptions option:
subGridOptions: {expandOnLoad: true}
You can see the feature on the official demo disguised under "Hierarchy" / "Expand all Rows on load". There are one important problem which I described in the answer. The problem is shortly the following: internal implementation of Ajax requests used in jqGrid prevent (skip) Ajax requests when another pending (not yet answered by the server) are working (see .grid.hDiv.loading in the places of the code here, here in the subgrid module and here, here and here). Neither expandOnLoad: true nor your current implementation can grantee that new Ajax request will be started during previous one still not responded. So you can have not all subgrids opened. You main question: "how to prevent opening of empty subgrids or how to hide it?", I find the second (and less important) question. Even if you see currently that your web site opens all subgrids it can be that access to the same site from more far place from the internet will follow opening of one or some subgrids only.
So I think that you should either change the design of your web page (change what you want to display in subgrids) or change the implementation so that you construct a queue with the list of subgrids which should be opened and you will open the next grid only after the previous one will be opened.
Alternatively you can includes the data for all subgrids in the response for the main grid. In the case you should use subGridRowExpanded callback to fill the grids as subgrid as grid. You you would use no caption and no pager option in the subgrids you will be get the same look as with the standard subgrids. Additionally you will have much more flexibility in the options. I personally prefer to subgrid as grid.

jqgrid - dynamically enabling grouping

I was able to implement grouping feature from examples in the jqgrid demo page. But I don't want to enable grouping by default but on the change of a select list I would like to enable the grouping feature. I have tried several options but none of them were successful? Could some one please help me here, may be I am missing something. Here is my code...
$("#dynamicGrouping").change(function() {
var value = $(this).val();
if(value) {
if(value == '') {
$('#grid').jqGrid('groupingRemove', true);
} else {
$('#grid').jqGrid('setGridParam', { grouping:true });
$('#grid').jqGrid('groupingGroupBy', value);
$('#grid').trigger('reloadGrid');
}
}
});
My grid definition:
jQuery(function() {
$('#grid').jqGrid({
.....
.....
grouping: false,
groupingView : {
groupField : ['field_name'],
groupColumnShow : [true],
groupText : ['<b>{0} - {1} Item(s)</b>'],
groupCollapse : false,
groupOrder: ['asc'],
groupDataSorted : true
},
.......
.......
});
});
I supposed that you made some error in the code. The code which you posted seem me correct, but you don't need to set grouping:true and trigger reloadGrid additionally because groupingGroupBy do this you automatically.
The demo demonstrates setting or removing of grouping dynamically.
So you can use
$("#dynamicGrouping").change(function () {
var groupingName = $(this).val();
if (groupingName) {
$('#grid').jqGrid('groupingGroupBy', groupingName);
} else {
$('#grid').jqGrid('groupingRemove');
}
});
or a little more advanced version
$("#dynamicGrouping").change(function () {
var groupingName = $(this).val();
if (groupingName) {
$('#grid').jqGrid('groupingGroupBy', groupingName, {
groupOrder : ['desc'],
groupColumnShow: [false],
groupCollapse: true
});
} else {
$('#grid').jqGrid('groupingRemove');
}
});
UPDATED: Everything works with JSON data too: see the demo.
UPDATED 2: I looked in the code one more time and I found out that gridview will set to true at the initialization of grid: see the lines. If you don't have gridview: true and use initially grouping: false then you will be not able to change just grouping: true. You have to set also other parameters from the grouping limitations correctly.
So you have to hold the rules from limitations yourself:
scroll: false,
rownumbers: false,
treeGrid: false,
gridview: true,
By the way I recommend always use gridview: true because of better performance.

Resources