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

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();
}

Related

JqGrid: Autocomplete in form fields

I am using free version (latest) of jqgrid with MVC c#.
I have form fields setup. When the user clicks add in the footer button (add) it shows a modal popup with all the form fields.
I want my first textbox in the form field to autocomplete, ie when they start typing their empployee number in the textbox, I should query my mvc controller and fetch the data and then prefill if there is a match. Once that prefills I also want to update 2 more label on the form, firstname & lastname. Also the button should be disabled until the correct id is fetched in the employee textbox.
Not sure how should I go about this. I can share my sample grid that I have used.
Thanks
<script type="text/javascript">
$(function () {
"use strict";
var $grid = $("#list");
$grid.jqGrid({
url: '#Url.Action("GetData", "Home")',
datatype: "json",
mtype: 'Get',
colNames: ['Id', 'Name', 'Sex', 'Address'],
loadonce: true,
height: '100%',
autowidth: true,
colModel: [
{ name: 'empid', index: 'empid', editable: true, editrules: { required: true}},
{ name: 'fname', index: 'fname', editable: true, editrules: { required: true}}, //currently these are texbox, but I want this to be label which gets filled based on the empid
{ name: 'lname', index: 'lname', editable: true, editrules: { required: true}},
{ name: 'address', index: 'address', editable: true, editrules: { required: true}}
],
cmTemplate: { autoResizable: true, editable: true },
autoResizing: { compact: true, resetWidthOrg: true },
iconSet: "fontAwesome",
rowNum: 10,
rowList: [5, 10, 20, "10000:All"],
viewrecords: true,
autoencode: true,
sortable: true,
pager: true,
rownumbers: true,
sortname: "uid",
sortorder: "desc",
pagerRightWidth: 150,
inlineEditing: {
keys: true
},
formEditing: {
reloadGridOptions: { fromServer: true },
reloadAfterSubmit: true,
width: 310,
closeOnEscape: true,
closeAfterEdit: true,
closeAfterAdd: true,
closeAfterDelete: true,
savekey: [true, 13]
}
caption: "MyData"
}).jqGrid("navGrid")
.editGridRow("new", properties);
});
Updated:
If there is also option to use onkeyup, mouseover etc on the textbox so that I can validate whats entered in the textbox and then also update other textbox based on this value
I have done this by using keyup event instead of using autocomplete.
Relevant code as below:
colModel: [
{
name: 'empid', index: 'empid', editable: true, , editrules: { required: true },
editoptions:
{
dataEvents: [
{
type: 'keyup',
fn: function (e) {
$.ajax({
url: //call to my method in my mvc controller,
data: "empid=" + $(this).val(),
type: "GET",
success: function (data) {
//validate and populate other fields here
}
else {
}
},
error: function (passParams) {
// code here
}
});
}
}
]
}
]

How to rebind JQgrid data after applying search on the existing grid data

I have a customer details where I am showing the customers bill status which is working fine,
Is it possible to rebind the grid once we loaded the data in grid for example:
when I am coming from another page how to apply search on the existing grid data and rebind it to grid.
Below is my colmodel and other properties which I am using but not working properly,
$("#BillDetails").jqGrid({
url: '../Handler.ashx,
datatype: "json",
colNames: [ 'S.No', 'Bill NO', 'Customer Name', 'Customer Type', 'Bill Date',Bill Status'],
colModel: [
{ name: 'SERIAL', sortable: false, search: true, stype: 'text', width: 40, hidden: false,
align: 'right', sorttype: 'int' },
{ name: 'BILL_NO', sortable: false, search: true, width: 80, hidden: false,
align: 'right',formatter: editLink,},
{ name: 'CUSTOMER_NAME', search: true, align: 'left', width: 150, aligh: 'left',
sortable: false },
{ name: 'CHECK_TYPE', align: 'left', width: 150, search: true, aligh: 'left',
sortable: false},
{ name: 'BILL_DATE', width: 85, sortable: false, search: true, align: 'center',
sorttype: 'date', formatter: "date", formatoptions: { newformat: 'd/m/Y' } },
{ name: 'BILL_STATUS', width: 90, align: 'left', search: true, stype: 'select',
searchoptions: { value: 'Pending:Pending;
On Hold:On Hold;Clear:Clear;Incompelete:InComplete,sortable: false } },
],
width: '980',
height: '450',
shrinkToFit: false,
sortable: true,
mtype: 'GET',
scrollbar: true,
sortname: 'BILL_NO',
sortorder: 'asc',
hidegrid: false,
loadonce: true,
ignoreCase: true,
rowNum: 50,
pager: '#Pager',
viewrecords: true,
// Search on page load from grid data
gridComplete: function () {
var searchFilter = "Clear"; // In this I will receive the the status from query string,
//for now i have provided the the hard core value to test
var gridData = $("#jQGridDemo").jqGrid('getGridParam', 'data');
console.log(gridData);
if (searchFilter != "") {
var grid = $("#BillDetails"), f;
f = { rules: [] };
f.rules.push({ field: "STATUS", op: "eq", data: searchFilter });
grid[0].p.search = true;
$("#BillDetails").setGridParam({ data: gridData, postData: { filters: f },
datatype: "local", });
}
}
});
If you want to reload jqGrid when coming from another page with search parameters you could use postData property of jqGrid.
Something like this:
$("#BillDetails").jqGrid({
url: '../Handler.ashx',
datatype: "json",
mtype: 'GET',
postData:
{
Page: 'Dashboard',
strUserID: strUserID,
}
You can populate this property with js or on server side as you need.
UPDATE
You also can use setGridParam method of jqgrid:
$("#BillDetails").jqGrid('setGridParam',
{
postData: {
Page: 'Dashboard',
strUserID: strUserID,
}
});
$("#BillDetails").trigger("reloadGrid");
But as i understand this way you also just add values to postData property.
Also you can try it this way:
$("#BillDetails").trigger('reloadGrid', [{page:1}]);
You can pass there your new params as on grid init.

In jqgrid, How to Edit row using dialog?

How to do edit on popup dialog in jqgrid.
Below is jqgrid stuff. I dont' need inline editing. I want to popup dialog.
To popup dialog, we already have dialog which can be popup.
To achieve this, I need to call - javascript function which can allow to popup dialog.
please guide me how I could call javascript function on click of edit icon ?
$('#CategoriesGrdList').jqGrid({
ajaxGridOptions: {
error: function () {
$('#CategoriesGrdList')[0].grid.hDiv.loading = false;
alert('An error has occurred.');
}
},
url: '#Url.Action("GetAllCategoriesList", "Categories")/' + 0,
gridview: true,
autoencode: true,
postData: { categoryId: 1 },
datatype: 'json',
jsonReader: { root: 'List', page: 'Page', total: 'TotalPages', records: 'TotalCount', repeatitems: false, id: 'Id' },
mtype: 'GET',
colNames: ['Id', 'Code', 'Description', 'IsActive', "actions"],
colModel: [
{ name: 'Id', index: 'Id', hidden: false, key: true },
{ name: 'Code', index: 'Code', width: 170},
{ name: 'Description', index: 'Description', width: 170},
{ name: 'IsActive', index: 'IsActive', width: 170 },
{
name: 'actions', index: 'actions', formatter: 'actions',
formatoptions: {
keys: true,
editbutton: true,
delOptions: { url: '#Url.Action("DeleteCategory", "Categories")' }
}
}
],
pager: $('#CategoriesGrdPager'),
sortname: 'Code',
rowNum: 3,
rowList: [3, 6, 9],
width: '500',
height: '100%',
viewrecords: true,
multiselect: false,
caption: "Categories",
loadComplete: function () {
$("tr.jqgrow:odd").css("background", "#E0E0E0");
},
beforeSelectRow: function (rowid, e) {
return false;
},
sortorder: 'desc'
}).navGrid('#CategoriesGrdPager', { edit: true, add: false, del: false, search: false, refresh: true });
Pleae guide me.
To Make your own Edit actions/buttons in JQGrid, you need to set the default Edit navGrid buttons/actions to false, then add custom buttons to the navigation grid.
Here is an example below - remember to remove the navGrid setup in jqgrid chained functions above:
$('#CategoriesGrdList').jqGrid('navGrid', '#CategoriesGrdPager', { edit: false, add: false, del: false, search: false, refresh: true})
.navButtonAdd('#CategoriesGrdPager', {
title: "Edit",
caption: "Edit",
buttonicon: "ui-icon-pencil", // JQuery UI Icon
onClickButton: function () { /*CALL YOUR FUNCTION HERE*/ },
position: "last" // Position of the button on Nav
})'

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").

Resources