I have an MVC5 project with the following Index.aspx
When I run the project in VS2013 I can only see the top branches of the tree, with no apparent way to expand them.
Resharper indicates that my references are OK.
I am new to HTML5 programming and Angular. How do I go about trouble shooting this problem?
Index.aspx is
<%# Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<!DOCTYPE html>
<html data-ng-app="myApp">
<head runat="server">
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
<link rel="stylesheet" type="text/css" href="/Content/dx.common.css"/>
<link rel="stylesheet" type="text/css" href="/Content/dx.light.css"/>
<script src="/Scripts/jquery-2.1.4.min.js"></script>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/angular-sanitize.js"></script>
<script src="/Scripts/jquery.globalize/globalize.js"></script>
<script src="/Scripts/dx.webappjs.js"></script>
<script src="/MyJS/script_Angular.js"></script>
</head>
<body>
<div ng-controller="demoController">
<div dx-tree-view="{
dataSource: treeViewData,
dataStructure: 'plain'
}">
</div>
</div>
</body>
</html>
and script_Angular is
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
$scope.treeViewData = dataArray;
});
var dataArray = [
{
id: 1,
text: "Animals",
items: [
{
id: 2,
text: "Cat",
items: [
{ id: 5, text: "Abyssinian" },
{ id: 6, text: "Aegean cat" },
{ id: 7, text: "Australian Mist" }
]
},
{
id: 3,
text: "Dog",
items: [
{ id: 8, text: "Affenpinscher" },
{ id: 9, text: "Afghan Hound" },
{ id: 10, text: "Airedale Terrier" },
{ id: 11, text: "Akita Inu" }
]
},
{
id: 4,
text: "Cow"
}
]
},
{
id: 12,
parentId: 0,
text: "Birds",
items: [
{ id: 13, text: "Akekee" },
{ id: 14, text: "Arizona Woodpecker" },
{ id: 15, text: "Black-chinned Sparrow" }
]
}
];
You should not set option
dataStructure: 'plain'
as it is hierarchical in your case
Removing dataStructure option should help
Docs are here
Related
I am trying to make pieCharts, Barcharts using angular google charts .
I have made a colChartObject and assign data to it and several other options like size,colors but nothing is displaying on the browser.I tried the same using my custom directive too but had the same problem .
Can anyone please let me know the problem in my code??
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-chart/1.0.0-beta.1/ng-google-chart.min.js" type="text/javascript"></script>
</head>
<body ng-app = "ngapp">
<div ng-controller="ChartController">
<div google-chart chart="colChartObject"></div>
</div>
</body>
</html>
JS
var app = angular.module('ngapp',[]);
app.controller('ChartController',function($scope){
$scope.colChartObject={};
$scope.colChartObject.type = "PieChart"; //setting chart type
$scope.colChartObject.displayed = true;
$scope.Colors = [
['#CB7472', '#A895BF', '#F8A769', '#A7514F', '#C0504D', '#9BBB59'],
['#7399C9', '#A8C472', '#8AC8D9', '#426690', '#4BACC6', '#8064A2'],
['#4F81BD', '#C0504D', '#9BBB59', '#A895BF', '#F8A769', '#A7514F'],
['#F79646', '#4BACC6', '#8064A2', '#A8C472', '#8AC8D9', '#426690']
];
// $scope.colChartObject.data = $scope.data; //setting chart data
//setting chart options
$scope.colChartObject.options = {
title: 'nothing special', //chart title
isStacked: 'true', //chart is stacked or not
titleTextStyle: { color: '#000000',
fontName: 'Open Sans', fontSize: 16,
bold: true, italic: false }, //title style
height: 250,
colors: $scope.Colors[Math.floor(Math.random() * $scope.Colors.length)] //colors
};
$scope.colChartObject.data= {
cols: [
{
id: "month",
label: "Month",
type: "string"
},
{
id: "Tables-id",
label: "Tables",
type: "number"
},
{
id: "Chairs-id",
label: "Chairs",
type: "number"
},
{
id: "Bed-id",
label: "Bed",
type: "number"
},
{
id: "Desk-id",
label: "Desk",
type: "number"
}
],
rows: [
{
c: [
{
v: "January"
},
{
v: 19, //value required to plot chart
f: "19 Tables" //description which is shown on mouse hover
},
{
v: 12,
f: "12 Chairs"
},
{
v: 7,
f: "7 Beds"
},
{
v: 4,
f: "4 Desks"
}
]
},
{
c: [
{
v: "February"
},
{
v: 13
},
{
v: 1,
f: "only 1unit"
},
{
v: 12
},
{
v: 2
}
]
},
{
c: [
{
v: "March"
},
{
v: 24
},
{
v: 5
},
{
v: 11
},
{
v: 6
}
]
}
]
}
});
You forgot to declare the module of "google-chart" as a dependency of your module "ngapp".
You have to change
var app = angular.module('ngapp', []);
to
var app = angular.module('ngapp', ['googlechart']);
I am trying to show a chart with datetime x axis, i tried different formats for the date time field and none of them works(chart is not displayed) unless i send as year only for example:2019.
Below is the code i am using.
I appreciate any help on this please.
Regards
Nader
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<link rel="stylesheet" type="text/css" href="//www.shieldui.com/shared/components/latest/chart/css/shield-chart.min.css" />
<script type="text/javascript" src="//www.shieldui.com/shared/components/latest/chart/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="//www.shieldui.com/shared/components/latest/chart/js/shield-chart.all.min.js"></script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
//Fill datasource
var industryPrices = [
{ x: '2009-11-09 00:00:00.000', y: 0.103 },
{ x: '2009-11-09 00:00:00.000', y: 0.105 },
{ x: '2009-11-09 00:00:00.000', y: 0.112 },
{ x: '2009-11-09 00:00:00.000', y: 0.111 }
];
//Initialize the shield chart
$("#chart").shieldChart({
theme: "light",
exportOptions: {
image: false,
print: false
},
primaryHeader: {
text: "Results chart"
},
chartLegend: {
align: 'right',
verticalAlign: 'top',
renderDirection: 'vertical'
},
seriesSettings: {
line: {
enablePointSelection: true,
pointMark: {
activeSettings: {
pointSelectedState: {
drawWidth: 4,
drawRadius: 4
}
}
}
}
},
axisX: {
axisType: 'datetime',
},
axisY: {
title: {
text: "Results"
}
},
//Set data source for chart
dataSeries: [{
seriesType: 'line',
collectionAlias: "Results",
data: industryPrices
}]
});
I am trying to sort json from an external file in angular js.I am able to sort the file easily when i declared json internally as an array but cant able get data when declared json in external file.Please help me.
My code is:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Angularjs UI-Grid Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<script type="text/javascript">
var app = angular.module("uigridApp", ["ui.grid"]);
app.controller("uigridCtrl", function ($scope, $http) {
$http.get("views.json")
.then(function (response) {$scope['users'] = response.data;console.log(response.data);
//$scope['counter'] = Object.keys(response.data).length;
});
/*$scope.users = [
{ name: "Madhav Sai", age: 10, location: 'Nagpur' },
{ name: "Suresh Dasari", age: 30, location: 'Chennai' },
{ name: "Rohini Alavala", age: 29, location: 'Chennai' },
{ name: "Praveen Kumar", age: 25, location: 'Bangalore' },
{ name: "Sateesh Chandra", age: 27, location: 'Vizag' }
];*/
});
</script>
<style type="text/css">
.myGrid {
width: 500px;
height: 200px;
}
</style>
</head>
<body ng-app="uigridApp">
<h2>AngularJS UI Grid Example</h2>
<div ng-controller="uigridCtrl">
<div ui-grid="{ data: users }" class="myGrid"></div>
</div>
</body>
</html>
and views.json contains
[
{
name:"Madhav Sai",
age:10,
location:"Nagpur"
},
{
name:"Suresh Dasari",
age:30,
location:"Chennai"
},
{
name:"Rohini Alavala",
age:29,
location:"Chennai"
},
{
name:"Praveen Kumar",
age:25,
location: "Bangalore"
},
{
name:"Sateesh Chandra",
age:27,
location:"Vizag"
}
]
Please help me.
You can do this,
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.gridOptions = {
columnDefs: [
{ field: 'name' },
{ field: 'age' },
{ field: 'location' }
]
};
$http.get('data.json')
.success(function (data) {
$scope.gridOptions.data = data;
});
}]);
DEMO
Edit: changed ng-controller to ng-app in body tag, was typo
I'm new to angular and im trying to use ng-repeat to post all items in the products[] to html but the {{expressions}} come out as text rather than computing.
I don't have my laptop so I'm testing all this on jsfiddle and w3school's editor from my phone. Maybe it's the editors? Sometimes they seem inconsistent. I'm following 'Shaping Up Angular' on CodeAcademy and w3school's tutorials and and I can't tell what I'm doing wrong, here's the code:
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="myStore">
<div ng-controller="StoreController as store">
<div ng-repeat="x in store.products">
<h1>{{x.name}}</h1>
<h2>${{x.price}}</h2>
<p>{{x.description}}</p>
</div>
</div>
<script>
var app = angular.module('myStore', []);
app.controller('StoreController', function(){
this.products = [
{
name: 'keyboard',
price: 20.47,
description: "well made from scratch",
reviews: [
{
stars: 5,
body: "great fantadtic worksmanship",
author: "global#gmail.com"
},
{
stars: 4,
body: "amazing sale for the best",
author: "insign#gmail.com"
}
];
},
{
name: "bed",
price: 250.69,
description: "sturdy contriction from panama",
reviews: [
{
stars: 2,
body: "could be better",
author: "john#gmail.com"
},
{
stars: 1,
body: "shitty",
author: "carmen#gmail.com"
}
];
} ];
} );
</script>
</body>
</html>
It looks like you have some syntax errors:
var app = angular.module('myStore', []);
app.controller('StoreController', function(){
this.products = [
{
name: 'keyboard',
price: 20.47,
description: "well made from scratch",
reviews: [
{
stars: 5,
body: "great fantadtic worksmanship",
author: "global#gmail.com"
},
{
stars: 4,
body: "amazing sale for the best",
author: "insign#gmail.com"
}
]//remove this: ;
},
{
name: "bed",
price: 250.69,
description: "sturdy contriction from panama",
reviews: [
{
stars: 2,
body: "could be better",
author: "john#gmail.com"
},
{
stars: 1,
body: "shitty",
author: "carmen#gmail.com"
}
]//remove this;
} ];
} );
See working example:
http://plnkr.co/edit/a1f4i0ayEddwTHkBCzQ8?p=preview
you need to change your html tag to <html ng-app="myStore"> and change <body ng-controller="myStore"> to <body>. This is because myStore is a module, not a controller
Update
Exist some unexpected semicolons at each reviews array
It works on this plunker: http://plnkr.co/edit/5hnciX46Hb5wLwDn4R6K
What the other folks said, you have some syntax errors. I removed the semicolons from within this.products and it displayed just fine.
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="myStore">
<div ng-controller="StoreController as store">
<div ng-repeat="x in store.products">
<h1>{{x.name}}</h1>
<h2>${{x.price}}</h2>
<p>{{x.description}}</p>
</div>
</div>
<script>
var app = angular.module('myStore', []);
app.controller('StoreController', function(){
this.products = [
{
name: 'keyboard',
price: 20.47,
description: "well made from scratch",
reviews: [
{
stars: 5,
body: "great fantadtic worksmanship",
author: "global#gmail.com"
},
{
stars: 4,
body: "amazing sale for the best",
author: "insign#gmail.com"
}
]
},
{
name: "bed",
price: 250.69,
description: "sturdy contriction from panama",
reviews: [
{
stars: 2,
body: "could be better",
author: "john#gmail.com"
},
{
stars: 1,
body: "shitty",
author: "carmen#gmail.com"
}
]
} ];
} );
</script>
</body>
</html>
here is my code:
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng- grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
<div class="selectedItems">Selected ID:{{mySelections[0].id}}</div><br><br>
</body>
</html>
app.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.mySelections = [];
$scope.myData = [{empno: 111, name: "Moroni", id: 1},
{empno: 222, name: "Tiancum", id: 2},
{empno: 333, name: "Jacob", id: 3},
{empno: 444, name: "Nephi", id: 4},
{empno: 555, name: "Akon", id: 5},
{empno: 666, name: "Enos", id: 6}];
$scope.gridOptions = {
data: 'myData',
selectedItems: $scope.mySelections,
multiSelect: false
};
});
Q1: I want to hide the id column in ng-grid.
Q2: After hiding the id column, may I get the id value when I select some row?
How can modify the code?
Hear is the plunk: Plunk demo
You can set visible: false right in the column definition:
$scope.gridOptions = {
data: 'myData',
selectedItems: $scope.mySelections,
multiSelect: false,
columnDefs: [
{field: 'empno', displayName: 'empno', visible:false},
{field:'name', displayName:'name'}
]
};
You can also hide the column dynamically by adding this code after you define the grid;
var pos = $scope.gridOptions.columnDefs.map(function (e) { return e.field; }).indexOf('yourFieldName');
if ($scope.basicAdmin || $scope.superAdmin)
$scope.gridOptions.columnDefs[pos].visible = true;
else
$scope.gridOptions.columnDefs[pos].visible = false;
The angularjs grid array is $scope.gridOptions.columnDefs. Change the gridOptions to the name of your grid.
Replace "yourFieldName" with whatever field you are wanting to hide. Next, put whatever condition you want to test.
This took some time to figure out. Hopefully, it will save others some time.
Just add below lines to configuration and it will work
columnDefs: [
{field: 'empno', displayName: 'empno'},
{field:'name', displayName:'name'}
]
To hide particular column in AngularJS UI grid we can use visible: false property like as shown below.
columnDefs: [
{ field: 'userid', visible: false, displayName: 'UserId' },
{ field: 'username', displayName: 'UserName' },
{ field: 'branch', displayName: 'Education' }
]
If you want to check it in complete example you need to write the code like as shown below
<html ng-app="myApp">
<head>
<title>Hide Particular Column in Angularjs UI Grid with Example</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<style type="text/css">
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
height: 210px
}
</style>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
<script type="text/javascript">
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function ($scope) {
$scope.mySelections = [];
$scope.myData = [{ userid: 1, username: "Anil Singh", branch:"B.tech" },
{ userid: 2, username: "Sunil", branch: "Msc" },
{ userid: 3, username: "Sushil", branch: "B.Tech" },
{ userid: 4, username: "Dilip", branch: "MBA" },
{ userid: 5, username: "Upendra", branch: "MD" },
{ userid: 6, username: "Reena", branch: "CA"}];
$scope.gridOptions = {
data: 'myData',
selectedItems: $scope.mySelections,
multiSelect: false,
columnDefs: [
{ field: 'userid', visible: false, displayName: 'UserId' },
{ field: 'username', displayName: 'UserName' },
{ field: 'branch', displayName: 'Education' } ]
};
});
</script>
</body>
</html>
We can use the following code after define the grid
if ($rootScope.CanDelete == false && $rootScope.CanEdit == false)
$scope.ConfigItemGrid.columnDefs[4].visible = false;
else
$scope.ConfigItemGrid.columnDefs[4].visible = true;
Use "hide: true" attribute as below in Angular 2, working fine for me:
columnDefs = [
{ headerName: "Make", hide: true, field: "make", editable: true, filter: 'text'},
{ headerName: "Model", field: "model", filter: 'text'},
{
headerName: "Price",
field: "price",
filter: 'number',
cellClass: 'rightJustify',
cellRenderer: function (params: any) {
return '$' + params.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); //thanks http://stackoverflow.com/users/28324/elias-zamaria
}
}
];
I suggest adding 'visible: false' to the column definitions. If you choose not to specify it in columnDefs, when you post the row back to whatever your backend is, you may null out that field. That's what I've experienced.