Angular Kendo Grid widget, which package file to use? - angularjs

I'm using the "kendo.web.min.js" to create a kendo grid through the scope, like that:
<div id="grid" kendoui-grid ng-model="rows"></div>
$("#grid").kendoGrid({....
And in the scope I get the element by its id and build the grid on it.
Now I need to use it as a directive, like that (without an id):
<div kendo-grid k-options="mainGridOptions"></div>
As shown here:
http://kendo-labs.github.io/angular-kendo/#/Grid
But the grid fails to show.
Is the "kendo.web.min.js" the right file?
If not, which one should I use?
Thanks!

In addition to the scripts required by Kendo UI you must include the Angular library scripts and the Angular/Kendo integration script.
Here is a full example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Angular + Kendo</title>
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.bootstrap.min.css">
<script src='//code.jquery.com/jquery-1.9.1.js'></script>
<script src="//cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.min.js"></script>
<script src="//kendo-labs.github.io/angular-kendo/angular-kendo.js"></script>
</head>
<body ng-app="angular-kendo-example">
<div ng-controller="GridController">
<div kendo-grid k-options="options" k-data-source="northwind"></div>
</div>
<script>
angular.module('angular-kendo-example', ['kendo.directives']);
function GridController($scope) {
$scope.options = {
sortable: true,
pageable: true,
columns: [{
field: "FirstName",
title: "First Name",
width: "120px"
},{
field: "LastName",
title: "Last Name",
width: "120px"
},{
field: "Country",
width: "120px"
},{
field: "City",
width: "120px"
},{
field: "Title"
}]
};
$scope.northwind = {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 5,
serverPaging: true,
serverSorting: true
};
}
</script>
</body>
</html>
Here is a link to a running fiddle.

Related

How to set localization to Kendo date picker?

I would like to use an existing translation(localization) to the date picker of Kendo.
I have found some resource on git but probably using it wrongly.
This is my HTML:
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/angular">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.903/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bower-angular-translate/2.0.1/angular-translate.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script>
<script src="kendo.culture.he.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<p>{{ 'TITLE' | translate }}</p>
<p>{{ 'FOO' | translate }}</p>
<!-- the DropDown is used to change the culture -->
<kendo-dropdownlist options="dropDownOptions" ng-model="lang"></kendo-dropdownlist>
<!-- k-rebind="mainGridOptions.language" is used to force the widget update -->
<kendo-grid options="mainGridOptions" k-rebind="mainGridOptions.language"></kendo-grid>
<!-- k-rebind="calendarOptions.culture" is used to force the widget update -->
<kendo-calendar options="calendarOptions" k-rebind="calendarOptions.culture"></kendo-calendar>
</div>
</div>
<script>
var app = angular.module("KendoDemos", [ "kendo.directives", "pascalprecht.translate"]);
//set up the language provider (http://angular-translate.github.io/docs/#/guide)
app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('he-IL', {
'TITLE': 'שלום',
'FOO': 'זו פסקה'
});
$translateProvider.preferredLanguage('he-IL');
}]);
function MyCtrl($scope, $translate) {
$scope.lang = "he-IL";
$scope.calendarOptions = {
culture: "he-IL"
}
$scope.dropDownOptions = {
dataValueField: "value",
dataTextField: "text",
dataSource : {
data: [{value:"he-IL",text:"עברית"}]
},
change: function(){
/* The kendo.culture.xx-XX.js files can be pre-loaded in the <head> section of the document,
but the kendo.messages.xx-XX.js file should be loaded on demand when the language is about to change */
/* We are using the jQuery.getScript method to load the messages file
and use the callback function to change the kendo culture, kendo messages and angular-translate language */
$.getScript("./assets/kendo.culture.he-IL.js", function() {
/* $scope.$apply should be used in order to notify the $scope for language change */
$scope.$apply(function(){
$translate.use($scope.lang); //change angular-translate language
kendo.culture($scope.lang); //change kendo culture
/* we use dummy language option in order to force the Grid to rebind */
$scope.mainGridOptions.language = $scope.lang;
/* we change the calendar widget culture option in order to force the Calendar to rebind */
$scope.calendarOptions.culture = $scope.lang;
})
});
}
}
$scope.mainGridOptions = {
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 5,
serverPaging: true,
serverSorting: true
},
sortable: true,
pageable: true,
language: "english",
columns: [{
field: "FirstName",
title: "First Name",
width: "120px"
},{
field: "LastName",
title: "Last Name",
width: "120px"
},{
field: "Country",
width: "120px"
},{
field: "City",
width: "120px"
},{
field: "Extension"
}]
};
}
</script>
</body>
</html>
First, I'm not sure I used getScript("./assets/kendo.culture.he-IL.js" correctly. I'm pointing to local path(in my project) while in examples I have noticed it's pointing to http url.
In addition, the src - <script src="./assets/kendo.culture.he.js"></script> points to messages JS which is also locally.
In Fact, it still shows the datepicker in English
BTW, both culture and messages files are taken from git :
kendo-ui-core

Change cell color angularjs and ui-grid

I have a ui-grid containing two columns firstName and lastName. I set the background-color to blue on the first column (firstName ). If i click on the lastName header column i want to change the lastName column to blue and the firstName column to normal.
I have looked and searched with google but could not find an example on that.
How can I do that?
Here is my app.js
var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', [
'$scope','uiGridConstants', function($scope, uiGridConstants) {
$scope.gridOptions = {
columnDefs: [{
name: 'firstName',
field: 'firstName',
displayName: 'voornaam',
width: 200,
cellClass: 'columnClassName'
}, {
name: 'lastName',
field: 'lastName',
displayName: 'achternaam',
width: 200
}],
data: [{
"firstName": "Cox",
"lastName": "Carney",
"company": "Enormo",
"employed": true
}, {
"firstName": "Lorraine",
"lastName": "Wise",
"company": "Comveyer",
"employed": false
}, {
"firstName": "Nancy",
"lastName": "Waters",
"company": "Fuelton",
"employed": false
}]
};
$scope.loadData = function() {
console.log("clicked");
}
}
]);
Here is my html
<!doctype html>
<html ng-app="app">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/ui-grid.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/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="js/ui-grid.js"></script>
<!-- <script src="/release/ui-grid.css"></script> -->
<script src="js/app.js"></script>
</head>
<body>
<div ng-controller="MainCtrl as ctrl">
<div id="grid" ui-grid="gridOptions" class="grid"></div>
</div>
</body>
</html>
Here is my css
.grid {
width: 500px;
height: 250px;
}
.red {
color: white; background-color: gray !important;
}
.my-css-class {
color: blue
}
.columnClassName[aria-sort="ascending"], .columnClassName[aria-sort="descending"] {
background-color: blue !important;
}
You can use plain old CSS,
When clicking on a header an attribute is added to it:
aria-sort="ascending" or aria-sort="descending"
. sortable[aria-sort="ascending"], . sortable[aria-sort="descending"] {
background-color: blue;
}

datasource not binding to kendo grid

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

Unable to bring value from json to hyperlink in ng-grid

here i want to get the hyperlink value ( in my case data in json object) ie 6 and 7 in hyperlink format. I have converted the cell template but i m not able to get the value of json in the grid. i get "link" as text not its value
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom 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 type="text/javascript" src="main.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>var app = angular.module('myApp', ['ngGrid']);
main.js
app.controller('MyCtrl', function($scope) {
$scope.myData = [{name: "Moroni", age: 50, link: 6},
{name: "Tiancum", age: 43, link: 7},
];
$scope.gridOptions = {
data: 'myData',
columnDefs: [{ field: 'name', displayName: 'Name' },
{ field: 'age', displayName: 'Age' },
{ field: 'link', displayName: 'Link',
cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()">link</div>'
}]
};
});
Give a name to your links:
$scope.myData = [{
name: "Moroni",
age: 50,
link: "http://www.google.com",
linkname: "Google"
}, {
name: "Tiancum",
age: 43,
link: "http://www.stackoverflow.com",
linkname: "Help me!"
}, ];
Then use this celltemplate:
cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><a target="_blank" href="{{row.getProperty(col.field)}}">{{row.entity.linkname}}</a></div>'
Have a look at this Plunker with the full code
Or, if you can not add a field to your json try this template:
cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><a target="_blank" href="{{row.getProperty(col.field)}}">{{row.entity.link}}</a></div>'
Change your template to this:
<div class="ngCellText" ng-class="col.colIndex()">{{ col.link }}</div>

Extjs xml grid not working in chrome, safari, mozilla firefox but works in IE?

i was using extjs for an application but when i verified some of the examples like xml grid, i found that it's not working in chrome and some other browsers as mentioned above but it works fine in ie...
can you please help me solve this issue....here is the code..just in case......
Ext.onReady(function(){
var store = new Ext.data.Store({
url: 'http://dev.sencha.com/deploy/dev/examples/grid/sheldon.xml',
reader: new Ext.data.XmlReader({
record: 'Item',
id: 'ASIN',
totalRecords: '#total'
}, [
{name: 'Author', mapping: 'ItemAttributes > Author'},
'Title', 'Manufacturer', 'ProductGroup'
])
});
// create the grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "Author", width: 120, dataIndex: 'Author', sortable: true},
{header: "Title", width: 180, dataIndex: 'Title', sortable: true},
{header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
{header: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
],
renderTo:'example-grid',
width:540,
height:200
});
store.load();
});
the html file for it is:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>XML Grid Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript" src="xml-grid.js"></script>
<link rel="stylesheet" type="text/css" href="grid-examples.css" />
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script>
<h1>XML Grid Example</h1>
<div id="example-grid"></div>
</body>
</html>
Firefox, Chrome and Safari probably prevent your JavaScript from calling 'http://dev.sencha.com/deploy/dev/examples/grid/sheldon.xml'.
Download the XML to your machine and adjust the URL in your store declaration.
it is because of the "Same origin policy". Please read it for better explanation.

Resources