I have successfully increased the zIndex for edit,add,del and search options but alertmod is still at z-index 950 making it always behind parent modal.
alertmod is the warning message when click edit or delete without selecting any row. Is there a way to change the zIndex for alertmod?
new code but still not working... did I place it in wrong order
$("#list-employees-grid").jqGrid('navGrid',"#list-employees-pager",{alertzIndex:3234},
{edit:true,add:false,del:true,search:true,},
{zIndex:1234}, //option for edit
{zIndex:2234}, // for add
{zIndex:3234}, // del
{zIndex:4234, multipleSearch:true, multipleGroup:true} // search
);
There are some cases where the "alertmod" can be created. For example if you mean alerts from the navGrid you can use alertzIndex option which is currently just not documented in the list of navGrid parameters. Nevertheless you can use for example the following options used by alert dialogs: alertcap, alerttop, alertleft,alertwidth,alertheight,closeOnEscape, alertzIndex. See the line of code for details.
For example you can set default value for alertzIndex by
$.extend($.jgrid.nav, {alertzIndex: 1005});
UPDATED: I posted the feature request which could solve the problem with the options of alert dialog in the common case.
UPDATED 2: The feature request is already implemented in the jqGrid code on github (see here). So in the next version (the next after 4.4.0) one will be able to use
$.extend($.jgrid.jqModal, {zIndex: 1005});
to set default z-Index for all alert messages shown by jqGrid.
Yes, there is an alertzIndex option that can be used to specify a custom zIndex. For example:
jQuery("#grid_id").jqGrid({
...
pager : '#gridpager',
...
}).jqGrid('navGrid', '#gridpager', {alertzIndex: customZIndex, ...});
This option is missing from the jqGrid Navigator documentation and should probably have an entry in the Parameters section. You can see all of the possible options in the source code if you look at grid.formedit.js and browse to the navGrid function definition at line 1702.
Does that help?
Related
I have been using selec2 version 4 with ajax option.
And I want to set a selected value, as recommended in the guideline, by adding new Option element.
A problem I have is that I do not know when to add the new option because the event select2-loaded does not seem to exist in the latest version of select 2.
Can you please let me know in what way I can know the moment when data has finished loading from the server and has finished setting up, so I can add a new option to it?
Thank you.
The Option element you mention is created by calling the Option() constructor which then constructs a HTMLOptionElement. So basically you are just adding to your DOM and don't need to do it in any select2 event. Instead just do it on document load.
Here's a very basic example of what it could look like:
$(function () {
$('#element-to-select').select2();
var option = new Option('text', 'value', true, true);
$('#element-to-select').append(option).trigger('change');
}
Note that we are calling .trigger('change') to report the change to select2 as documented here.
Am using the free jqgrid , to keep it short, am getting method not found on fixScrollOffsetAndhBoxPadding when I try to set the height of the jqgrid via the below code in beforeProcessing().
$grid.setGridHeight(200).trigger("reloadGrid");
The reason I need to set the height is, when rownNum is <10, i want height as auto. but wen the rowNum is >10, i need the grid to have a vertical scrollbar. But when setting this height, I get to see the javascript error which says, fixScrollOffsetAndhBoxPadding is not an object or property.
error:
SCRIPT438: Object doesn't support property or method 'fixScrollOffsetAndhBoxPadding'
jquery.jqgrid.min.js, line 202 character 381
I think that the origin of your problem could be wrong usage of setGridHeight or the usage of setGridHeight before you created the grid in $grid (for example $grid can be wrong and you should use $(this) instead). You didn't posted where in your code you use the lines. Free jqGrid set fixScrollOffsetAndhBoxPadding property of $grid[0] during creating of the grid (before onInitGrid is called).
One more important remark: you should be always very carefully in the usage of reloadGrid inside of other callbacks. You should understand the reloadGrid works synchronously. It means that the next line after reloadGrid will be executed after trigger("reloadGrid") is finished. For example you loads the 5-th page returned from the server. The call of trigger("reloadGrid") will reset page parameter of jqGrid, it can change datatype, place new Ajax request and so on. So I strictly recommend to use trigger("reloadGrid") only inside of setTimeout. In the way you can allow jqGrid to process the current request till the end and later make reloading:
$grid.setGridHeight(200);
setTimeout(function () {
$grid.trigger("reloadGrid");
}, 50);
It the above will not help then you should 1) use jquery.jqgrid.src.js instead of jquery.jqgrid.min.js to report the error; 2) write which version of free jqGrid you use (4.9.1, 4.9 or the current code from GitHub); 3) post more full example which can be used to reproduce the problem. One can easy localize the origin of the problem by debugging of the code, but one have to guess about the reason if one see only one line of code (or some small code fragment).
I am wanting to customise the edit form in jqGrid so that instead of using the table structured layout provided I would like to use my own custom css structured layout for the form elements. How should I go about modifying the edit form to allow me to use my own custom look?
You can definitely achieve this by jquery ui dialog. However I can not put full code for you but helps you in the steps you have to do.
1 design your custom form whatever CSS and style you want to apply.
Suppose this is youe custome form
<div id="dialog-div">
<input type="text">
</div>
2 on jquery dialog open the dialog on your jqgrid editbutton click
$("#edit").click(function(){
var rowdata = $("#coolGrid").jqGrid('getGridParam','selrow');
if(rowdata){
$("#dialog-div").dialog('open');
var data = $("#coolGrid").jqGrid('getRowData',rowdata);
alert(data);
}
});
by default it will close as-
$("#dialog-div").dialog({
autoOpen: false,
});
Now as you get data in variable you can put in your edit form and of jquery dialog button save it according to your logic.
Hope this helps you.
I would recommend you first of all to read (or at least look thorough) the code of form editing module which implement the part which you want to replace. You will see that it consist from more as 2000 lines of code. If you write "I would like to ..." you should understand the amount of work for implementing what you ask. If you are able to understand the code and if you are able to write your modification of the code even using libraries like jQuery UI then you can decide whether it's worth to invest your time to do the work. The main advantage of using existing solutions is saving of the time. What you get in the way is not perfect, but using existing products you could create your own solutions quickly and with acceptable quality. The way to study existing products which you can use for free seems me more effective as large investments in reinventing the wheel.
http://guriddo.net/?kbe_knowledgebase=using-templates-in-form-editing
Using templates in form editing
As of version 4.8 we support templates in the form editing. This allow to customize the edit form in a way the developer want. To use a template it is needed to set the parameter template in the edit add/or add options of navigator. This can be done in navigator or in the editing method editGridRow :
$("#grid").jqGrid("navGrid",
{add:true, edit:true,...},
{template: "template string for edit",...}
{template: "template string for add",...},
...
);
and in editGridRow method:
$("#grid").jqGrid("editGridRow",
rowid,
{template: "template string",...}
);
To place the CustomerID field in the template the following code string should be inserted in the template string
{CustomerID}
With other words this is the name from colModel put in { }
The usual problem with table layouts is when you have columns with different widths, especially with those very wide.
I solved my problem adding the attr colspan to wide columns in the beforeShowForm event.
for example
"beforeShowForm":function() {
$('#tr_fieldnameasinColModel > td.DataTD').attr('colspan',5);
}
It's not fancy but it worked for me. Perhaps there is a more elegant way to do the same.
I could arrange the fields in several columns without having to make the form extrawide.
When user click on edit button the page navigate to another page, based on Id get the details of a row and you can display the values..
Previous answer of Creating a link in JQGrid solves your problem.
I have a website with several views, and most of them have a jqGrid on them.
I'd like to set some base options on all my jqgrids. For example, I'd like the view option to always be set to true, and the search option to always be set to false.
Additionally, there are several that I'd like to have the same button labels.
Is there any way to do this with a jqGrid?
Look at the answer which shows how to set default settings jQuery.jgrid.nav. In your case it would be
jQuery.extend(jQuery.jgrid.nav,
{search:false,view:true, viewtext:"View label", viewtitle:"View tooltip"}
);
Other default settings you can change in the same way using jQuery.jgrid.del, jQuery.jgrid.view and of course jQuery.jgrid.defaults.
You don't need to place the code inside of jQuery(document).ready(function() {/**/});. It is enough just ecxecute the code like jQuery.extend(jQuery.jgrid.nav, {search:false,view:true}); inside a JavaScript file loaded after the jquery.jqGrid.min.js.
You could add an additional script tag to your HTML that references a JS file with some base configuration stuff for the grid in a $().ready(function() {}); block.
You could also create a base configuration function or variable that you store in that external JS, and reference that configuration on each view page.
I would prefer to write the base function, and not the ready event handler as the ready handler will NOT run at a predictable time. You won't know if it properly ran before your jqGrid configure function ran.
Am having some behaviour I cannot understand why in my jqgrid.My Add , Edit and Delete buttons seem to have interchanged there respective urls.
$("#list").navGrid("#pager",
{add:true,addtext:'Add',edit:true,edittext:'Edit',del:true,deltext:'Delete'},
{top:50,left:"100",width:500,url:'<?php echo $this->baseUrl() ?>/artist/add',closeAfterAdd:'true'},
{top:50,left:"100",width:500,url:'<?php echo $this->baseUrl() ?>/artist/edit',closeAfterEdit:'true'},
{url:'<?php echo $this->baseUrl() ?>/artist/delete',closeAfterAdd:'true'}
);
When I try Add from the interface firebug console shows that am actually Editing.
When I try Edit from the interface firebug console shows that am actually Adding.
Delete seems to be fine.
Are there defaults or something that am missing in my jqgrid?
According to the jqGrid Documentation, the order of parameters is:
jQuery("#grid_id").jqGrid('navGrid','#gridpager',{parameters},
prmEdit, prmAdd, prmDel, prmSearch, prmView);
The problem with your code is that you are passing the Add and Edit parameters in the wrong order. You need to re-order them:
$("#list").navGrid("#pager",
{add:true,addtext:'Add',edit:true,edittext:'Edit',del:true,deltext:'Delete'},
{top:50,left:"100",width:500,url:'baseUrl() ?>/artist/edit',closeAfterEdit:'true'},
{top:50,left:"100",width:500,url:'baseUrl() ?>/artist/add',closeAfterAdd:'true'},
{url:'baseUrl() ?>/artist/delete',closeAfterAdd:'true'}
);