I am using angularjs ui-grid and it's working well on desktop as well as on mobile also but when I try to move ui-grid columns on mobile or touchable devices then they are not being moved.
Here is my plunkr:
Any help would be appreciated.
Below is code attached also.
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/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.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.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-move-columns class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
And js file code is:-
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.moveColumns']);
app.controller('MainCtrl', ['$scope', function($scope) {
$scope.gridOptions = {
enableSorting: true,
columnDefs: [{
name: 'firstName',
field: 'first-name'
}, {
name: '1stFriend',
field: 'friends[0]'
}, {
name: 'city',
field: 'address.city'
}, {
name: 'getZip',
field: 'getZip()',
enableCellEdit: false
}],
data: [{
"first-name": "Cox",
"friends": ["friend0"],
"address": {
street: "301 Dove Ave",
city: "Laurel",
zip: "39565"
},
"getZip": function() {
return this.address.zip;
}
}]
};
}]);
Related
I have an angularjs accordion whose data is coming from json,but here its working fine but in my project accordion is not working.Is there any other way to do it.Below is my code.I am new to angularjs.Thanks in advance.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.2.0.js"></script>
<script src="app.js"></script>
<style>
.test1{
background: #000;
color: #fff;
padding: 10px;
}
</style>
</head>
<body>
<div ng-app="plunker" ng-controller="MainCtrl">
<div>
<div>
<div ng-repeat="test in items">
<div class="test1" ng-click="handleClick(test)">
{{test.title}}
</div><br>
<div class="test2" ng-show="selectedItem==test"> {{test.location}}</div><br>
</div>
</div>
</div>
</div>
app.js
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
$scope.items = [
{
"title": "firstitem",
"location": "location1"
},
{
"title": "seconditem",
"location": "location2"
},
{
"title": "thirditem",
"location": "location3"
}
];
$scope.handleClick = function (test) {
$scope.selectedItem = test;
}
});
var app = angular.module('plunker', ['ngAnimate', 'ui.bootstrap']);
app.controller('MainCtrl', function ($scope) {
$scope.oneAtATime = true;
$scope.items = [
{
title: 'firstitem',
location: 'location1'
},
{
title: 'seconditem',
location: 'location2'
},
{
title: 'thirditem',
location: 'location3'
}
];
});
<html ng-app="plunker">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<script src="app.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body >
<div ng-controller="MainCtrl">
<uib-accordion close-others="oneAtATime">
<uib-accordion-group heading="{{test.title}}" ng-repeat="test in items">
{{test.location}}
</uib-accordion-group>
</div>
</body>
</html>
You can create Angularjs accordion using the following way easily.
HTML
<html ng-app="plunker">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<script src="app.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body >
<div ng-controller="MainCtrl">
<uib-accordion close-others="oneAtATime">
<uib-accordion-group heading="{{test.title}}" ng-repeat="test in items">
{{test.location}}
</uib-accordion-group>
</div>
</body>
</html>
app.js
var app = angular.module('plunker', ['ngAnimate', 'ui.bootstrap']);
app.controller('MainCtrl', function ($scope) {
$scope.oneAtATime = true;
$scope.items = [
{
title: 'firstitem',
location: 'location1'
},
{
title: 'seconditem',
location: 'location2'
},
{
title: 'thirditem',
location: 'location3'
}
];
});
Check my JSFiddle for more clarification.
Good Luck!
I'm trying to sort a grid on a column where the values are in dollars (with $ and , included) but the sorting doesn't work correctly on that - is there a way to get the sorting to work on this, or if necessary, set the values to numbers and then display as money?
i have:
$scope.data = [
{ 'value': '$1,000,000' },
{ 'value': '$100,000' },
....
{ 'value': '$1,000' }
];
$scope.gridOptions = {
enableSorting: true,
data: $scope.data,
columnDefs: [
...
{ name: 'Value', field: 'value', width: 110 }
]
I dont see your exact Html and other JS code , So I tried myself Click on a column header to sort by that column. If you missed anything in your code please include it.I posted my working example.,
Html code ,
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.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">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<br>
<br>
<div id="grid1" ui-grid="gridOptions1" class="grid"></div>
<br>
</div>
<script src="app.js"></script>
</body>
</html>
JS Code
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
$scope.data = [
{ 'value': '$1,000,000' },
{ 'value': '$100,000' },
{ 'value': '$1,000' }
];
$scope.gridOptions1 = {
enableSorting: true,
columnDefs: [
{ field: 'value',
name:'value'},
],
};
$scope.gridOptions1.data = $scope.data;
}]);
This is my first time trying to use a Kendo control, and my BA is requiring it for my current project (I have been using Angular-ui-grid). I can't get the Kendo grid to show at all with test data and I am clueless as to what I am missing. The Console in Chrome says "Kendo requires JQuery to be loaded before Angular. However, the JQuery bundle is set to load first. I even put jquery-1.8.2.js before the angular.js script tag, but it still says the same thing I have the following script tags in my _Layout.cshtml page:
#Styles.Render("~/CSS/bootstrap")
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/app/app.js"></script>
<script src="~/Scripts/ui-bootstrap-tpls-0.14.3.js"></script>
<script src="~/Scripts/dirPagination.js"></script>
<script src="~/Scripts/app/checklist-model.js"></script>
<script src="~/Scripts/angular-sanitize.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/Scripts/angular-touch.js"></script>
<script src="~/Scripts/angular-animate.js"></script>
<script src="~/Scripts/pdfmake/pdfmake.min.js"></script>
<script src="~/Scripts/pdfmake/vfs_fonts.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<link href="~/Content/ui-grid.css" rel="stylesheet" />
<script src="~/Scripts/ui-grid.js"></script>
<script src="~/Scripts/draggable-rows.js"></script>
<script src="~/Scripts/app/Home/OperatorHomeCtrl.js"></script>
<script src="~/Scripts/app/Home/operatorHomeService.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--This bundle was moved by the Telerik VS Extensions for compatibility reasons-->
<script src="#Url.Content("~/Scripts/kendo/2015.1.429/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2015.1.429/jszip.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2015.1.429/kendo.all.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2015.1.429/kendo.aspnetmvc.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
<script src="~/Scripts/angular-kendo.js"></script>
Here is my module:
var app = angular.module('myModule', ['ui.bootstrap', 'checklist-model', 'kendo.directives','ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.pagination', 'ui.grid.selection', 'ui.grid.exporter', 'ui.grid.autoResize', 'ui.grid.draggable-rows'])
Here is my Controller:
angular.module('myModule').controller("TestCtrl", function ($compile, $scope, $log) {
$scope.gridOptions = {
pageable: false,
batch: false,
reorderable: true,
sortable: true,
editable: "inline",
dataSource: new kendo.data.DataSource({
data: [
{ id: 1, name: "x" },
{ id: 2, name: "y" }
],
schema: {
model: {
id: "id",
fields: {
'Name': { type: "string", editable: true },
}
}
}
}),
columns: [
{ field: "name" },
{ template: '<button class=\'k-button\' ng-click=\'test("custom1")\'><i class="icon-edit"></i>custom1</button>' },
{
command: [
{ name: "edit", text: " " },
{ name: "destroy", text: " " },
{ template: '<button class=\'k-button\' ng-click=\'test("custom2")\'><i class="icon-edit"></i>custom2</button>' }
]
}
]
};
$scope.test = function (m) {
alert(m)
};
});
Here is my HTML:
<script src="~/Scripts/app/Test/TestCtrl.js"></script>
<div ng-app="myModule" ng-controller="TestCtrl">
<kendo-grid k-options="gridOptions">
</kendo-grid>
</div>
Can someone please tell me what I am missing here?
Any assistance is greatly appreciated!
Got the grid to show up, although the headers don't line up correctly with the body. It did not like the Script tag written as:
<script src="~/Scripts/angular-kendo.js"></script>
I had to change it to:
<script src="#Url.Content("~/Scripts/angular-kendo.js")"></script>
Something's causing the header cells to not line-up correctly, but at least the grid is showing. Thanks all for trying to help!
I am not able to get the kendo-grid on my html screen. It does not shows any error but does not shows the outut as well.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body ng-app="KendoDemos">
<h1>Customer list</h1>
<div ng-controller="CustomerController">
<!--<kendo-grid options="mainGridOptions">
</kendo-grid>-->
<div ng-controller="CustomerController" id="myKendoDemos" kendo-grid k-data-source="gridData" k-columns="gridColumns"></div>
</div>
<link href="Content/kendo/2014.2.716/kendo.common.min.css" rel="stylesheet" />
<link href="Content/kendo/2014.2.716/kendo.default.min.css" rel="stylesheet" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min.js"></script>
<!--<script src="Scripts/kendo/2014.2.716/kendo.grid.min.js"></script>
<script src="Scripts/kendo/2014.2.716/kendo.core.min.js"></script>-->
<script>
var app = angular.module("KendoDemos", ["ngRoute"]);
app.controller("CustomerController", function ($scope) {
$scope.gridData = [
{ customerId: 1, customerName: 'shikhar1' },
{ customerId: 2, customerName: 'shikhar2' },
{ customerId: 3, customerName: 'shikhar3' },
{ customerId: 4, customerName: 'shikhar4' }
//{
//dataSource: "http://localhost:58816/api/Values"
// }
];
$scope.gridColumns = [{
field: "customerId",
title: "customerId",
width: "120px"
}, {
field: "customerName",
title: "customerName",
width: "120px"
}];
});
</script>
</body>
</html>
First of all since you are using kendo-grid, k-data-source and k-columns which are directives, you need to add kendo.directives as an app dependency
var app = angular.module("KendoDemos", ["ngRoute", "kendo.directives"]);
Here's a Working Plunk of a Kendo Grid using your options. Hope this helps
Hello all fellow programmers,
my requirement is to add a column in a grid at runtime or dynamically using ui-grid. I am able to achieve the same using a button, but what I want is to override the predefined functionality of the icon which in on the header of grid used for sorting and some predefined tasks(), I want add one more functionality there
var app = angular.module('app', ['ngAnimate', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
$scope.columns = [{ field: 'name' }, { field: 'gender' }];
$scope.gridOptions = {
enableSorting: true,
columnDefs: $scope.columns,
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
}
};
$scope.add = function() {
$scope.columns.push({ field: 'company', enableSorting: false });
}
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
}]);
.grid {
width: 500px;
height: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.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">
Try clicking the Add button to add the company column.
<br>
<br>
<button id="button_add" class="btn" ng-click="add()">Add</button>
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
of adding a column there
You can use $watch in the add method:
$scope.add = function() {
$scope.columns.push({ field: 'company', enableSorting: false });
$scope.$watch('columns', function(newVal, oldVal){
console.log('added');
}, true);
}
and i noticed that you have a minified script before the doctype of document which should not have to be there.
As I can see from your code example, you got until example 113 of the ui-grid Tutorial.
If you have read a little bit further you would have found this:
Example 303 - Customizing column menu
http://ui-grid.info/docs/#/tutorial/303_customizing_column_menu
As you can see there, you can add items to the columns menu by defining it in the columnDefs.
columnDefs: [
{ field: 'name', enableColumnMenu: false },
{
field: 'company',
menuItems: [
{
title: 'Outer Scope Alert',
icon: 'ui-grid-icon-info-circled',
action: function($event) {
$scope.doWhateverYouLike();
}
}
]