I'm using jqGrid jqGrid 4.14.2-pre
How to hide or show buttons depending on the condition
Not using css
loadComplete:function(data)
{
if(data.records > 100)
{
$('#grid').jqGrid('navGrid','#pager');
// hide $('#grid').jqGrid('inlineNav','#pager'); ?
}
else
{
$('#grid').jqGrid('inlineNav','#pager');
// hide $('#grid').jqGrid('navGrid','#pager'); ?
}
}
I'd recommend you to call both navGrid and inlineNav, but to hide unneeded buttons identifying there by id. You should just know simple rule how the ids will be build. jqGrid uses prefix build on the navigator button ("add_", "edit_", "refresh_", ...) and the grid id ("grid" in your case). See the old answer for more details. The method inlineNav do the same, but the ids of buttons will be build base on another rule: the grid id and the suffix "_iladd" (for Add button), "_iledit" (for Edit button), "_ilsave" (for Save button) and "_ilcancel" (for Cancel button).
Let us you have grid with id="grid". To hide Add button added by navGrid you can use $("#add_grid").hide();. To hide inlineNav Add button you can use $("#grid_iladd").hide();.
Related
I have grid, with inline edit function. When I click to Add Record button, new editable row is displays. When i click on edit button in another row, the add row is cenceled and I must click again on edit button.
So, I must click twice on edit button if I befere clicked to Add Record button. It is possible to edit row in one click maybe in Grid Edit event ?
#(Html.Kendo().Grid<TT.Web.Models.ViewModel.WorkViewModel>()
.Name("gridAdd")
.Events(events => events.Edit("gridEdit").DataBound("databoundinitAdd").Save("gridAddSaveChanges"))
Maybe:
function gridEdit(e){
$(".k-grid-cancel").click(); // remove ADD record ROW (no work)..
Thanks
The only solution that I can think of currently is to define custom buttons with custom "click" event handlers for the "cancel", "update" and "edit" commands. For your convenience I created small example which you can use as baseline to achieve the desired behavior:
http://dojo.telerik.com/EqOmU/3
Hide and show Add and Cancel button programmatically in JQGrid
You can make Add and Cancel button hidden of visible in the same way like any other elements on the HTML page. You can use jQuery.show, jQuery.hide or jQuery.css with "display", "none" or "display", "" parameters. Thus the only thing which you need is to get DOM elements which represent the buttons. You can get the elements by id for example.
jqGrid assigns ids to all standard buttons. The ids of buttons added by inlineNav will be build from grid id as prefix and strings "_iladd" (for Add button), "_iledit" (for Edit button), "_ilsave" (for Save button) and "_ilcancel" (for Cancel button). So if you have the grid with id="mygrid" then $("#mygrid_iladd").hide() can be used to hide the Add button and $("#mygrid_ilcancel").hide() to hide the Cancel button. To hide both buttons you can use $("#mygrid_iladd,#mygrid_ilcancel").hide().
So the default behavior for the edit button inside each row of jqGrid is to open the form in the same page, right?
I need it to open another view, another URL.
I've managed to do this with the edit button that is located in the grid-pager, using the .navButtonAdd method. But I can't figure out how to do the same for the row buttons.
Can anyone help me, please?
jqGrid don't provide currently any simple way to replace the call of editing to another method or to include custom button. What you can do alternatively is "subclassing" $.fn.fmatter.rowactions function like I describe it in the answer. The $.fn.fmatter.rowactions function will be called on click on any from action buttons. So you can test whether the act parameter is "edit" or not. In case of non "edit" button you can forward the call to original $.fn.fmatter.rowactions function. In case of "edit" button you can do any your custom action instead.
UPDATED: The exact implementation depends a little from the version of jqGrid which you use because parameters and the value of this of the function $.fn.fmatter.rowactions are different for different versions of jqGrid. I created for you the demo which uses free jqGrid 4.8 (see readme and wiki). I used the following code for subclassing
var orgRowActions = $.fn.fmatter.rowactions;
$.fn.fmatter.rowactions = function (e, act) {
var $grid = $(this).closest("table.ui-jqgrid-btable"),
rowid = $(this).closest("tr.jqgrow").attr("id");
if (act === "edit") {
$grid.jqGrid("viewGridRow", rowid);
return false;
}
return orgRowActions.call(this, e, act);
}
As the result the "Edit" button starts "View" instead of edit form.
I plan to include more customization possibilities in the next version of free jqGrid. So one will be able to create custom inline icon without the tricks with subclassing.
I'm using jqGrid verison 4.5.0 and I noticed by default, the pop-up single field search dialog doesn't look like this:
Is there a way to move "+" button to the right of "-" button and move match-rule dropdown to the bottom, both of them to look like this snapshot? We like it this way as it is less messy to some of our customers.
Many thanks..
JQuery v2.0
JQuery-UI v1.10.3
jqGRID v4.5.0
$('#Spreadsheet').navGrid('#Pager',
{edit:false,add:false,del:false,search:true,view:false,refresh:false},
{}, {}, {},
{multipleSearch:true,multipleGroup:true,closeOnEscape:true,closeAfterSearch:true,
searchOnEnter:true,showQuery:false,width:800,caption:"Search Records"
},
{}
After some discussion in the comment we clarified that the The searching dialog are used with options multipleSearch: true, but without multipleGroup: true. The goal is the hiding of the dropdown which allows the user to choose between "All/Any".
In the answer I showed how one can use afterRedraw to change Searching Dialog.
The demo displays the dialog in the form
It uses the following afterRedraw
afterRedraw: function () {
$("input.add-rule", this)
.button() // use jQuery UI button
.val("Add rule"); // change text of "+" button
$("input.delete-rule", this).button(); // use jQuery UI button
$("select.opsel", this).hide();
}
Only the last line ($("select.opsel", this).hide()) is really important. Other lines just improve a little the look of the Searching Dialog.
I need help with jQuery jqGrid and subgrid.
I am able to create a Subgrid inside my jqGrid succesfully. The next step is to add a custom option list in the main grid navbar somewhere so that depending on which option the user selects, a different kind of subgrid opens.
Is it possible to add custom options to the jqGrid navigation bar?
The only standard way to add custom element in the navBar is to use navButtonAdd method which add a button.
If you want to add another custom HTML elements you have to do this manually with respect of some jQuery function like jQuery.append. I recommend you to read the code of navSeparatorAdd and navButtonAdd functions.