Related
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
I am able to display marker & geojson polygons using leaflet and google maps.but map and polygons are coming in different layers this is not looking good when you zoom in,zoom out or while dragging .How can I display them in a same layer? here is the plunker!
<!DOCTYPE html>
<html>
<style>
.leaflet-google-layer {
z-index: 0 !important;
}
.leaflet-map-pane {
z-index: 100;
}
</style>
<head>
<title>Leaflet Draw</title>
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.draw/lib/leaflet/leaflet.css" />
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.draw/leaflet.draw.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="lib/leaflet/leaflet.ie.css" />
<link rel="stylesheet" href="leaflet.draw.ie.css" />
<![endif]-->
<script src="https://leaflet.github.io/Leaflet.draw/lib/leaflet/leaflet.js"></script>
<script src="https://leaflet.github.io/Leaflet.draw/leaflet.draw.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://maps.google.com/maps/api/js?v=3.25"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
var map = new L.Map('map', {
center: new L.LatLng(-37.7772, 175.2756),
zoom: 9
});
var googleLayer = new L.Google('ROADMAP');
map.addLayer(googleLayer);
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
draw: {
position: 'topleft',
polygon: {
title: 'Draw a sexy polygon!',
allowIntersection: false,
drawError: {
color: '#b00b00',
timeout: 1000
},
shapeOptions: {
color: '#bada55'
},
showArea: true
},
polyline: {
metric: false
},
circle: {
shapeOptions: {
color: '#662d91'
}
}
},
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
map.on('draw:created', function(e) {
var type = e.layerType,
layer = e.layer;
if (type === 'marker') {
layer.bindPopup('A popup!');
}
drawnItems.addLayer(layer);
var geoPoints = layer.toGeoJSON();
console.log(geoPoints);
});
map.on('draw:edited', function(e) {
var layers = e.layers;
layers.eachLayer(function(layer) {
var geoPoints = layer.toGeoJSON();
console.log(geoPoints);
});
});
map.on('draw:deleted', function(e) {
var layers = e.layers;
layers.eachLayer(function(layer) {
var geoPoints = layer.toGeoJSON();
console.log(geoPoints);
});
});
L.geoJson($scope.geojsonFeatures, {
onEachFeature: onEachFeature
});
$scope.geojsonFeatures = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
175.2756, -37.7772
]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
175.27364730834958, -37.77322501372662
],
[
175.27849674224854, -37.776617142149554
],
[
175.28351783752439, -37.784486280685925
],
[
175.28879642486572, -37.781365860467126
],
[
175.2824878692627, -37.7707486617024
],
[
175.27364730834958, -37.77322501372662
]
]
]
}
}]
};
console.log($scope.geojsonFeatures);
L.geoJson($scope.geojsonFeatures, {
onEachFeature: onEachFeature
});
function onEachFeature(feature, layer) {
drawnItems.addLayer(layer);
}
});
</script>
</body>
</html>
Cannot be done. The current implementations of Leaflet plugins for displaying Google maps imply creating a GMaps instance, and trying to keep its view (center and zoom) in sync with Leaflet's view.
This is hackish but currently the only way to do this - and has the obvious disadvantage of not syncing up the pan and zoom transitions (which use different inertia, speed curves and interpolation in both libraries).
Edit: I just created the GoogleMutant Leaflet plugin a couple days ago, which should help with this whole affair.
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
I created a custom marker, I click on it, the info window opens. Then I close the info window. I try to click on the marker again but the info window doesn't open. It works on the other two markers fine.
Below is the plunker sample.
Thanks for the help.
http://plnkr.co/edit/hzfAkQ5UJBLz3BZEy8M9?p=preview
'use strict';
angular.module('app', ['uiGmapgoogle-maps'])
.controller('locatorController', function($scope, $timeout, uiGmapGoogleMapApi) {
var pinSymbol = function(color) {
// console.log("color: "+color);
return {
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
fillColor: color,
fillOpacity: 1,
strokeColor: '#FFFFFF',
strokeWeight: 1.3,
scale: 1.3
};
}
$scope.map = {
center: {
latitude: 39,
longitude: -98
},
control: {},
zoom: 8,
window: {
model: {},
show: false,
options:{
pixelOffset: {width:-1,height:-20}
}
},
markers: [{
"id": "1",
"latitude": "39.05",
"longitude": "-98.55",
options: {
labelContent : '$23',
labelAnchor: "14 75",
labelClass: 'labelClass',
icon: pinSymbol('green'),
labelInBackground: false
}
}, {
"id": "2",
"latitude": "39.15",
"longitude": "-98.45"
}, {
"id": "3",
"latitude": "39.25",
"longitude": "-97.95"
}, ],
markersEvents: {
click: function(marker, eventName, model, args) {
$scope.$apply(function () {
$scope.map.window.model = model;
$scope.map.window.show = true;
});
}
}
};
})
.controller('templateController',function(){});
.location-finder .angular-google-map,
.location-finder .angular-google-map-container {
height: 30em;
}
.selected {
background: #ddd;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div ng-app="app" ng-controller="locatorController" class="location-finder">
<ui-gmap-google-map center="map.center" zoom="map.zoom" control="map.control">
<!-- Map Pins -->
<ui-gmap-markers models="map.markers" idKey="'id'" coords="'self'" options="'options'" events="map.markersEvents">
</ui-gmap-markers>
<!-- InfoWindows -->
<!-- this works, but infowindow is not attached to marker -->
<ui-gmap-window
show="map.window.show"
coords="map.window.model"
templateUrl="'test'"
templateParameter="map.window.model"
options="map.window.options"
ng-cloak>
</ui-gmap-window>
<!-- try this instead of the above and the template does not load -->
<!-- <ui-gmap-window show="map.window.show" coords="map.window.model" templateUrl="'infowindow.tpl'" ng-cloak></ui-gmap-window>-->
</ui-gmap-google-map>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js" charset="utf-8"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.js" charset="utf-8"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.1.0-X.5/angular-google-maps.js" charset="utf-8"></script>
<script src="script.js"></script>
</body>
</html>
http://plnkr.co/edit/hzfAkQ5UJBLz3BZEy8M9?p=preview
I used the following post as guidance.
https://github.com/angular-ui/angular-google-maps/issues/548
I added a hide window value
In the map array, i added the following function:
infoEvents: function (){$scope.map.window.show = false;}
....
}
},
infoEvents: function (){$scope.map.window.show = false;},
doClusterRandomMarkers: true,
clusterOptions: standardClusterType
.....
In the HTML I modified as follows:
closeClick="map.infoEvents"
<ui-gmap-window
show="map.window.show"
coords="map.window.model"
templateUrl="'infowindow.tpl'"
templateParameter="map.window.model"
options="map.window.options"
closeClick="map.infoEvents"
ng-cloak>
</ui-gmap-window>
markers: [{
"id": "1",
"latitude": "39.05",
"longitude": "-98.55",
options: {
labelContent : '$23',
labelAnchor: "11 75",
labelClass: 'labelClass',
icon: pinSymbol('green'),
labelInBackground: true
}
Also, make sure you put the marker options property -> labelInBackground: true
Otherwise, I think the label covers the marker and the events don't register. At least, that is how I interpret it.
That was it.
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>