I am trying to set height of the ui-grid to be the size of 3 rows. I went through the ui-grid documentation and it contains something like minRowsToShow but there is no equivalent property to maxRowsToShow or something similar.
I am trying to avoid setting a css fixed height manually on the grid.
var app = angular.module('app', ['ui.grid', 'ui.grid.edit']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.gridOptions = {
columnDefs: [
{ field: 'name' },
{ field: 'amount', name: 'Number', cellFilter: 'fractionFilter' },
{ field: 'amount', name: 'Currency', cellFilter: 'currencyFilter:this' }
]
};
$scope.gridOptions.data = [
{
"name": "Claire",
"amount": 21.9015,
"currency": "euro"
},
{
"name": "Fitzpatrick",
"amount": 41.6352,
"currency": "pound"
},
{
"name": "Ericka",
"amount": 31.4228,
"currency": "pound"
},
{
"name": "Navarro",
"amount": 2.1944,
"currency": "dollar"
},
{
"name": "Cherie",
"amount": 31.9234,
"currency": "dollar"
},
{
"name": "Cobb",
"amount": 45.5756,
"currency": "pound"
}
];
}])
.filter('fractionFilter', function () {
return function (value) {
return value.toFixed(0);
};
})
.filter('currencyFilter', function () {
var currencyMap = {
'dollar': '$',
'pound': '£',
'euro': '€'
};
return function (value, scope) {
return currencyMap[scope.row.entity.currency] + value.toFixed(2);
};
})
;
<!doctype html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
<script src="//cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.6/ui-grid.min.js"></script>
<link rel="stylesheet" href="//cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.6/ui-grid.min.css" type="text/css" />
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<div id="grid1" ui-grid="gridOptions" ui-grid-edit class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
My desired result is this. Is there a way of achieving this with existing ui-grid options/properties?
You can use pagination and disable the pagination control:
$scope.gridOptions1 = {
enableHorizontalScrollbar: 0,
enableVerticalScrollbar: 0,
paginationPageSizes: [3],
paginationPageSize: 3,
enablePaginationControls: false,
columnDefs: [
...
]
};
Visit http://ui-grid.info/docs/#!/tutorial/Tutorial:%20214%20Pagination
I edit the Plunker to show the result of the answer I am trying to give: http://plnkr.co/edit/T0URbr5KiFkEOzWTgE4i?p=preview
Related
I want to set my angular chosen with default value from my response. also my Angular chosen dropdown values also coming from AJAX response. I tried ng-init and pointing the value with respect to index. But no luck.
HTML
<select ng-init="model.country = cities[currentLocationIdx]"
chosen ng-model="model.country"
ng-options=" cities.name for cities in cities" required>
<option value="">Select a Location</option>
</select>
JS:
$scope.model.country = "Bangalore";
$scope.currentLocationIdx = $scope.cities.findIndex( city => city.name === $scope.model.country );
JSON:
[
{
"name": "South Andaman"
},
{
"name": "Nicobar"
},
{
"name": "Adilabad"
},
{
"name": "Anantapur"
},
{
"name": "Chittoor"
},
{
"name": "East Godavari"
},
{
"name": "Bangalore"
}
]
You just need to declare your variable as obj in controller like this:
$scope.model = {};
WORKING DEMO
Try this below updated code. Its working at my end with chosen library.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body ng-app="app" ng-controller="ctrl">
<select name="mySelect" id="mySelect" chosen
ng-options="city.name for city in cities track by city.name"
ng-model="country"></select>
{{country}}
<script src="../lib/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chosen-localytics/1.8.0/angular-chosen.js"></script>
<script>
var app = angular.module('app', []);
app.controller('ctrl', function ($scope) {
$scope.cities = [
{
"name": "South Andaman"
},
{
"name": "Nicobar"
},
{
"name": "Adilabad"
},
{
"name": "Anantapur"
},
{
"name": "Chittoor"
},
{
"name": "East Godavari"
},
{
"name": "Bangalore"
}
];
$scope.country = { "name": "Bangalore" };
});
</script>
</body>
</html>
I am trying to get angular google maps to work, but I am encountering these errors.
angular.js:88 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.5/$injector/modulerr?
The above error continues for about half a page.
https://csi.gstatic.com/csi?v=2&s=mapsapi3&v3v=29.10&action=apiboot2&e=10_1_0,10_2_0&rt=main.31 net::ERR_BLOCKED_BY_CLIENT
index.html
<!DOCTYPE HTML>
<html>
<head>
<style>
html,
body {
height: 100%;
}
.angular-google-map-container {
height: 100vh;
}
</style>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/
angular.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js">
</script>
<script src="./node_modules/angular-google-maps/dist/angular-google-
maps.js"></script>
<script src="./map.controller.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBL3uzNfWSpztGvmqhBLf-
gYdfdxrCSOQo">
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="gMap">
<ui-gmap-google-map center='map.center' zoom='map.zoom' aria-
label="Google map">
<ui-gmap-marker ng-repeat="marker in markers" coords="marker.coords"
options="marker.options" events="marker.events" idkey="marker.id">
<ui-gmap-window>
<div>{{marker.window.title}}</div>
</ui-gmap-window>
</ui-gmap-marker>
</ui-gmap-google-map>
</div>
</body>
</html>
app and controller
var myApp = angular.module('myApp', ['uiGmapgoogle-maps']);
myApp.factory("Markers", function(){
var Markers = [
{
"id": "0",
"coords": {
"latitude": "45.5200",
"longitude": "-122.6819"
},
"window": {
"title": "Portland, OR"
}
},
{
"id": "1",
"coords": {
"latitude": "40.7903",
"longitude": "-73.9597"
},
"window" : {
"title": "Manhattan New York, NY"
}
}
];
return Markers;
});
myApp.controller("gMap",function($scope,Markers){
$scope.map = {
center: { latitude: 39.8282, longitude: -98.5795 },
zoom: 4
};
$scope.markers = Markers;
});
Can someone please help me solve this?
You need to correct your Markers factory implementation, factory must return an object.
So change it like :
myApp.factory("Markers", function(){
var Markers = [
{
"id": "0",
"coords": {
"latitude": "45.5200",
"longitude": "-122.6819"
},
"window": {
"title": "Portland, OR"
}
},
{
"id": "1",
"coords": {
"latitude": "40.7903",
"longitude": "-73.9597"
},
"window" : {
"title": "Manhattan New York, NY"
}
}
];
return {
markers: Markers
};
});
Then in your gMap controller, consume factory array like:
$scope.markers = Markers.markers;
Update:
You also need to import angular-simple-logger.js library since it is dependecy of googlemap api. See this fiidle
I have this linked demo code, which was extrapolated from this code here.
For whatever reason, when I switch to the local json datasource, the sorting and filtering functionality breaks.
I am obviously missing something here, can anyone point out what that may be?
I'll post my code here in case going to the links is annoying to anyone:
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/mobile-listview/mvvm">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.metro.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.metro.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.mobile.all.min.css" />
<script src="http://cdn.kendostatic.com/2015.1.318/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="../content/shared/styles/examples-offline.css">
<script src="../content/shared/js/console.js"></script>
</head>
<body>
<div data-model="mobileListViewModel" data-role="view" id="mobile-listview-events" data-title="ListView MVVM" data-use-native-scrolling="true">
<form data-bind="events: { submit: add }">
<ul data-role="listview" data-style="inset" data-type="group">
<li>
Items:
<ul data-role="listview"
data-bind="source: source"
data-filterable="{field: 'ProductName', operator: 'startswith'}"
data-template="mobile-listview-filtering-template"></ul>
</li>
</ul>
</form>
</div>
<script type="text/x-kendo-tmpl" id="mobile-listview-filtering-template">
<div class="product">
<h3>#:ProductName#</h3>
<p>#:kendo.toString(UnitPrice, "c")#</p>
</div>
</script>
<script>
var jsdata = {
"d" : [
{
"__metadata": {
"uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(1)", "type": "SampleModel.Product"
}, "ProductID": 1, "ProductName": "Chai", "SupplierID": 1, "CategoryID": 1, "QuantityPerUnit": "10 boxes x 20 bags", "UnitPrice": "18.00", "UnitsInStock": 39, "UnitsOnOrder": 0, "ReorderLevel": 10, "Discontinued": false, "Category": {
"__deferred": {
"uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(1)/Category"
}
}, "Order_Details": {
"__deferred": {
"uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(1)/Order_Details"
}
}, "Supplier": {
"__deferred": {
"uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(1)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(2)", "type": "SampleModel.Product"
}, "ProductID": 2, "ProductName": "Chang", "SupplierID": 1, "CategoryID": 1, "QuantityPerUnit": "24 - 12 oz bottles", "UnitPrice": "19.00", "UnitsInStock": 17, "UnitsOnOrder": 40, "ReorderLevel": 25, "Discontinued": false, "Category": {
"__deferred": {
"uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(2)/Category"
}
}, "Order_Details": {
"__deferred": {
"uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(2)/Order_Details"
}
}, "Supplier": {
"__deferred": {
"uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(2)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(3)", "type": "SampleModel.Product"
}, "ProductID": 3, "ProductName": "Aniseed Syrup", "SupplierID": 1, "CategoryID": 2, "QuantityPerUnit": "12 - 550 ml bottles", "UnitPrice": "10.00", "UnitsInStock": 13, "UnitsOnOrder": 70, "ReorderLevel": 25, "Discontinued": false, "Category": {
"__deferred": {
"uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(3)/Category"
}
}, "Order_Details": {
"__deferred": {
"uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(3)/Order_Details"
}
}, "Supplier": {
"__deferred": {
"uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(3)/Supplier"
}
}
}]
};
var mobileListViewModel = kendo.observable({
source: new kendo.data.DataSource({
type: "json",
transport: {
read: function(options) {
options.success(jsdata);
}
},
schema: {
data: "d"
},
sort: {
field: "ProductName",
dir: "asc"
},
serverPaging: true,
serverFiltering: true,
serverSorting: true,
pageSize: 50
})
});
</script>
<script>
var app = new kendo.mobile.Application(document.body, {skin: "nova"});
</script>
</body>
</html>
Please remove or disable all the settings related to server data operations (serverPaging, serverFiltering, serverSorting), as you don't need server operations with local data. Moreover, server and client data operations cannot be mixed, which is the case in the provided Dojo.
Here is an updated example that works:
http://dojo.telerik.com/iFuRE/11
First please check my code
Like i've use exact guidelines and follows all instructions from Angular ui treeview.
All things is working proper but i need a different output rather than current one.
Currently on my data object i've set first "2627" one has a two childs[3601, 3602], so first one is looks like ok for me.
Then the second row "3226" is automatically come under as child of first row "2627".
But actually the second row not has any child so i think by default it's a parent right ?
When i've change the order of rows( Like swap full row "2627" as second row ) from my data object then first row is looks fine and then rest of all other parent which not has child element is comes under "2627".
I think you can understand my concern, about what i actually need.
Let me know if anything i've missed ?
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.grid.treeView', 'ui.grid.pagination']);
app.controller('MainCtrl', ['$scope', '$http', '$interval', 'uiGridTreeViewConstants', function($scope, $http, $interval, uiGridTreeViewConstants) {
$scope.gridOptions = {
enableSorting: true,
multiSelect: false,
enableFiltering: true,
enableRowSelection: true,
showTreeRowHeader: true,
enableRowHeaderSelection: true, // Display checkboxes on every row when it's true
showTreeExpandNoChildren: true,
columnDefs: [{
name: 'id',
width: '30%'
}, {
name: 'client_id',
width: '40%'
}],
rowTemplate: "csra-row-template.html"
};
var data =
[{
"id": 2627,
"client_id": 182,
"childCSRAs": [{
"id": 3601,
"client_id": 182,
}, {
"id": 3602,
"client_id": 182,
}]
}, {
"id": 3226,
"client_id": 182,
"childCSRAs": []
}, {
"id": 4223,
"client_id": 182,
"childCSRAs": []
}, {
"id": 12,
"client_id": 182,
"childCSRAs": []
}, {
"id": 2624,
"client_id": 182,
"childCSRAs": []
}, {
"id": 2619,
"client_id": 182,
"childCSRAs": []
}, {
"id": 4393,
"client_id": 182,
"childCSRAs": []
}, {
"id": 2716,
"client_id": 182,
"childCSRAs": [],
}, {
"id": 5119,
"client_id": 182,
"childCSRAs": [{
"id": 2620,
"client_id": 182,
}, {
"id": 3133,
"client_id": 182,
}]
}, {
"id": 2718,
"client_id": 182,
"childCSRAs": [{
"id": 4210,
"client_id": 182
}, {
"id": 2612,
"client_id": 182,
}]
}];
var writeoutNode = function(childArray, currentLevel, dataArray) {
if (typeof childArray !== 'undefined') {
childArray.forEach(function(childNode) {
if (typeof childNode.childCSRAs !== 'undefined') {
if (childNode.childCSRAs.length > 0) {
childNode.$$treeLevel = currentLevel;
}
}
dataArray.push(childNode);
writeoutNode(childNode.childCSRAs, currentLevel + 1, dataArray);
});
}
};
/*var dataArray = []
for(i=0; i<=data.length; i++){
if (typeof childArray !== 'undefined') {
if(data[i].childCSRAs.length >0){
data[i].$$treeLevel = 0;
}
}
}*/
$scope.gridOptions.data = [];
writeoutNode(data, 0, $scope.gridOptions.data);
}]);
.grid {
height: 600px;
}
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<div id="grid1" ui-grid="gridOptions" ui-grid-selection ui-grid-tree-view class="grid"></div>
</div>
<script src="app.js"></script>
<script type="text/ng-template" id="csra-row-template.html">
<div ng-dblclick="grid.appScope.showInfo(row)" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }" ui-grid-cell></div>
</script>
</body>
</html>
UI Grid considers any element without the $$treeLevel property as a child of the last element with $$treeLevel until another object with a $$treeLevel property is found, even if the array is flat.
Your writeoutNode function is assigning a $$treeLevel value only for elements with children, currently ids 2627, 5119 and 2718. So any other element is treated as children of those objects.
To show the real hierarchy, change the writeoutNode function to assign the $$treeLevel property accordingly for every element.
Some insight from my experience with Angular UI Grid
Always have a value assigned to $$treeLevel, don't leave it blank or it'll cause either wrong parent or indentation assignment.
Due to the recursive nature of the problem, I am not sure there is a solution with the tree level being passed around for all tree types, there will always be some glitch.
You will need to take care of indentation manually.Always keep the child nodes assigned to the correct parent, then work your way with dynamic CSS indentation.
In my use-case, every child node had its parent ID, as opposed to the author's structure.
I've used lodash, and fully tested the algorithm.
Hope people will find it useful.
Solution
function buildFlatArr(childArray, dataArray ){
childArray.forEach(childNode => {
let parent = _.find(dataArray,item=>{ return childNode.parentId === item.id });
childNode.$$treeLevel= (parent) ? parent.$$treeLevel+1 : 0;
dataArray.push( childNode );
if (childNode.children && childNode.children.length > 0) {
buildFlatArr(childNode.children, dataArray);
}
});
};
let flarArr = buildFlatArr(someArr, []);
I have adapted one of the Wijmo Data (with wijgrid) samples (breeze-native.html) to work with Angular. It does just fine.
However, when I try to adapt it to run on my data, I get the dreaded 'RangeError: Maximum call stack size exceeded' error. As my data is not a 'Breeze Standard', I have used the JsonResultsAdapter and my own Metadata to create the entities. This is ok with Angular, but doesn't like wijmo.
The data from the Northwind example looks like this:
[{"Product_ID":1,"Supplier_ID":1,"Category_ID":1,"Product_Name":"Chai","English_Name":"Dharamsala Tea","Quantity_Per_Unit":"10 boxes x 20 bags","Unit_Price":18.0,"Units_In_Stock":39,"Units_On_Order":0,"Reorder_Level":10,"Discontinued":false},{...}]
My data is like this:
[{"ID":"1","idUser":"1","idOrganisation":"2","isActive":"1","idRole":"1","SubOrganisations":"1","strEMail":"bob#gmail.com","strTel":null,"strUsername":"bob","strPassword":"*196BDEDE2AE4F84CA44C47D54D78478C7E2BD7B7","datCreated":null,"datLastModified":null,"idUserLastModified":null,"idUserCreated":null},{...}]
As there's no real difference, the problem must lie in the metadata or the JsonResultsAdapter.
Here the module with the JsonResultsAdapter:
angular.module('app_jsonResultsAdapter',['app_metadata'])
/* jsonResultsAdapter: parses data into entities */
.value('bem_jsonResultsAdapter',
new breeze.JsonResultsAdapter({
name: "seltec",
extractResults: function(json) {
return json.results;
},
visitNode: function(node, mappingContext, nodeContext) {
var entityType = "Users";
var propertyName = nodeContext.propertyName;
var ignore = propertyName && propertyName.substr(0, 1) === "$";
return {
entityType: entityType,
nodeId: node.$id,
nodeRefId: node.$ref,
ignore: ignore
};
}
}));
Here's the module with the metadata:
angular.module('app_metadata', ['logger'])
.factory("bem_metadata", function () {
var bem_Metadata = {
getUserMetadata: getUserMetadata
};
return bem_Metadata;
function getUserMetadata(){
var x = {
"metadataVersion": "1.0.4",
// "namingConvention": "camelCase",
"localQueryComparisonOptions": "caseInsensitiveSQL",
"structuralTypes": [
{
"shortName": "Users",
"namespace": "Models.Seltec-T_Users",
"autoGeneratedKeyType": "None",
"defaultResourceName": "Users",
"dataProperties": [
// `ID` varchar(38) NOT NULL,
{
"name": "ID",
"dataType": "String",
"isPartOfKey": true,
"validators": [
{
"name": "string"
}
]
},
// `idUser` varchar(38) DEFAULT NULL,
{
"name": "idUser",
"dataType": "String",
"validators": [
{
"name": "string"
}
]
},
// `idOrganisation` int(11) DEFAULT NULL,
{
"name": "idOrganisation",
"dataType": "Int32",
"validators": [
{
"name": "int32"
}
]
},
// `isActive` tinyint(1) DEFAULT '0',
{
"name": "isActive",
"dataType": "Boolean",
"validators": [
{
"name": "bool"
}
]
},
// `idRole` int(11) DEFAULT '0',
{
"name": "idRole",
"dataType": "Int32",
"validators": [
{
"name": "int32"
}
]
},
// `SubOrganisations` tinyint(1) DEFAULT '0',
{
"name": "SubOrganisations",
"dataType": "Boolean",
"validators": [
{
"name": "bool"
}
]
},
// `strEMail` varchar(100) DEFAULT NULL,
{
"name": "strEMail",
"dataType": "String",
"validators": [
{
"name": "string"
}
]
},
// `strTel` varchar(30) DEFAULT NULL,
{
"name": "strTel",
"dataType": "String",
"validators": [
{
"name": "string"
}
]
},
// `strUsername` varchar(255) DEFAULT NULL,
{
"name": "strUsername",
"dataType": "String",
"validators": [
{
"name": "string"
}
]
},
// `strPassword` varchar(255) DEFAULT NULL,
{
"name": "strPassword",
"dataType": "String",
"validators": [
{
"name": "string"
}
]
},
// `datCreated` datetime DEFAULT NULL,
{
"name": "datCreated",
"dataType": "DateTime",
"validators": [
{
"name": "date"
}
]
},
// `datLastModified` datetime DEFAULT NULL,
{
"name": "ID",
"dataType": "DateTime",
"validators": [
{
"name": "date"
}
]
},
// `idUserLastModified` varchar(38) DEFAULT NULL,
{
"name": "idUserLastModified",
"dataType": "String",
"validators": [
{
"name": "string"
}
]
},
// `idUserCreated` varchar(38) DEFAULT NULL,
{
"name": "idUserCreated",
"dataType": "String",
"validators": [
{
"name": "string"
}
]
}
]
}
],
"resourceEntityTypeMap": {
"User": "User"
}
}
return x;
}
});
And the controller:
angular.module('app',['app_metadata', 'wijmo'])
.controller('Ctrl', function ($scope, bem_metadata){
breeze.config.initializeAdapterInstance("modelLibrary", "backingStore", true);
var j = new breeze.JsonResultsAdapter({
name: "seltec",
extractResults: function(json) {
return json.results;
},
visitNode: function(node, mappingContext, nodeContext) {
var entityType = "Users";
var propertyName = nodeContext.propertyName;
var ignore = propertyName && propertyName.substr(0, 1) === "$";
return {
entityType: entityType,
nodeId: node.$id,
nodeRefId: node.$ref,
ignore: ignore
};
}
});
var dataService = new breeze.DataService({
serviceName: "http://lanet.local/backend/webservice/public/rest/index.php/",
hasServerMetadata: false,
jsonResultsAdapter: j
});
var ms = new breeze.MetadataStore();
var x = bem_metadata.getUserMetadata();
ms.importMetadata (x)
var manager = new breeze.EntityManager({
dataService: dataService,
metadataStore: ms
});
$scope.users = [];
var query = new breeze.EntityQuery("users");
manager.executeQuery(query).then(function (data) {
$scope.users = data.results;
$scope.$digest();
}).fail(function (e) {
alert(e);
});
});
All I have in the html is the grid:
<wijgrid id="dataGrid" data="{{users}}" allowEditing="true" allowSorting="true" columnsAutogenerationMode="none"
style="width: 600px;">
<columns>
<column headerText="Username" dataKey="strUsername"></column>
<column headerText="Email" dataKey="strEMail"></column>
</columns>
</wijgrid>
What I want to know is, why should my Metadata cause such a problem with the wijgrid. It works with data from a Web API so I know it SHOULD work!!
Ta!
Craig
PS: I guess it would help if I added the Northwind example:
<!DOCTYPE html>
<html lang="en" ng-app="wijmo">
<head>
<title>Data - BreezeJs without BreezeDataView</title>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="description" content="Remote shaped data downloaded by BreezeJs shown in a wijgrid"/>
<meta name="keywords" content=""/>
<meta name="author" content="ComponentOne"/>
<!--jQuery References-->
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js" type="text/javascript"></script>
<!--Theme-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css"/>
<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20131.3.min.css" rel="stylesheet" type="text/css"/>
<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20131.3.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20131.3.js" type="text/javascript"></script>
<!--<script src="http://cdn.wijmo.com/wijmo/wijmo.data.breeze.js" type="text/javascript"></script>-->
<script type="text/javascript" src="Scripts/wijmo.data.breeze.js"></script>
<!--Breeze.js References -->
<script type="text/javascript" src="Scripts/q.js"></script>
<script type="text/javascript" src="Scripts/breeze.debug.js"></script>
<script type="text/javascript" src="Scripts/datajs-1.0.3.js"></script>
<script type="text/javascript" src="Scripts/toastr.min.js"></script>
<script src="Scripts/angular.js"></script>
<script src="http://cdn.wijmo.com/interop/angular.wijmo.3.20131.3.js" type="text/javascript"></script>
<style type="text/css">
table {
border-collapse: collapse;
}
table caption {
font-size: 150%;
}
th, td {
border: 1px solid #AAAAAA;
text-align: center;
padding: 0.5em;
}
th {
background-color: #CCCCCC;
}
</style>
<script id="scriptInit" type="text/javascript">
$.support.cors = true;
function ViewModel($scope) {
var dataService = new breeze.DataService({
serviceName: "http://demo.componentone.com/aspnet/NorthwindAPI/api/read",
hasServerMetadata: false
});
var ms = new breeze.MetadataStore();
var manager = new breeze.EntityManager({
dataService: dataService,
metadataStore: ms
});
$scope.products = [];
var query = new breeze.EntityQuery("Product");
manager.executeQuery(query).then(function (data) {
$scope.products = data.results;
$scope.$digest();
}).fail(function (e) {
alert(e);
});
}
</script>
</head>
<body class="demo-single" ng-controller="ViewModel">
<div class="container">
<div class="header">
<h2>Data - BreezeJs without BreezeDataView</h2>
</div>
<div class="main demo">
<h1>Products</h1>
<wijgrid id="dataGrid" data="{{products}}" allowEditing="true" allowSorting="true"
columnsAutogenerationMode="none"
style="width: 600px;">
<columns>
<column headerText="Product Name" dataKey="Product_Name"></column>
<column headerText="English Name" dataKey="English_Name"></column>
</columns>
</wijgrid>
</div>
</div>
</body>
</html>