Related
I am trying to make a dropdown filter for angular ui-grid. I originally found the how-to article here, and upon not being able to work it, i went back to the source to try to work it. I am still having no success. the column filter just looks like a regular filter, without any dropdown. Can someone help me fix it up?
Column def:
{
field: 'sex'
, displayName: 'SEX'
, width: '120'
, type: uiGridConstants.filter.SELECT
, filter: { selectOptions: [ { value: 'male', label: 'male' }, { value: 'female', label: 'female' } ] }
}
This is how it looks (if I click the input, its just accepts text)
Is there something else im missing?
-----UPDATE WITH MY WHOLE SETUP-----------
//options for the main grid
$scope.gridOptions = {
enableFiltering: true,
multiSelect: false,
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi; //so we can use gridapi functions of ui-grid
//handler for clicking rows and getting row object
gridApi.selection.on.rowSelectionChanged($scope, function(row){
thisRow = gridApi.selection.getSelectedRows() //gets the clicked row object
console.log(thisRow[0].uniqueId)
});
},
data: 'myData'
, rowTemplate: rowTemplate()
, columnDefs: [
{
field: 'alert'
, displayName: 'ALERTS'
, width: '70'
, headerCellClass: $scope.highlightFilteredHeader
,sort: {
direction: uiGridConstants.DESC,
priority: 1
}
},
{
field: 'firstName'
, displayName: 'FIRST NAME'
, width: '130'
, headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'lastName'
, displayName: 'LAST NAME'
, width: '130'
, headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'dob'
, displayName: 'DOB'
, width: '130'
, headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'careCoordinatorName'
, displayName: 'Care Coordinator Name'
, width: '130'
, headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'userStatus'
, displayName: 'STATUS'
, width: '130'
, headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'homeNum'
, displayName: 'PATIENT HOME #'
, width: '130'
, headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'cellNum'
, displayName: 'PATIENT CELL #'
, width: '130'
, headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'mi'
, displayName: 'MI'
, width: '60'
, headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'sex'
, displayName: 'SEX'
, width: '120'
, type: uiGridConstants.filter.SELECT
, filter: { selectOptions: [ { value: 'male', label: 'male' }, { value: 'female', label: 'female' } ] }
}
]
};
Row template (if relevant):
function rowTemplate() {
return '<div ng-dblclick="grid.appScope.rowDblClick(row)" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + \'-\' + col.uid + \'-cell\'" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" role="{{col.isRowHeader ? \'rowheader\' : \'gridcell\'}}" ui-grid-cell></div>';
}
Grid HTML
<div id="grid1" ui-grid="gridOptions" ui-grid-importer class="grid" ui-grid-resize-columns ui-grid-move-columns ui-grid-auto-resize ui-grid-edit ui-grid-selection ui-grid-cellNav ui-grid-paging external-scopes="gridHandlers"></div>
------UPDATE 2-----------
After changing coldef to
{
field: 'sex',
displayName: 'SEX',
width: '120',
//type: uiGridConstants.filter.SELECT,
filter: {
type: uiGridConstants.filter.SELECT, // <- move this to here
selectOptions: [
{ value: 'male', label: 'male' },
{ value: 'female', label: 'female' }
]
}
}
This is how my column now looks (with another column to the left for comparison)
------UPDATE 3-----------
When I inspected the area, I could see the code for the select. So no we know its there, its just not showing
-----UPDATE 4----------
Materializecss was making it invisible. it was there the whole time
select {
display: inline !important;
height: 15px !important;
}
solved the problem
Ah, I believe your problem is that the type option for the coldef is in the wrong location. I've expanded the code a bit for readability; you can easily get lost in the objects if they are too compressed.
What you have:
{
field: 'sex',
displayName: 'SEX',
width: '120',
type: uiGridConstants.filter.SELECT,
filter: {
selectOptions: [
{ value: 'male', label: 'male' },
{ value: 'female', label: 'female' }
]
}
}
What it should be:
{
field: 'sex',
displayName: 'SEX',
width: '120',
//type: uiGridConstants.filter.SELECT,
filter: {
type: uiGridConstants.filter.SELECT, // <- move this to here
selectOptions: [
{ value: 'male', label: 'male' },
{ value: 'female', label: 'female' }
]
}
}
HTML
<div id="landingGrid" ui-grid="landingGrid" class="landingGrid" ui-grid-pagination></div>
JS
$scope.submitted_columns = [
{field: "application_id",
visible: false},
{field: "date_entered",
displayName: "Created On",
enableFiltering: true,
callClass: 'text-center',
width: '10%',
cellFilter: 'date : "MM/DD/YYYY"'},
{field: 'application_name',
displayName: "Name",
enableFiltering: true,
width: '15%',
cellClass: 'text-left'},
{field: 'merchant_name',
displayName: "Merchant DBA",
enableFiltering: true,
width: '15%',
cellClass: 'text-left'},
{field: 'contract_type',
displayName: "Contract Type",
enableFiltering: false,
width: '10%',
cellClass: 'text-left'},
{field: 'funding_type',
displayName: "Funding Type",
enableFiltering: false,
width: '8%',
cellClass: 'text-left'},
{field: 'application_status',
displayName: "Status",
enableFiltering: true,
width: '8%',
cellClass: function (grid, row, col, rowRenderIndex, colRenderIndex) {
if (grid.getCellValue(row, col) === "saved") {
highlightRowsByStatus(rowRenderIndex, 'red');
return "text-left";
}
if (grid.getCellValue(row, col) === "wait_on_docs" || grid.getCellValue(row, col) === "contract_out") {
highlightRowsByStatus(rowRenderIndex, 'orange');
return "text-left";
}
}
},
{field: 'purchase_price',
displayName: "Offer Amount",
enableFiltering: false,
width: '10%',
cellClass: 'text-right',
cellFilter: 'currency'},
{field: 'decline_reason',
displayName: "Decline Reason",
enableFiltering: false,
width: '10%',
cellClass: 'text-left'},
{field: 'iso_dba',
displayName: "Sales Agent",
enableFiltering: true,
cellClass: 'text-left'}
];
$scope.landingGrid = {
useExternalSorting: true,
enableSorting: true,
enableFiltering: true,
columnDefs: $scope.submitted_columns,
paginationPageSizes: [25, 50, 100, 250],
paginationPageSize: 25,
enableCellSelection: false,
enableRowSelection: false,
enableCellEdit: false,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.core.on.sortChanged($scope, function (grid, sortColumns) {
console.debug(sortColumns);
});
}
};
LandingFactory.getSubmittedNWApplicationsForUserID(UserObject.userId, $scope.recordsStart, $scope.recordsLimit).then(
function successCallback(response) {
if (typeof response.data.data !== undefined) {
$scope.landingGrid.data = response.data.data;
} else {
console.log("No records to return");
}
}, function errorCallback(response) {
console.debug("Error returned from getSubmittedNWApplicationsForUserID", response);
});
};
The data result is correct, the grid itself looks great - pagination works, filtering works, sorting works but the data rows are being rendered below the pagination footer. Anyone have any ideas?
Problem found! In ui-grid.min.css the following code needs to be changed:
.ui-grid-header-cell-wrapper {
position: relative;
display: table;
box-sizing: border-box;
height: 100%; /* REMOVE ME */
}
I am using jqgrid version 4.1.2 with MVC4, using loadonce option. When the search result's count exceeds approximately 9000 records, no data is shown up on the grid.
What might be the issue?
Here is the JS code: Update 1
function showCompletedGrid() {
// Set up the jquery grid
$("#jqTableCompleted").jqGrid({
// Ajax related configurations
url: jqDataUrl,
datatype: "json",
mtype: "POST",
loadonce: true,
loadtext: 'Loading Data please wait ...',
postData: { strUserName: function () { return $('#ddlUserName :selected').val(); },
strFunctionName: function () { return $('#ddlOPMSFunction :selected').text(); },
strProcName: function () { return $('#ddlOPMSProcess :selected').text(); },
strCategory: function () { return $('#ddlSearchCategory :selected').text(); },
strWorkType: function () { return $('#ddlSearchWorkType :selected').text(); },
strRequestNumber: function () { return $('#txtRequestNo').val(); },
strStatus: function () { return $('#ddlSearchStatus :selected').text(); },
strFromDate: function () { return $('#txtFromDate').val().toString(); }, //datepicker('getDate'),
strToDate: function () { return $('#txtToDate').val().toString(); }, //datepicker('getDate'),
strAction: "Closed"
},
autowidth: true,
shrinkToFit: true,
// Specify the column names
colNames: ["S.No.", "User Name", "Category", "Work Type", "Request Number", "Status", "Time Spent", "RE", "GUID", "Marked for Correction", "Correction Complete", "Reason", "Task Type", "acf2id", "Created Date", "Action", "IsTeam"],
// Configure the columns
colModel: [
{ name: "SNo", index: "SNo", sorttype: 'int', width: 100, align: "left", hidden: true, sortable: true, search: true, searchoptions: { sopt: ['eq']} },
{ name: "UserName", index: "UserName", width: 200, align: "left", sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "Category", index: "Category", width: 200, align: "left", sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "WorkType", index: "WorkType", width: 200, align: "left", sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "RequestNumber", index: "RequestNumber", width: 200, align: "left", sortable: true, search: true, searchoptions: { sopt: ['cn']} },
{ name: "Status", index: "Status", width: 200, align: "left", sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "TimeSpent", index: "TimeSpent", width: 200, align: "left", sortable: true, search: true },
{ name: "RE", index: "RE", width: 200, align: "left", sortable: true, search: true },
{ name: "GUID", index: "GUID", sortable: false, search: false, width: 200, align: "left", hidden: true },
{ name: "MarkCorrection", index: "MarkCorrection", width: 200, align: "left", hidden: true, sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "CorrectionComplete", index: "CorrectionComplete", width: 200, align: "left", hidden: true, sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "Reason", index: "Reason", width: 200, align: "left", hidden: true, sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "TaskType", index: "TaskType", width: 200, align: "left", sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "acf2id", index: "acf2id", width: 200, align: "left", hidden: true, sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "CreatedDate", index: "CreatedDate", width: 200, align: "left", hidden: false, search: false },
{ name: 'Actions', sortable: false, search: false, fixed: true, align: 'center', formatter: returnHyperLinkCompleted },
{ name: 'IsTeam', sortable: false, hidden: true, search: false, fixed: true, align: 'center' }
],
ignoreCase: true,
//width: 1250,
height: 150,
// Paging
toppager: true,
pager: $("#jqTableCompletedPager"),
//rowTotal: 200,
rowNum: 20,
rowList: [20, 15, 10, 5],
viewrecords: true,
emptyrecords: "",
hiddengrid: true,
// Default sorting
sortname: "SNo",
sortorder: "asc",
// Grid caption
caption: "Closed",
loadComplete: function (data) {
var RE;
var TimeSpent;
var rowIDs = jQuery("#jqTableCompleted").jqGrid('getDataIDs');
for (var i = 0; i < rowIDs.length; i++) {
var rowID = rowIDs[i];
var row = jQuery('#jqTableCompleted').jqGrid('getRowData', rowID);
RE = hmsToSecondsOnly(row.RE);
RE = (0.2 * RE) + RE;
TimeSpent = hmsToSecondsOnly(row.TimeSpent);
if (TimeSpent > RE && RE > 0) {
$(row).removeClass('ui-widget-content');
$(row).removeClass('ui-state-highlight');
$("#jqTableCompleted tr[id='" + rowID + "']").addClass('myColor');
}
}
}
}).navGrid("#jqTableCompletedPager",
{ refresh: true, add: false, edit: false, del: false },
{}, // settings for edit
{}, // settings for add
{}, // settings for delete
{sopt: ["cn"]}
);
$("#jqTableCompleted").jqGrid('navGrid', '#jqTableCompletedPager', { del: false, add: false, edit: false, search: false });
$("#jqTableCompleted").jqGrid('filterToolbar', { searchOnEnter: false, searchOperators: true });
$("#jqTableCompleted").jqGrid('navButtonAdd', '#jqTableCompletedPager',
{ caption: "Export to Excel", buttonicon: "ui-icon-extlink", title: "Export", id: "btnExport",
onClickButton: function (evt) {
var UserName = $('#ddlUserName option:selected').val();
var RequestNumber = $('#txtRequestNo').val();
var FunctionName = encodeURIComponent($('#ddlOPMSFunction option:selected').text());
var ProcessName = encodeURIComponent($('#ddlOPMSProcess option:selected').text());
var Category = $('#ddlSearchCategory option:selected').text();
var WorkTypeName = $('#ddlSearchWorkType option:selected').text();
var SearchStatus = $('#ddlSearchStatus option:selected').text();
var TransactionStartTS = $('#txtFromDate').val().toString();
var TransactionEndTS = $('#txtToDate').val().toString();
window.open("../Search/Export?UserName=" + UserName + "&RequestNumber=" + RequestNumber + "&FunctionName=" + FunctionName + "&ProcessName=" + ProcessName + "&Category=" + Category + "&WorkTypeName=" + WorkTypeName + "&SearchStatus=" + SearchStatus + "&TransactionStartTS=" + TransactionStartTS + "&TransactionEndTS=" + TransactionEndTS + "&ActionName=" + "Closed");
}
});
}
Although the data is being returned and in the correct format, from the controller, as follows, the grid does not show any result.
var jsonData = new
{
page = page,
rows = data
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
Also is there any limit on number of records or dependency on the browser when returning all the data from server using the loadonce option?
Any help would be much appreciated. Thanks.
Finally I found the solution for the above problem by tracing the request in Fiddler, in the response title following error was shown:
Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength property.
Upon searching for the above error, I found a workaround:
Here
Basically the problem area was not the jqGrid, but was MaxJsonLength property of JavaScriptSerializer which defaults to 2097152 characters ~ 4 MB of data. Source: MaxJsonLength
To get it working, I replaced the following code in my Action method:
return Json(jsonData, JsonRequestBehavior.AllowGet);
with:
var jsonResult = Json(jsonData, JsonRequestBehavior.AllowGet);
jsonResult.MaxJsonLength = int.MaxValue;
return jsonResult;
Thanks.
I am trying to get the value of a cell to pass as a parameter in an ajax call for another column in the grid. The cell value I need is formatted to return a url so when I select it it is passing the url instead of the batchID value.
How can I access the value of BatchID without the formatter applied?
$(function () {
$('#search').html('');
$('#grid').GridUnload();
Grid.Home.Grid.setupGrid($('#grid'), $('#pager'), $('#search'));
});
Grid.Home.Grid = {
setupGrid: function (grid, pager, search) {
grid.jqGrid({
colNames: ['Batch ID', 'Job Start Date', 'Job Finish Date', 'Contacts', 'Statements', 'Selected', 'Sent', 'Queued', 'Action'],
colModel: [
{ name: 'BatchID', index: 'BatchID', width: 35, formatter: batch },
{ name: 'JobStartDate', index: 'JobStartDate', width: 55, sortable: false, search: false, formatoptions: { srcformat: 'y/m/dTH:i:s', newformat: 'm/d/Y g:i:s A'} },
{ name: 'JobFinishDate', index: 'JobFinishDate', width: 55, sortable: false, search: false, formatoptions: { srcformat: 'y/m/dTH:i:s', newformat: 'm/d/Y g:i:s A'} },
{ name: 'Contacts', index: 'Contacts', width: 20, align: 'right', sortable: false, search: false },
{ name: 'Statements', index: 'Statements', width: 20, align: 'right', sortable: false, search: false }, //'currencyFormatter' },
{name: 'Selected', index: 'Selected', width: 20, align: 'right', sortable: false, search: false },
{ name: 'Sent', index: 'Sent', width: 30, sortable: false, search: false, sortable: false, search: false },
{ name: 'Queued', index: 'Queued', width: 30, sortable: false, search: false },
{ name: 'Action', index: 'Action', width: 50, sortable: false, search: false, formatter: action}
],
loadonce: false,
pager: '#pager',
sortname: 'BatchID',
sortorder: "desc",
onCellSelect: function (rowid, cellcontent, e) {
if (cellcontent == '8') {
var rowObject = grid.getRowData(rowid);
if (rowObject.Action === 'Add To Queue'){
$.ajax({
type: 'POST',
url: '<%= Url.Action("UpdateBatch") %>',
data: { BatchID: rowObject.BatchID },
beforeSend: function (xhr) {
blockElement($('.grid'));
},
complete: function (xhr, status) {
unblockElement($('.grid'));
},
success: function (data) {
var title = $('<h6>', { html: data.Title, 'class': 'jgrowl-header' });
$.jGrowl(data.Message, {
theme: 'ui-state-highlight',
life: 5000,
beforeOpen: function (e, m, o) {
e.children('.header').html(title);
}
});
grid.trigger("reloadGrid");
}
}); }
};
},
url: '<%= Url.Action("GetBatchList") %>'
}).navGrid('#pager', { edit: false, add: false, del: false, search: false, refresh: true });
grid.filterToolbar({ stringResult: true, searchOnEnter: false });
}
};
function action(cellvalue, options, rowObject) {
if (rowObject.Action == 'Add To Queue'){
options.colModel.classes = 'show-link';
return 'Add To Queue'
}
else {
options.colModel.classes = '';
return '';
}
};
function batch(cellvalue, options, rowObject) {
var t = rowObject.BatchID;
return '' + t + ' ';
};
</script>
I used jsonmap and added another column that was hidden to hold the value of batchID unformatted. Now the grid looks like this.
Grid.Home.Grid = {
setupGrid: function (grid, pager, search) {
grid.jqGrid({
colNames: ['Batch', 'Job Start Date', 'Job Finish Date', 'Contacts', 'Statements', 'Selected', 'Sent', 'Queued', 'Action', ''],
colModel: [
{ name: 'BatchIDLink ', index: 'BatchID', jsonmap: 'BatchID', width: 35, formatter: link },
{ name: 'JobStartDate', index: 'JobStartDate', width: 55, sortable: false, search: false, formatoptions: { srcformat: 'y/m/dTH:i:s', newformat: 'm/d/Y g:i:s A'} },
{ name: 'JobFinishDate', index: 'JobFinishDate', width: 55, sortable: false, search: false, formatoptions: { srcformat: 'y/m/dTH:i:s', newformat: 'm/d/Y g:i:s A'} },
{ name: 'Contacts', index: 'Contacts', width: 20, align: 'right', sortable: false, search: false },
{ name: 'Statements', index: 'Statements', width: 20, align: 'right', sortable: false, search: false }, //'currencyFormatter' },
{name: 'Selected', index: 'Selected', width: 20, align: 'right', sortable: false, search: false },
{ name: 'Sent', index: 'Sent', width: 30, sortable: false, search: false, sortable: false, search: false },
{ name: 'Queued', index: 'Queued', width: 30, sortable: false, search: false },
{ name: 'Action', index: 'Action', width: 50, sortable: false, search: false, formatter: queue },
{ name: 'BatchIDVal', index: 'BatchID', jsonmap: 'BatchID', hidden: true }
],
i m using jqgrid with mvc 3, I want to add Edit and Delete button with every row of JqGrid , i have achieved this thing by the help of this link. But it is for inline editing, i want to open a popup widows when click on edit button.
How can i achieve this thing.
Thanks
You should just use new editformbutton: true option which exists starting with version 4.1.0 of jqGrid:
formatter:'actions',
formatoptions: {
keys: true,
editformbutton: true
}
Please find the colmodel below for editing:
{
name: 'EditAction',
width: 60,
fixed: true,
search: false,
sortable: false,
resize: false,
formatter: 'actions',
formatoptions: {
keys: false,
editbutton: true,
delbutton: false,
editformbutton: false,
onSuccess: function(response) {
if (response.status == 200) {
}
},
extraparam: { oper: 'edit' },
url: '#Url.Action("ActionName", "Controller")'
}
},
jQuery("#grid").jqGrid({
datatype: "local",
data: second,
#url: '#Url.Action("orders", "Home")',
datatype: "json",#
colNames: ['name', 'description', 'url'],
colModel: [
{name: 'name',
index: 'name',
editable: true,
editrules: {required: true},
editoptions: {placeholder: 'Enter a Name'}
},
{name: 'description',
index: 'description',
editable: true,
editrules: {required: true},
editoptions: {placeholder: 'Enter description'}
},
{
name: 'url',
index: 'url',
editable: true,
editrules: {required: true},
editoptions: {placeholder: 'Enter url'}
}
],
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'model',
pager: '#pager',
editrow:true,
editurl: '#Url.Action("orders", "Home")',
viewrecords: true,
sortorder: "desc",
jsonReader: {
repeatitems: false,
id: "0"
},
searching: {
loadFilterDefaults: false,
closeOnEscape: true,
searchOperators: true,
searchOnEnter: true
},
caption: "Cars Grid",
height: '80%',
gridComplete: initGrid
});