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();
}
Related
All,
I have created a custom button on viewGridRow. See below code snippet. When user clicks on that button I want to show UI dialog and perform some operation and close the window. Within same View window user clicks next row does similar functionality.
I tried adding a id and checked onclick but it doesnt fire. How do I go about adding onclick event on that custom button? Help is appreciated.
$.extend($.jgrid.view, {
bSubmit: "View details",
width: 370,
recreateForm: true,
beforeShowForm: function (form) {
var selRowId = $(this).getGridParam('selrow')
$('<a id="viewBtn" href="#">View Report<span class="ui-icon ui-icon-disk"></span></a>').addClass("fm-button ui-state-default ui-corner-all fm-button-icon-left")
.prependTo("#Act_Buttons>td.EditButton");
}
});
You can change beforeShowForm callback to the following for example:
beforeShowForm: function ($form) {
var $self = $(this);
$('<a id="viewBtn" href="#">View Report<span class="ui-icon ui-icon-disk"></span></a>')
.click(function () {
var selRowId = $self.jqGrid("getGridParam", "selrow");
alert("'View' button on rowid=" + selRowId + " was clicked.");
return false;
})
.addClass("fm-button ui-state-default ui-corner-all fm-button-icon-left")
.insertBefore($form.next(".EditTable").find("#cData"));
}
The demo which uses the code displays
Is there a way to implement 2 different edit form in jqGrid. I mean one normal usual edit form and the other with a much lesser form field (customized). both in the same navGrid. say edit and editpartial. can anyone throw some light?? many thanks.
The buttons "Add" and "Edit" added by navGrid call both editGridRow method with different parameters as the second parameter (properties parameter). In case of usage navGrid called as
$("#grid").jqGrid("navGrid", "#pager", {parameters}, prmEdit, prmAdd);
then navGrid calls
$("#grid").jqGrid("editGridRow", rowid, prmEdit);
if the user click "Edit" button and calls
$("#grid").jqGrid("editGridRow", rowid, prmAdd);
if the user click "Add" button.
In the same way you can add new custom button to navigator with respect of navButtonAdd method. For example
$("#grid").jqGrid("navButtonAdd", "#pager", {
caption: ""/*"My Edit"*/,
buttonicon: "ui-icon-note", // some icon
title: "My edit",
onClickButton: function() {
var $self = $(this);
$self.jqGrid("editGridRow",
$self.jqGrid("getGridParam", "selrow"),
{ // some options
recreateForm: true
}
);
}
});
In the way you add one more Edit button. The only thing which you need do now is temporary changing of editable property of some columns before call of editGridRow and resetting it to original value after call of editGridRow. You can use setColProp method to simplify the work. For example if you want to make myColumn column editable you can use
$("#grid").jqGrid("navButtonAdd", "#pager", {
caption: ""/*"My Edit"*/,
buttonicon: "ui-icon-note", // some icon
title: "My edit",
onClickButton: function() {
var $self = $(this);
// make "myColumn" temporary editable
$self.jqGrid("setColProp", "myColumn", {editable: true});
$self.jqGrid("editGridRow",
$self.jqGrid("getGridParam", "selrow"),
{ // some options
recreateForm: true
}
);
// make "myColumn" back as non-editable
$self.jqGrid("setColProp", "myColumn", {editable: false});
}
});
I want to emphasize that usage of recreateForm: true option for all usage of editGridRow (inclusive navGrid) is very important. So I recommend you just change default value of the option:
$.extend($.jgrid.edit, { recreateForm: true });
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
});
I tried
grid.navGrid("#grid_toppager",{},
{
bSubmit: 'Submit',
editCaption: 'Edit',
title: 'Save changes (Ctrl+S)' } );
but Save changes (Ctrl+S) tooltip does not appear if mouse is over Submit button. how to show tooltip in edit and add form submit buttons ?
There are no title option of navGrid method. There are only options like edittitle or addtitle which are not what you need.
What you need is to set title attribute on the "Submit" button which you have to do directly inside of beforeShowForm for example. See the demo.
If u want to add tooltip on your custom jqgrid buttons then just add title .
.navButtonAdd('#discPgr',{ title:"Add Discount" });
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.