I want to write code on Refresh button click of JQGrid. Is there any event for that?
If you need to do some actions before refresh will be started you should use beforeRefresh callback:
$("#grid_id").jqGrid('navGrid', '#gridpager', {
beforeRefresh: function () {
// some code here
}
});
If you need absolute another implementation of grid Refreshing where you will not call $("#grid_id").trigger("reloadGrid"); (which sound strange) you can do this by the usage of refresh: false option to remove the standard Refresh button and using navButtonAdd to add your custom button which looks exactly like the original one:
$("#grid_id").jqGrid('navGrid', '#gridpager', {refresh: false});
$("#grid_id").jqGrid('navButtonAdd', "#gridpager", {
caption: "", title: "Reload Grid", buttonicon: "ui-icon-refresh",
onClickButton: function () {
alert('"Refresh" button is clicked!');
}
});
The css for refresh button is ui-icon-refresh
so you can write your custom code on this css like
jQuery('.ui-icon-refresh').click(function(){
// do your work
});
Related
I'm using the Cytoscape Qtip extension to display qtips when you click nodes.
Usually you can prevent qtips from hiding when with the hide: false option. When this is used, you can still hide the qtips if it has a button.
However, when using cytoscape, this appears to not work. When clicking else where, a hide event will be triggered.
cy.elements().qtip({
content: function(event, api){
api.set('content.button', true);
return 'Example qTip on ele ' + this.id();
},
position: {
my: 'top center',
at: 'bottom center'
},
hide: false,
style: {
classes: 'qtip-bootstrap',
tip: {
width: 16,
height: 8
}
}
events: {
hide: function(event, api){
console.log(event);
}
}
});
I can prevent the hide event from following through with event.preventDefault(), but this will also stop the the close button from hiding the event, which is a bit messy.
Any idea while it's behaving this way?
Here's the quick and dirty to make this work (closes on button close only) if you need it:
events:{
hide: function(event, api){
if(event.originalEvent.target.parentElement.parentElement.id != this[0].id){
event.preventDefault();
}
}
Explanation:
Any mouse clicks will trigger a hide event all visible qtips.
We look at target of that mouse click (event.originalEvent.target.parentElement.parentElement.id) to see it close box of the qtip that is currently try to close. If it's not then we preventDefault().
This is potentially pretty bed performance wise, because it run these preventDefault() for every open qtip on every mouse click.
Remember that because this wraps Qtip on non-DOM elements, bindings to Cytoscape graph elements must be made. These bindings are outside of the DOM and outside of Qtip's control (for example, the hide case).
Did you try setting the hide event to the empty string ""?
Cleanest solution I've found is to give a garbage event for the hide event.
Using null, false or "" all don't seem to work.
hide: {
event: "asdf" //garbage event to allow hiding on close button click only
},
I need to clear the toolbar without reloading the grid in my jqgrid. It should just reset the toolbar to its default values.
I tried using,
$("#TransactionsGrid")[0].clearToolbar();
My grid datatype:local and i don't use loadonce:true.
This made the toolbar clear and refresh the grid. I dont want that to happen.
Any ideas?
I find the question interesting.
To implement the requirement I suggest to use register jqGridToolbarBeforeClear to execute the handler only once. The handler should 1) unregister itself as the event handler and return "stop" to prevent reloading of the grid:
$grid.jqGrid("filterToolbar", { defaultSearch: "cn" });
$("#clearToolbar").button().click(function () {
var myStopReload = function () {
$grid.unbind("jqGridToolbarBeforeClear", myStopReload);
return "stop"; // stop reload
};
$grid.bind("jqGridToolbarBeforeClear", myStopReload);
if ($grid[0].ftoolbar) {
$grid[0].clearToolbar();
}
});
The corresponding demo shows it live.
jqGrid Edit form invoked using Edit button from top toolbar is defined as
grid.navGrid("#grid_toppager", { del: false,add: false,view: true },
{ url: '/Edit',
bSubmit: 'Save',
editCaption: 'Change',
} );
This is used to show data in readonly grid. Pressing submit button does not make sence in this case.
How to remove submit button ?
You can hide Submit button the in the beforeShowForm of the edit form options:
beforeShowForm: function ($form) {
$form.parent().find('#sData').hide();
}
i've added custom button on the footer of jqgrid for adding record. The code is as under:
$("#jqgUsers").navGrid('#jqgpUsers', { edit: false, add: false, del: false, search: false })
.navButtonAdd('#jqgpUsers', {
caption: "",
buttonicon: "ui-icon-plus",
onClickButton: function () {
alert("Adding Row");
},
position: "last"
});
How can I open jqGrid add form while click on that add button?
You should just call the editGridRow manually with "new" as the first parameter (see here the documentation)
$(this).jqGrid("editGridRow", "new");
or with any properties or events like for example
$(this).jqGrid("editGridRow", "new", {recreateForm: true, closeAfterAdd: true});
I'm adding an additional answer because I have a different scenario with a beforeShowForm event defined in my pager. In order to make sure the add row settings and events in my pager definition are used when the add row dialogue is opened with a custom button click I called
`$('#add_' + your_grid_name_here).click();`
Which will make sure your grid's pager settings are used. It's works the same as if the user pressed the '+' button in the pager.
I have a main menu and one of its options has an accordion effect on toggle with the following script:
$(document).ready(function(){
$(function(){
$("#accordion").accordion({
active: false,
autoHeight: false,
collapsible: true
});
});
});
When one of its sub-options is selected I add an active class with this:
jQuery.fn.slideFadeToggle = function(speed, easing, callback){
return this.animate({opacity: 'toggle', width: 'toggle'}, speed, easing, callback);
};
$(document).ready(function(){
$("#subNavUs").hide();
$("#us").click(function () {
$("#subNavSys").hide();
$("#subNavApp").hide();
$("#subNavAcc").hide();
$("#subNavUs").slideFadeToggle(800);
$('*').removeClass('active');
$(this).addClass('active');
return true;
});
$("#subNavSys").hide();
$("#sys").click(function () {
$("#subNavUs").hide();
$("#subNavApp").hide();
$("#subNavAcc").hide();
$("#subNavSys").slideFadeToggle(800);
$('*').removeClass('active');
$(this).addClass('active');
return true;
});
And this triggers a sub-menu, but when I select any of this new sub-menu's options to load a new page both the accordion menu and the sub-menu are back hidden. How can I make them stay open and show the active class I want to assign them?
Just added "navigation: true" to the accordion function. It was a beginner's mistake but I finally got it to work :)
I post it in case someone might have the same issue.