How do you pass dialog options using jqGrid editformbutton property? - jqgrid

I have an "actions" column in my grid and it's set to display the edit dialog when the edit icon is clicked. The form comes up fine, however, there doesn't seem to be a way to pass in options for the dialog box itself. When it comes up, it always has the scroll bars, default button text, etc. I have my ondblClickRow event also pulling up the edit dialog, but it allows me to set the height, width, modal, etc properties of the box. Ideally, I could wire up the ondblClickRow and the edit button click to a function, but that doesn't seem to be an option either.
colModel: [ { name: 'fx',
index: 'fx',
width: 60,
formatter: 'actions',
formatoptions: { editformbutton: true },
sortable: false,
sorttype: 'int',
summaryType: 'count', summaryTpl: '({0}) total' },
ondblClickRow: function(){
var gr = $("#mygrid").jqGrid('getGridParam', 'selrow');
$("#mygrid").jqGrid('editGridRow',
gr,
{height: 200,
width: 500,
modal: true,
resize: false,
reloadAfterSubmit: false,
bSubmit: 'Save',
recreateForm: false
});
}
Any ideas?

You can use formatoptions to specify any options of the editing. If you use formatter: 'actions' with formatoptions: { editformbutton: true } then form editing will be used. All other properties of form editing you can specify by delOptions and editOptions properties of formatoptions. If you starts editGridRow directly with some options I would recommend you to share the same options. The most easy way will be to save the options in a variable and to use it in both cases:
var myEditOptions = {
height: 200,
width: 500,
modal: true,
resize: false,
reloadAfterSubmit: false,
bSubmit: 'Save',
recreateForm: true,
closeAfterAdd: true,
closeAfterEdit: true
},
myDeleteOptions = {
// just an example of delGridRow options
reloadAfterSubmit: false,
closeOnEscape: true
};
$("#gridId").jqGrid({
colModel: [
{ name: 'fx', width: 60, formatter: 'actions', sortable: false,
formatoptions: {
editformbutton: true,
editOptions: myEditOptions,
delOptions: myDeleteOptions
}
},
...
],
...
ondblClickRow: function (rowid) {
$(this).jqGrid('editGridRow', rowid, myEditOptions);
}
});

Related

Hide navgrid buttons depending on the number of records in jqgrid

I need to hide the delete button if there are less than 2 records in the grid. This is the js code. For some reason, the flag showDelCurrencyButton is not working out here and is always false.
Any other way to do it?
showDelCurrencyButton = false;
grid.jqGrid({
datatype: 'local',
jsonReader: jqgrid.jsonReader('CurrCd'),
mtype: 'POST',
pager: '#currencyPager',
colNames: ['Abbrev.', 'Name', 'Symbol'],
colModel: [
{
name: 'CurrCd', index: 'CurrCd', width: 200, sortable: false,
editable: true,
edittype: 'select', stype: 'select',
editrules: { required: true },
editoptions: {
dataUrl: getServerPath() + 'Ajax/GetCurrencies',
buildSelect: function (data) {
var currSelector = $("<select id='selCurr' />");
$(currSelector).append($("<option/>").val('').text('---Select Currency---'));
var currs = JSON.parse(data);
$.each(currs, function () {
var text = this.CurName;
var value = this.CurCode;
$(currSelector).append($("<option />").val(value).text(text));
});
return currSelector;
}
}
},
{ name: 'CurrName', index: 'CurrName', width: 200, sortable: false },
{ name: 'CurrSymbol', index: 'CurrSymbol', width: 200, sortable: false },
],
loadtext: 'Loading...',
caption: "Available Currencies",
scroll: true,
hidegrid: false,
height: 116,
width: 650,
rowNum: 1000,
altRows: true,
altclass: 'gridAltRowClass',
onSelectRow: webview.legalentities.billing.onCurrencySelected,
loadComplete: function (data) {
if (data.length > 1) {
showDelCurrencyButton = true;
}
var rowIds = $('#currencyGrid').jqGrid('getDataIDs');
$("#currencyGrid").jqGrid('setSelection', rowIds[0]);
},
rowNum: 1000
});
grid.jqGrid('navGrid', '#currencyPager', {
edit: false,
del: (showDelCurrencyButton == true),
deltitle: 'Delete record',
search: false,
refresh: false
}
});
Your current code uses datatype: 'local' without specifying data parameter with input data. It seems strange. In any way you can hide the Delete button dynamically identifying it by id. It's "del_" + grid[0].id in your case. Thus you can use $("#del_" + grid[0].id).hide(); to hide it. By the way one can use this instead of grid[0] inside of loadComplete.
I'd recommend you to read the old answer for more details and to read the answer, which shows how to disable/enable navigator buttons (like Delete button) instead of hiding.

change searchoptions in jqgrid toolbar filter with setColProp

I'm using jqGrid 4.4.5 and the toolbar filter.The grid can reloads base on condition(for example inbox or outbox letters).I use select options of a column.I need to change the select options of a 'type' column.For example if the grid show 'inbox letter' Then 'select options' show 'A,B' Otherwise show 'C,D'.
I use this code for create grid:
function creatGrid() {
var inboxSearchOptions = 'A:A;B:B;All:';//inbox Options
var inboxEditOptions = 'A:A;B:B';
var outboxSearchOptions = 'C:C;D:D;ALL:';
var outboxEditOptions = 'C:C;D:D';
grid.jqGrid({
url: 'jqGridHandler.ashx',
datatype: 'json',
width: 100,
height: 200,
colNames: ['Email', 'Subject', 'Type', 'ID'],
colModel: [
{ name: 'Email', width: 100, sortable: false, },
{ name: 'Subject', width: 100, sortable: false, },
{
name: 'Type',
width: 100,
search: true,
formatter: 'select',
edittype: 'select',
editoptions: { value: (($.cookie("calledFrom") == "inbox") ? inboxEditOptions : outboxEditOptions), defaultValue: 'ALL' },
stype: 'select',
searchoptions: { sopt: ['eq', 'ne'], value: (($.cookie("calledFrom") == "inbox") ? inboxSearchOptions : outboxSearchOptions) },
},
{ name: 'ID', width: 100, sortable: false, hidden: true, key: true },
],
rowNum: 20,
loadonce: true,
rowList: [5, 10, 20],
recordpos: "left",
ignoreCase: true,
toppager: true,
viewrecords: true,
multiselect: true,
sortorder: "desc",
scrollOffset: 1,
editurl: 'clientArray',
multiboxonly: true,
jsonReader:
{
repeatitems: false,
},
gridview: true,
}
}
Then i use this code for reload grid:
function doReloadMainGrid() {
switch (($.cookie("calledFrom")) ) {
case "inbox":
{
window.grid.setColProp("Type", {
searchoptions: {
value: inboxSearchOptions,
},
editoptions: {
value: inboxEditOptions
},
});
}
break;
case "outbox":
window.grid.setColProp("Type", {
searchoptions: {
value: outboxSearchOptions,
},
editoptions: {
value: outboxEditOptions
},
});
break;
}
var url = createUrl();
window.grid.setGridParam({ datatype: 'json' });
window.grid.setGridParam({ url: url });
window.grid.trigger("reloadGrid", { current: true });
}
But the 'setColProp' has no effect.I read this answer but it was not a good solution for me.What i got wrong?
Thanks in advance
setColProp don't change existing filter toolbar. If you just get the values from cookie or localStorage than it would be better to do this before the filter toolbar will be created by filterToolbar method.
You can use destroyFilterToolbar to recreate the filter toolbar using new values in colModel. If you have to use old version of jqGrid you can just follow the answer which describe how to add the code destroyFilterToolbar to old version of jqGrid.

Select current value instead of text in a grid with inline editing

By default jqGrid considers the text value to set the selected option in a combo box. How can I add a column for the key value and have jqGrid selecting the right option using the key value?
I've been using the custom formatter, but some pages are displaying undefined when the rows are not editable, and when the inline edit modes is enabled, they display the right option.
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#Grid').jqGrid({
autowidth: true,
datatype: 'json',
height: '100%',
pager: '#pager',
rowNum: 10,
sortname: 'Description',
url: '/AppUrl/Service',
viewrecords: true,
gridComplete: function () { OnGridComplete() },
onSelectRow: function (rowid, status) { grid.EditGridRow(rowid) },
colModel: [
{
name: 'ID',
hidden: true,
key: true,
index: 'ID'
}, {
name: 'ModuleId',
formatter: formatAsDropDown,
label: 'Módulo',
sortable: true,
width: 300,
editable: true,
edittype: 'select',
editoptions: { "value": "1:Modulo 1;2:Modulo 2;3:Modulo 3" },
index: 'ModuleId'
}, {
name: 'Description',
label: 'Description',
sortable: true,
width: 300,
editable: true,
index: 'Description'
}
]
});
function formatAsDropDown(cellvalue, options, rowObject) {
return rowObject.ModuleName;
}
});
</script>

how to add refresh button to jqgrid toolbar?

i am working on jqgrid. i want to add refresh button to jqgrid toolbar to refresh the grid.
here is my js code:
jQuery(document).ready(function () {
var grid = jQuery("#gridemp");
grid.jqGrid({
url: '/Admin/GetTimeInOut_ForAdmin',
datatype: 'json',
mtype: 'Post',
height: '100%',
multipleSearch: false,
rownumbers: true,
//formatCell: emptyText,
colNames: ['User', 'Date', 'TimeIn', 'TimeOut'],
colModel: [
{ name: 'User', index: 'User', align: "center", sorttype: 'text', resizable: true, editable: false },
{ name: 'Date', index: 'Date', align: "center", sorttype: 'text', resizable: true, editable: false, searchoptions: { dataInit: function (el) { $(el).datepicker({ dateFormat: 'mm/dd/yy' }).change(function () { $('#gridemp')[0].triggerToolbar(); }); } } },
{ name: 'TimeIn', index: 'TimeIn', align: "center", sorttype: 'text', resizable: true, editable: false },
{ name: 'TimeOut', index: 'TimeOut', align: "center", sort:false, resizable: true, editable: false }
],
//shrinkToFit: true,
// loadonce: false,
//ignoreCase: true,
width: '690',
pager: '#emppager',
caption: 'Employee Time IN/OUT',
rowNum: 10,
rowList: [10, 20, 50, 100],
viewrecords: true,
hidegrid: false,
}
);
grid.jqGrid('filterToolbar',{ stringResult: true, searchOnEnter: true, defaultSearch: 'cn' });
grid.jqGrid('navGrid', '#emppager',
{ resize: false, add: false, search: false, del: false, refresh: false, edit: false, alerttext: 'Please select one user' }
).jqGrid('navButtonAdd', '#pager');
});
actually i need 2 refresh buttons one for to clear the search bar text boxes without refreshing the jqgrid, and one for refreshing the whole grid. i will mark your answer if it works for me. thanks in advance. happy coding :), if you the question is not clear please comment i will explain.
First of all it seems your code contains typing error: you use pager: '#emppager' during creating grid, in navGrid but not in navButtonAdd.
To add "standard" reload button which reset filter toolbar and reload the grid you need just remove refresh: false option.
To add custom clear filter you need call navButtonAdd in the way like below
.jqGrid("navButtonAdd", "#emppager", {
caption: "", // no text near the button
title: "Clear filters in toolbar without reloading of data",
buttonicon: "ui-icon-close", // an example of icon
onClickButton: function () {
this.clearToolbar(false); // don't reload grid
}
});
You can change icon used by Refresh button by usage refreshicon option (at the same place where you specify del, refresh, alerttext etc). Default value is refreshicon: "ui-icon-refresh". Moreover you can consider to use refreshstate: "current" (default is refreshstate: "firstpage").

Hide column in jqGrid display but show it in edit/add screen?

In my jqGrid I want to pass in 5 rows from my model and display 3 of them in the grid but have all 5 show up in the edit and add popup window that jqGrid generates. I know I can add the hidden: true attribute in the colModel settings to prevent it from showing up but this also hides it from the popup window. Is there some way of hiding columns from the grid but show it when adding or editing data?
My Grid code:
<script type="text/javascript">
$( document ).ready( function ()
{
$( '#Sections' ).jqGrid( {
url: '#Url.Action("GetData")',
datatype: 'json',
mtype: 'GET',
colNames: ['ID', 'RouteName', 'Title', 'File', 'Description'],
colModel: [
{ name: 'ID', index: 'ID', width: 10, sorttype: 'int' },
{ name: 'RouteName', index: 'RouteName', width: 50, editable: true, edittype: 'text'},
{ name: 'Title', index: 'Title' },
{ name: 'File', index: 'File', hidden: true },
{ name: 'Description', index: 'Description', hidden: true }
],
autowidth: true,
height: '100%',
pager: $( '#SectionsPager' ),
sortname: 'ID',
viewrecords: true,
loadonce: true,
ignoreCase: true,
multiSort: true,
} );
$( '#Sections' ).jqGrid( 'navGrid', '#SectionsPager',
//enabling buttons
{ add: true, del: false, edit: true, search: true },
//add options
{ width: 'auto' },
//edit options
{ width: 'auto' },
//delete options
{}
);
} );
</script>
Via Oleg's answer at
Sending additional parameters to editurl on JQgrid
hidden: true, editable: true, editrules: { edithidden: true}, hidedlg: true
The editrules: { edithidden: true} section will "turn on" your column when editing.
u can use beforeShowForm in your add/edit and make it hidden or not
beforeShowForm: function(form) {
$("#tr_columnname").hide();
$("#tr_columnname").show();
}

Resources