I am working for the jqGrid for the first time at all.I wanted to use it in my application with all its native features, like editing, deleting,a dding, sorting and all others.
I came across this project, which seems to be a basic implementation of jqGrid. It was a good starting point. However, I am having trouble displaying the Add, Delete, Search buttons in Left pager.
I have tried setting the pager to true, setting it to an div-id. Tried setting nav grid options. Tried binding the .navGrid function to the pager element in directive.
But the left pager won't show up at all. I have a related issue here.
below is the entire code I have apart from the above directive.
<!Doctype html>
<html ng-app="poc">
<head>
<link rel="stylesheet" href="jquery-ui.css" />
<link rel="stylesheet" href="ui.jqgrid.min.css" />
<!--<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css">-->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="jquery.jqgrid.min.js"></script>
<script type="text/javascript" src="angular-jqgrid.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="ctrl">
<jq-grid dataset="myData" options="myGridOptions"></jq-grid>
<div id="pager"></div>
</body>
</html>
angular.module("poc", ['angular-jqgrid']);
angular.module("poc").controller('ctrl', function ($scope) {
$scope.myData = [{ "OrderID": "10248", "CustomerID": "WILMK", "OrderDate": "1996-07-04 00:00:00", "Freight": "32.3800", "ShipName": "Vins et alcools Chevalier" }, { "OrderID": "10249", "CustomerID": "TRADH", "OrderDate": "1996-07-05 00:00:00", "Freight": "11.6100", "ShipName": null }, { "OrderID": "10250", "CustomerID": "HANAR", "OrderDate": "1996-07-08 00:00:00", "Freight": "65.8300", "ShipName": "Hanari Carnes" }, { "OrderID": "10251", "CustomerID": "VICTE", "OrderDate": "1996-07-08 00:00:00", "Freight": "41.3400", "ShipName": "Victuailles en stock" }, { "OrderID": "10252", "CustomerID": "SUPRD", "OrderDate": "1996-07-09 00:00:00", "Freight": "51.3000", "ShipName": null }, { "OrderID": "10253", "CustomerID": "HANAR", "OrderDate": "1996-07-10 00:00:00", "Freight": "58.1700", "ShipName": "Hanari Carnes" }, { "OrderID": "10254", "CustomerID": "CHOPS", "OrderDate": "1996-07-11 00:00:00", "Freight": "22.9800", "ShipName": "Chop-suey Chinese" }, { "OrderID": "10255", "CustomerID": "RICSU", "OrderDate": "1996-07-12 00:00:00", "Freight": "148.3300", "ShipName": "Richter Supermarkt" }, { "OrderID": "10256", "CustomerID": "WELLI", "OrderDate": "1996-07-15 00:00:00", "Freight": "13.9700", "ShipName": "Wellington Importadora" }, { "OrderID": "10257", "CustomerID": "HILAA", "OrderDate": "1996-07-16 00:00:00", "Freight": "81.9100", "ShipName": null }, { "OrderID": "10258", "CustomerID": "ERNSH", "OrderDate": "1996-07-17 00:00:00", "Freight": "140.5100", "ShipName": "Ernst Handel" }, { "OrderID": "10259", "CustomerID": "CENTC", "OrderDate": "1996-07-18 00:00:00", "Freight": "3.2500", "ShipName": "Centro comercial Moctezuma" }, { "OrderID": "10260", "CustomerID": "OLDWO", "OrderDate": "1996-07-19 00:00:00", "Freight": "55.0900", "ShipName": null }, { "OrderID": "10261", "CustomerID": "QUEDE", "OrderDate": "1996-07-19 00:00:00", "Freight": "3.0500", "ShipName": null }, { "OrderID": "10262", "CustomerID": "RATTC", "OrderDate": "1996-07-22 00:00:00", "Freight": "48.2900", "ShipName": "Rattlesnake Canyon Grocery" }, { "OrderID": "10263", "CustomerID": "ERNSH", "OrderDate": "1996-07-23 00:00:00", "Freight": "146.0600", "ShipName": "Ernst Handel" }, { "OrderID": "10264", "CustomerID": "FOLKO", "OrderDate": "1996-07-24 00:00:00", "Freight": "3.6700", "ShipName": null }, { "OrderID": "10265", "CustomerID": "BLONP", "OrderDate": "1996-07-25 00:00:00", "Freight": "55.2800", "ShipName": null }, { "OrderID": "10266", "CustomerID": "WARTH", "OrderDate": "1996-07-26 00:00:00", "Freight": "25.7300", "ShipName": "Wartian Herkku" }, { "OrderID": "10267", "CustomerID": "FRANK", "OrderDate": "1996-07-29 00:00:00", "Freight": "208.5800", "ShipName": "Frankenversand" }];
$scope.myGridOptions = {
colNames: ["OrderID", "Customer ID", "Order Date", "Freight", "Ship Name",],
colModel:[
{ label: 'OrderID', name: 'OrderID', key: true, width: 75 },
{ label: 'Customer ID', name: 'CustomerID', width: 50 },
{ label: 'Order Date', name: 'OrderDate', width: 150 },
{ label: 'Freight', name: 'Freight', width: 150 },
{ label:'Ship Name', name: 'ShipName', width: 150 }
],
cmTemplate: { autoResizable: true, editable: true },
hoverrows: true,
rowNum: 20,
autoResizing: { compact: true },
rowList: [5, 10, 20, "10000:All"],
viewrecords: true,
sortable: true,
pager: true,
pgbuttons : true,
pagerRightWidth: 150,
sortname: "OrderID",
sortorder: "desc",
formEditing: {
width: 310,
closeOnEscape: true,
closeAfterEdit: true,
savekey: [true, 13]
},
formViewing: {
labelswidth: "80%"
},
navOptions: {
view: true,
},
singleSelectClickMode: "selectonly", // optional setting
ondblClickRow: function (rowid) {
$(this).jqGrid("editGridRow", rowid);
},
caption: "Angular Implementation of jqGrid",
width: 1280,
height: 450,
};
});
This is simply all I have for now. My console shows no error, and I think I pretty much have all needed libraries in place. The grid displays fine except for the blank left pager.
Am I missing something in configuration object. How can I make the Add Delete button to appear.
Any help is appreciated.
Oleg
I don't know angular-jqgrid, but it's code is simple and you can insert it in your code directly. The code from my old answer, does mostly the same. I modified it using your colModel and inserted just some additional properties and options, which can be interesting for you.
The demo used 3 lines
$grid.jqGrid(newValue)
.jqGrid("navGrid")
.jqGrid("filterToolbar");
which call navGrid and filterToolbar. You can easy extend the code to call more options.
I insert the code, which I used in the demo below:
var initDatepicker = function (elem) {
var self = this;
$(elem).datepicker({
minDate: new Date(1995, 1 - 1, 1),
defaultDate: new Date(1996, 6, 15),
onSelect: function () {
setTimeout(function () {
self.triggerToolbar();
}, 0);
},
dateFormat: "dd-M-yy",
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
};
var myApp = angular.module("myApp", []);
myApp.directive("ngJqGrid", function ($compile) {
return {
restrict: "E",
scope: {
config: "=",
data: "="
},
link: function (scope, element, attrs) {
var $grid;
scope.$watch("config", function (newValue) {
element.children().empty();
$grid = angular.element("<table></table>");
element.append($compile($grid)(scope));
element.append($grid);
angular.extend(newValue, {
loadComplete: function () {
$compile(this)(scope);
},
autoencode: true,
iconSet: "fontAwesome"
});
$grid.jqGrid(newValue)
.jqGrid("navGrid")
.jqGrid("filterToolbar");
});
scope.$watch("data", function (newValue, oldValue) {
var p = $grid.jqGrid("getGridParam");
p.data = newValue;
$grid.jqGrid("destroyFilterToolbar");
$grid.trigger("reloadGrid");
$grid.jqGrid("filterToolbar");
});
}
};
});
myApp.controller("MyController", function ($scope) {
$scope.config = {
colModel:[
{ label: 'OrderID', name: 'OrderID', key: true, width: 75, sorttype: "integer" },
{ label: 'Customer ID', name: 'CustomerID', width: 90, stype: "select",
searchoptions: {
clearSearch: true,
sopt: ["eq", "ne"],
generateValue: true,
noFilterText: "Any"
}},
{ label: 'Order Date', name: 'OrderDate', width: 125,
autoResizing: { minColWidth: 90 },
align: "center", sorttype: "date",
formatter: "date", formatoptions: { newformat: "d-M-Y" },
editoptions: { dataInit: initDatepicker },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDatepicker } },
{ label: 'Freight', name: 'Freight', template: "number", width: 70,
autoResizing: { minColWidth: 65 },},
{ label: 'Ship Name', name: 'ShipName', width: 180,
createColumnIndex: true,
searchoptions: {
dataInit: function (elem, options) {
$(elem).autocomplete({
source: $(this).jqGrid("getUniqueValueFromColumnIndex", "ShipName"),
delay: 0,
minLength: 0
});
},
sopt: [ "cn", "eq", "bw", "ew", "bn", "nc", "en" ],
clearSearch: true
}}
],
cmTemplate: { autoResizable: true, editable: true },
hoverrows: true,
rowNum: 20,
pagerRightWidth: 105,
autoResizing: { compact: true },
rowList: [5, 10, 20, "10000:All"],
viewrecords: true,
sortable: true,
pager: true,
sortname: "OrderID",
sortorder: "desc",
formEditing: {
width: 310,
closeOnEscape: true,
closeAfterEdit: true,
savekey: [true, 13]
},
formViewing: {
labelswidth: "80%"
},
navOptions: {
view: true,
},
singleSelectClickMode: "selectonly", // optional setting
ondblClickRow: function (rowid) {
$(this).jqGrid("editGridRow", rowid);
},
caption: "Angular Implementation of jqGrid"//,
//width: 1280,
//height: 450
};
$scope.data = [
{ "OrderID": "10248", "CustomerID": "WILMK", "OrderDate": "1996-07-04 00:00:00", "Freight": "32.3800", "ShipName": "Vins et alcools Chevalier" },
{ "OrderID": "10249", "CustomerID": "TRADH", "OrderDate": "1996-07-05 00:00:00", "Freight": "11.6100", "ShipName": null },
{ "OrderID": "10250", "CustomerID": "HANAR", "OrderDate": "1996-07-08 00:00:00", "Freight": "65.8300", "ShipName": "Hanari Carnes" },
{ "OrderID": "10251", "CustomerID": "VICTE", "OrderDate": "1996-07-08 00:00:00", "Freight": "41.3400", "ShipName": "Victuailles en stock" },
{ "OrderID": "10252", "CustomerID": "SUPRD", "OrderDate": "1996-07-09 00:00:00", "Freight": "51.3000", "ShipName": null },
{ "OrderID": "10253", "CustomerID": "HANAR", "OrderDate": "1996-07-10 00:00:00", "Freight": "58.1700", "ShipName": "Hanari Carnes" },
{ "OrderID": "10254", "CustomerID": "CHOPS", "OrderDate": "1996-07-11 00:00:00", "Freight": "22.9800", "ShipName": "Chop-suey Chinese" },
{ "OrderID": "10255", "CustomerID": "RICSU", "OrderDate": "1996-07-12 00:00:00", "Freight": "148.3300", "ShipName": "Richter Supermarkt" },
{ "OrderID": "10256", "CustomerID": "WELLI", "OrderDate": "1996-07-15 00:00:00", "Freight": "13.9700", "ShipName": "Wellington Importadora" },
{ "OrderID": "10257", "CustomerID": "HILAA", "OrderDate": "1996-07-16 00:00:00", "Freight": "81.9100", "ShipName": null },
{ "OrderID": "10258", "CustomerID": "ERNSH", "OrderDate": "1996-07-17 00:00:00", "Freight": "140.5100", "ShipName": "Ernst Handel" },
{ "OrderID": "10259", "CustomerID": "CENTC", "OrderDate": "1996-07-18 00:00:00", "Freight": "3.2500", "ShipName": "Centro comercial Moctezuma" },
{ "OrderID": "10260", "CustomerID": "OLDWO", "OrderDate": "1996-07-19 00:00:00", "Freight": "55.0900", "ShipName": null },
{ "OrderID": "10261", "CustomerID": "QUEDE", "OrderDate": "1996-07-19 00:00:00", "Freight": "3.0500", "ShipName": null },
{ "OrderID": "10262", "CustomerID": "RATTC", "OrderDate": "1996-07-22 00:00:00", "Freight": "48.2900", "ShipName": "Rattlesnake Canyon Grocery" },
{ "OrderID": "10263", "CustomerID": "ERNSH", "OrderDate": "1996-07-23 00:00:00", "Freight": "146.0600", "ShipName": "Ernst Handel" },
{ "OrderID": "10264", "CustomerID": "FOLKO", "OrderDate": "1996-07-24 00:00:00", "Freight": "3.6700", "ShipName": null },
{ "OrderID": "10265", "CustomerID": "BLONP", "OrderDate": "1996-07-25 00:00:00", "Freight": "55.2800", "ShipName": null },
{ "OrderID": "10266", "CustomerID": "WARTH", "OrderDate": "1996-07-26 00:00:00", "Freight": "25.7300", "ShipName": "Wartian Herkku" },
{ "OrderID": "10267", "CustomerID": "FRANK", "OrderDate": "1996-07-29 00:00:00", "Freight": "208.5800", "ShipName": "Frankenversand" }
];
});
来源：https://stackoverflow.com/questions/42611206/unable-to-see-the-left-pager-in-the-following-jqgrid-directive