Related
I need to show an empty grid with no pagination and display a message "You have no records found" if empty results in jqGrid.i'm pretty new to this jqgrid.
I have added the code as below. Please Find the Oleg Demo1, Demo2
$(function () {
var $grid = $("#oversight-sample"),
//mydata = [{actions: "a", url: "http://stackoverflow.com/q/24609566/315935", created: "7/7/2014"}];
mydata = [];
emptyMsgDiv = $("<div><span style='color:red;font-size:24px'>You have no records found</span></div>");
$grid.jqGrid({
//autowidth: true,
caption: "Evaluated URLs",
colNames: ["Actions", "URL", "Fetch Date"],
colModel: [
{ name: "actions", align: "center", title: false, width: 60, resizable: false, sortable: false },
{ name: "url", width: 400 },
{ name: "created", align: "center", width: 125, sorttype: "date" }
],
data: mydata,
datatype: "local",
emptyrecords: "0 records found",
localReader: {
page: function (obj) {
return (obj.page === 0 || obj.page === undefined) ? "0" : obj.page;
}
},
loadComplete: function () {
var ts = this;
if (ts.p.reccount === 0) {
$(this).hide();
emptyMsgDiv.show();
} else {
$(this).show();
emptyMsgDiv.hide();
}
},
height: "auto",
sortname: "created",
toppager: true,
pager: "#url-pager",
viewrecords: true
});
// place div with empty message insde of bdiv
emptyMsgDiv.insertAfter($grid.parent());
});
<table id="oversight-sample"><tbody><tr><td></td></tr></tbody></table>
<div id="url-pager"></div>
Here is the link to fiddler with the 'No records found' message. I hope it will give you an idea on how to create a basic jqgrid and what library references are required.
https://jsfiddle.net/99x50s2s/2/
<table id="sg1"></table>
<div id="psg1"></div>
jQuery("#sg1").jqGrid({
datatype: "local",
gridview: true,
loadonce: true,
shrinkToFit: false,
autoencode: true,
height: 'auto',
viewrecords: true,
sortorder: "desc",
scrollrows: true,
loadui: 'disable',
emptyrecords: 'No records found',
pager: '#psg1',
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'name',index:'name', width:80},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
caption: "Test Grid"
});
var mydata = [];//pass empty data
for(var i=0;i<=mydata.length;i++)
jQuery("#sg1").jqGrid('addRowData',i+1,mydata[i]);
I want to show/hide columns after the grid is rendered. Before i moved to the new ui-grid
I called to toggleVisible() but now it doesn't seem to work.
I tried to change the column def visibility(or any other property) like bellow
columnDefs[9].visible = false;
When I set the visibility on the column definition(before render) it does work, but after wards i cannot change it.
Old question, but this works for me in 3.0.0-rc.20. I'm guessing columnDefs needs to be in scope.
$scope.columnDefs = [
{ name: 'one' },
{ name: 'two', visible: false }
];
$scope.grid = {
data: 'data',
columnDefs: $scope.columnDefs
};
$scope.grid.onRegisterApi = function(gridApi){
$scope.gridApi = gridApi;
};
$scope.showColumnTwo = function() {
$scope.columnDefs[1].visible = true;
$scope.gridApi.grid.refresh();
};
Just started working with angular-ui-grid so this might be not the best solution.
Try including the uiGrid api object and then invoking the refersh method on a grid object
...
$scope.gridOptions.onRegisterApi = function(gridApi){
$scope.gridApi = gridApi;
};
....
columnDefs[9].visible = false;
$scope.gridApi.grid.refresh();
In case anyone was looking for a solution that didn't require you to create a columndDef.
s.gridOptions = {
data: 'myData',
onRegisterApi: function(gridApi) {
gridApi.core.registerColumnsProcessor(hideIdColumn);
s.gridApi = gridApi;
function hideIdColumn(columns){
columns.forEach(function(column){
if(column.field==='_id'){
column.visible=false;
}
});
return columns;
}
}
Just replace the column.field==='_id' part with your own condition.
Also don't forget to return the columns or you will not get any columns at all.
The answer from user3310980 was preferred when I saw it but there is very little documentation on the registerColumnsProcessor method. I found reference to his comment about using it without column definitions so I wanted to make it clear that you can certainly use this method with column defs. This provides for some interesting flexibility.
In this example, there are four columns that swap with four other columns determined by a toggle button. $ctrl.showDetails is true when sales columns should display and false when payment items should display.
In the column definitions, the onRefresh property is defined as a method to call for the column on grid refresh and the setVisibleColumns method is supplied to registerColumnsProcessor(). When the grid is refreshed, for each column, it will check the column definition in the colDef property and call the onRefresh method for each column that defines it, with this set to the column object.
/*--------------------------------------------*/
/* showPayments - Make payment items visible. */
/* showDetails - Make sales items visible. */
/*--------------------------------------------*/
var showPayments = function() { this.visible = !$ctrl.showDetails; };
var showDetails = function() { this.visible = $ctrl.showDetails; };
var columnDefs =
[
{ field: 'receiptDate', displayName: 'Date', width: 120, type: 'date', cellFilter: "date:'MM/dd/yyyy'", filterCellFiltered: true },
{ field: 'receiptNumber', displayName: 'Rcpt No', width: 60, type: 'number' },
{ field: 'receiptFrom', displayName: 'From', width: 185, type: 'string' },
{ field: 'paymentMethod', displayName: 'Method', width: 60, type: 'string', onRefresh: showPayments },
{ field: 'checkNumber', displayName: 'No', width: 60, type: 'string', onRefresh: showPayments },
{ field: 'checkName', displayName: 'Name', width: 185, type: 'string', onRefresh: showPayments },
{ field: 'paymentAmount', displayName: 'Amount', width: 70, type: 'string', onRefresh: showPayments },
{ field: 'description', displayName: 'Desc', width: 100, type: 'string', onRefresh: showDetails },
{ field: 'accountNumber', displayName: 'Acct No', width: 80, type: 'string', onRefresh: showDetails },
{ field: 'accountName', displayName: 'Acct Name', width: 160, type: 'string', onRefresh: showDetails },
{ field: 'salesTotal', displayName: 'Amount', width: 70, type: 'string', onRefresh: showDetails }
];
/*----------------------------------------------------*/
/* Columns processor method called on grid refresh to */
/* call onRefresh' method for each column if defined. */
/*----------------------------------------------------*/
var setVisibleColumns = function(cols)
{
for (var i=0; i < cols.length; i++)
if (cols[i].colDef.onRefresh)
cols[i].colDef.onRefresh.call(cols[i]);
return cols;
};
/*----------------------------------*/
/* Callback to set grid API in */
/* scope and add columns processor. */
/*----------------------------------*/
var onRegisterApi = function(api)
{
$ctrl.itemList.api = api;
api.core.registerColumnsProcessor(setVisibleColumns);
};
/*------------------------------*/
/* Configure receipt item grid. */
/*------------------------------*/
$ctrl.showDetails = false;
$ctrl.itemList =
{
columnDefs: columnDefs,
enableCellEdit: false,
enableColumnMenus: false,
enableFiltering: false,
enableHorizontalScrollbar: uiGridConstants.scrollbars.WHEN_NEEDED,
enableVerticalScrollbar: uiGridConstants.scrollbars.WHEN_NEEDED,
data: [],
onRegisterApi: onRegisterApi
};
When $ctrl.showDetails is changed, a simple refresh will swap the columns.
$ctrl.showDetails = !$ctrl.showDetails;
$ctrl.itemList.api.grid.refresh();
I hope this is helpful to someone.
I need inline image buttons for EDIT and DELETE functionality.
But, I don't need default inline editing or inbuilt dialog popup as , my design is as follow.
add/edit form is appear first and then, below that section, - grid is appearing.
On click of - row inline "Edit" image button , need to populate row data on above form.
To achieve this, on click of edit image button, I need to have javascript function call along with row data object.
How to achieve this ? Can any one share me the column code and function which can allow me to achieve this ?
Below is jqgrid stuff:
$('#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: true, 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: false,
delOptions: { url: '#Url.Action("DeleteCategory", "Categories")' }
}
}
],
pager: $('#CategoriesGrdPager'),
sortname: 'Code',
rowNum: 3,
rowList: [3, 6, 9],
width: '725',
height: '100%',
viewrecords: true,
beforeSelectRow: function (rowid, e) {
return true;
},
sortorder: 'desc'
}).navGrid('#CategoriesGrdPager', { edit: false, add: false, del: false, search: false, refresh: true });
You could add custom icons to the actions column of each line on gridComplete. See example below.
$('#CategoriesGrdList').jqGrid({
...
sortorder: 'desc',
gridComplete: function () {
var ids = $("#CategoriesGrdList").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var id = ids[i];
var editIcon = "<div style='float: left;' class='ui-pg-div' onclick='myEditRow(\"" + id + "\");'><a class='ui-icon ui-icon-pencil'></a></div>";
var deleteIcon = "<div style='float: left;' class='ui-pg-div' onclick='myDeleteRow(\"" + id + "\");'><a class='ui-icon ui-icon-trash'></a></div>";
$("#gridDocs").jqGrid('setRowData', ids[i], { actions: editIcon + deleteIcon });
}
}
}).navGrid('#CategoriesGrdPager', { edit: false, add: false, del: false, search: false, refresh: true });
function myEditRow(rowId) {
var rowData = $("#CategoriesGrdList").jqGrid('getRowData', id);
//do something with the data i.e.
$('#nameEditInput').val(rowData.Code);
}
function myDeleteRow(rowId) {
//your delete code...
$("#" + id).hide();
}
I have an asp.net MVC3 app with various bits of form data and a jqGrid.
When I edit a row in the jqGrid I need to post the grid data as well as some of the form pieces to the editUrl controller.
I can post the jqGrid edited data to my controller through the editUrl just fine.
Is there a way to do this?
Im not sure how to send the other form elements and how to receive them in my controller.
Any help will be greatly appreciated.
Below is my jqGrid:
$("#jqTable").jqGrid({
// Ajax related configurations
url: '#Url.Action("_CustomBinding")',
datatype: "json",
mtype: "POST",
postData: {
programID: function () { return $("#ProgramID option:selected").val(); },
buildID: function () { return $('#Builds option:selected').val(); }
},
// Specify the column names
colNames: ["Actions", "Assembly ID", "Assembly Name", "Assembly Type", "Cost", "Order", "Budget Report", "Partner Request", "Display"],
// Configure the columns
colModel: [
{ name: 'myac', width: 80, fixed: true, sortable: false, resize: false, formatter: 'actions', formatoptions: { keys: true} },
{ name: "AssemblyID", key: true, index: "AssemblyID", width: 40, align: "left", editable: false },
{ name: "AssemblyName", index: "AssemblyName", width: 100, align: "left", editable: true, edittype: 'select',
editoptions: {
dataUrl: '#Url.Action("_Assemblies")',
buildSelect: function (data) {
var response = jQuery.parseJSON(data);
var s = '<select>';
if (response && response.length) {
for (var i = 0, l = response.length; i < l; i++) {
var ri = response[i];
s += '<option value="' + ri + '">' + ri + '</option>';
}
}
return s + "</select>";
}
}
},
{ name: "AssemblyTypeName", index: "AssemblyTypeName", width: 100, align: "left", editable: false, edittype: 'select' },
{ name: "AssemblyCost", index: "AssemblyCost", width: 50, align: "left", formatter: "currency", editable: true },
{ name: "AssemblyOrder", index: "AssemblyOrder", width: 50, align: "left", editable: true },
{ name: "AddToBudgetReport", index: "AddToBudgetReport", width: 100, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox' },
{ name: "AddToPartnerRequest", index: "AddToPartnerRequest", width: 100, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox' },
{ name: "Show", index: "Show", width: 50, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox'}],
// Grid total width and height and formatting
//width: 650,
//height: 220,
altrows: true,
// Paging
//toppager: true,
pager: $("#jqTablePager"),
rowNum: 10,
rowList: [10, 20, 30],
viewrecords: true, // Specify if "total number of records" is displayed
emptyrecords: 'No records to display',
// Default sorting
sortname: "AssemblyID",
sortorder: "asc",
// Grid caption
caption: "Build Template",
// grid command functionality
editurl: '#Url.Action("_AjaxUpdate")',
onSelectRow: function (AssemblyID) {
if (AssemblyID && AssemblyID !== lastsel) {
$('#jqTable').jqGrid('restoreRow', lastsel);
$("#jqTable").jqGrid('editRow', AssemblyID, true);
lastsel = AssemblyID;
}
}
}).navGrid("#jqTablePager",
{ refresh: false, add: false, edit: false, del: false },
{}, // settings for edit
{}, // settings for add
{}, // settings for delete
{sopt: ["cn"]} // Search options. Some options can be set on column level
);
You can customize what is being sent to the server using onclickSubmit option:
.navGrid("#jqTablePager",
{ refresh: false, add: false, edit: false, del: false },
{ // settings for edit
onclickSubmit: function(params, postdata)
{
postdata.extraParam = 'value'
}
},
{}, // settings for add
{}, // settings for delete
{sopt: ["cn"]} // Search options. Some options can be set on column level
);
The controller will receive a JSON object containing all edited properties + extraParam. It is up to you how you handle this on the server side.
I see you use already programID and buildID properties defined as functions. The functions will be called during every request to get the data for the grid. In the same way you can use inlineData or extraparam parameter of the editRow which you call explicitly inside of your onSelectRow callback.
Try to call the demo which has the following jqGrid options:
inlineData: {
myParam: function () {
alert("inlineData is calling!!!");
return "OK";
}
},
onSelectRow: function (id) {
if (id && id !== lastSel) {
$(this).jqGrid('restoreRow', lastSel);
$(this).jqGrid('editRow', id, true, null, null, null, {
myNextParam: function () {
alert("extraparam of 'editRow' is calling!!!");
return "Fine";
}
});
lastSel = id;
}
}
You will see two alerts if you would save the data of the editing row. In my demo I used editurl: 'myDummyUrl' which has no code on the server side and you will see an error at the end, but if you examine the HTTP traffic (with respect of Fiddler or Firebug) you will see that the following additional parameters will be send to the editurl:
myParam=OK&myNextParam=Fine
I think it is what you need.
inlineData:{}
is working fine for getting work before goes to controller while editing.
But in case of delete how to get event like before to pass control to controller to make json , after click on delete.
I’ve been able to add a datepicker into the filter toolbar of a jqgrid with the code below. However, I’m wondering if there’s a way to squeeze two datepickers into this single DateCreated column, so as to specify the range (From, To). Any ideas?
function loadGrid() {
$(tableID).jqGrid({
…
colModel: [
…
{ name: 'DateCreated', index: 'DateCreated', width: 125, searchoptions:{dataInit:datePick, att:{title:'Select Date'}} },
…
})
…
}
datePick = function(elem) {
$(elem).datepicker();
}
If you are open to adding in a plugin, I found the range picker from filament group to be very easy to work with. In under an hour, I had the 3 files downloaded and installed into my project, and the range picker working.
link:filament group daterangepicker
Being that I'm using jquery 1.8 in my project, I ended up getting an updated version from
link:Github filament group daterangepicker jquery 1.8
daterangepicker is also able to take all of the options that datepicker supports, so you shouldn't have much trouble converting. Let me know if you have questions and I'll see if I can help.
For reference, the plugin is dual licensed with MIT and GPL. This is the same license structure as jqgrid, so I assume if you are able to use jqgrid, than this plugin should not be a problem.
UPDATE: Adding Code Example
The important part of this code is in the colModel for date. You simply specify a dataInit function for the search options, then add the daterangepicker. Be careful on the capitalization. That got me more than once. The beforeSelectRow is simply some modification I did in order to make my checkboxes along the side behave as a radio button. It is not needed for daterangepicker to work.
$("#myGrid").jqGrid(
{
url:url,
datatype: "json",
colNames:['Version','Date'],
colModel:[
{name:'version', search:true, stype:'text'},
{name:'date', search:true,stype:"text",searchoptions:{dataInit:function(el){
$(el).daterangepicker({dateFormat:'yy/mm/dd'});
}
}}
],
toolbarfilter: true,
sortname: 'version',
sortorder: "desc",
pager: jQuery('#myPager'),
viewrecords: true,
gridview: true,
multiselect: true,
beforeSelectRow: function(rowId)
{
var selectedIds = jQuery('#myGrid').jqGrid().getGridParam("selarrrow");
jQuery("#myGrid").jqGrid().resetSelection();
if(selectedIds)
{
var id = selectedIds[0]
if(id != rowId)
{
jQuery("#myGrid").jqGrid().setSelection(rowId, false);
}
}
else
{
jQuery("#myGrid").jqGrid().setSelection(rowId, false);
}
}
});
I had to do the very same thing, and Joseph's answer above got me 90% of the way there. So, most of the credit is due to him. I had to modify some stuff to get it to work because the filament date range picker allows for single dates (the today option, the specific date option, etc). I also had to add some code to trigger the search after you selected your date. Here's my update...the meat of what I needed to add was in the beginRequest function:
$(document).ready(function() {
var grid = jQuery('#list').jqGrid({
url: '/myajaxurl',
datatype: 'json',
mtype: 'GET',
colNames: ['Reference #', 'CreatedOn', 'Product', 'Model Number', 'Quantity', 'Transaction Type', 'Created By'],
colModel: [
{ name: 'InventoryTransactionLogId', index: 'InventoryTransactionLogId', align: 'center', sortable: true, search: false },
{
name: 'CreatedOn',
search: true,
stype: 'text',
align: 'center',
formatter: 'date',
formatoptions: { newformat: 'm-d-y H:i' },
sortable: true,
searchoptions: {
dataInit: function(el) {
$(el).daterangepicker({ dateFormat: 'yy/mm/dd', onChange: datePick });
}
}
},
{ name: 'ProductName', index: 'ProductName', align: 'center', sortable: true, search: false },
{ name: 'ModelNo', index: 'ModelNo', align: 'center', sortable: true, search: true },
{ name: 'Quantity', index: 'Quantity', align: 'center', sortable: true, search: false },
{ name: 'Description', index: 'Description', align: 'center', sortable: true, search: false },
{ name: 'UserName', index: 'UserName', align: 'center', sortable: true, search: false }
],
loadtext: "Retrieving Inventory Transaction Log...",
rowNum: 50,
rowList: [25, 50, 100],
sortname: 'InventoryTransactionLogId',
sortorder: 'asc',
pager: '#pager',
ignoreCase: true,
viewrecords: true,
height: 450,
autowidth: true,
scrollOffset: 45,
caption: 'Inventory Transaction Log',
emptyrecords: "No records",
jsonReader: {
root: 'rows',
page: 'page',
total: 'total',
records: 'records',
repeatitems: false,
cell: 'cell',
id: 'InventoryTransactionLogId',
userdata: 'userdata'
},
beforeRequest: function () {
var theGrid = jQuery("#list");
var postData = theGrid.jqGrid('getGridParam', 'postData');
if (postData != undefined && postData.filters != undefined) {
postData.filters = jQuery.jgrid.parse(postData.filters);
//Remove if current field exists
postData.filters.rules = jQuery.grep(postData.filters.rules, function(value) {
if (value.field != 'CreatedOn')
return value;
});
// Parse the range picker field into start/end date
var dateRangeString = $('#gs_CreatedOn').val();
if (dateRangeString.length > 0) {
var dateRange = dateRangeString.split(' - ');
if (dateRange.length == 1) {
startDate = dateRange[0] + ' 00:00:00';
endDate = dateRange[0] + ' 23:59:59.999';
} else {
startDate = dateRange[0] + ' 00:00:00';
endDate = dateRange[1] + ' 23:59:59.999';
}
var startDateFilter = { "field": "CreatedOn", "op": "ge", "data": startDate };
var endDateFilter = { "field": "CreatedOn", "op": "le", "data": endDate };
// Add new filters
postData.filters.rules.push(startDateFilter);
postData.filters.rules.push(endDateFilter);
}
} else {
jQuery.extend(postData, {
});
}
if (postData != undefined && postData.filters != undefined) {
postData.filters = JSON.stringify(postData.filters);
postData._search = true;
}
return [true, ''];
}
});
$('.date').datepicker();
grid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: "bw" });
grid.jqGrid('navGrid', '#pager', { del: false, add: false, edit: false, search: false });
});
datePick = function() {
var grid = $("#list");
$("#list")[0].triggerToolbar();
$("#list").trigger("reloadGrid", [{ page: 1 }]);
}