I wanted to add autocomplete kendo box in kendo grid using angularjs.
Sample here is in JQUERY Kendo grid in Product Name field.Click on field and edit or add new row. Please help with such implementation using AngularJS Kendo Grid,
function Editor2(container, options) {
$('<input id="autocomplete" required data-text-field="ProductName" data-value-field="ProductID" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoAutoComplete({
dataSource: dataSource,
dataTextField: "ProductName"
});
}
Please run below code in plunker to learn how to bind AngularJS Kendo Grid
<!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 rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<kendo-grid options="mainGridOptions">
</kendo-grid>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.countryNames = [
"Albania",
"Andorra",
"Armenia",
"Austria",
"Azerbaijan",
"Belarus",
"Belgium",
"Bosnia & Herzegovina",
"Bulgaria",
"Croatia",
"Cyprus",
"Czech Republic",
"Denmark",
"Estonia",
"Finland",
"France",
"Georgia",
"Germany",
"Greece",
"Hungary",
"Iceland",
"Ireland",
"Italy",
"Kosovo",
"Latvia",
"Liechtenstein",
"Lithuania",
"Luxembourg",
"Macedonia",
"Malta",
"Moldova",
"Monaco",
"Montenegro",
"Netherlands",
"Norway",
"Poland",
"Portugal",
"Romania",
"Russia",
"San Marino",
"Serbia",
"Slovakia",
"Slovenia",
"Spain",
"Sweden",
"Switzerland",
"Turkey",
"Ukraine",
"United Kingdom",
"Vatican City"
];
var data = new kendo.data.DataSource({
data: [
{Name: "Albania"},
{Name:"Andorra"},
{Name:"Armenia"},
{Name:"Austria"},
{Name:"Azerbaijan"},
{Name:"Belarus"},
{Name:"Belgium"},
{Name:"Bosnia & Herzegovina"},
{Name:"Bulgaria"},
{Name:"Croatia"},
{Name:"Cyprus"},
{Name:"Czech Republic"},
{Name:"Denmark"},
{Name:"Estonia"},
{Name:"Finland"},
{Name:"France"},
{Name:"Georgia"},
{Name:"Germany"},
{Name:"Greece"},
{Name:"Hungary"},
{Name:"Iceland"},
{Name:"Ireland"},
{Name:"Italy"},
{Name:"Kosovo"},
{Name:"Latvia"},
{Name:"Liechtenstein"},
{Name:"Lithuania"},
{Name:"Luxembourg"},
{Name:"Macedonia"},
{Name:"Malta"},
{Name:"Moldova"},
{Name:"Monaco"},
{Name:"Montenegro"},
{Name:"Netherlands"},
{Name:"Norway"},
{Name:"Poland"},
{Name:"Portugal"},
{Name:"Romania"},
{Name:"Russia"},
{Name:"San Marino"},
{Name:"Serbia"},
{Name:"Slovakia"},
{Name:"Slovenia"},
{Name:"Spain"},
{Name:"Sweden"},
{Name:"Switzerland"},
{Name:"Turkey"},
{Name:"Ukraine"},
{Name: "United Kingdom"},
{Name:"Vatican City"}
]});
Editor2 = function (container, options){
$('<input data-bind="value:' + options.field + '" style="width: 100px" />')
.appendTo(container)
.kendoAutoComplete({
dataSource: options.values
});};
$scope.mainGridOptions = {
dataSource: data,
sortable: true,
pageable: true,
columns: [{
field: "Name",
title: "Name",
width: "120px",
editor: Editor2,
values: $scope.countryNames
}],editable: true
};
})
</script>
</body>
</html>
Code from http://demos.telerik.com/kendo-ui/grid/angular,
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="styles/kendo.dataviz.default.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<kendo-grid options="mainGridOptions">
<div k-detail-template>
<kendo-tabstrip>
<ul>
<li class="k-state-active">Orders</li>
<li>Contact information</li>
</ul>
<div>
<div kendo-grid k-options="detailGridOptions(dataItem)"></div>
</div>
<div>
<ul>
<li>Country: <input ng-model="dataItem.Country" /></li>
<li>City: <input ng-model="dataItem.City" /></li>
<li>Address: {{dataItem.Address}}</li>
<li>Home phone: {{dataItem.HomePhone}}</li>
</ul>
</div>
</kendo-tabstrip>
</div>
</kendo-grid>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$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,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
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.detailGridOptions = function(dataItem) {
return {
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 5,
filter: { field: "EmployeeID", operator: "eq", value: dataItem.EmployeeID }
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ field: "OrderID", title:"ID", width: "56px" },
{ field: "ShipCountry", title:"Ship Country", width: "110px" },
{ field: "ShipAddress", title:"Ship Address" },
{ field: "ShipName", title: "Ship Name", width: "190px" }
]
};
};
})
</script>
</body>
</html>
Related
I want to make the data inside one of the cell in ui-grid as clickable.
Here is my code:-
InventoryList.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.gridStyle {
border: 5px solid #d4d4d4;
height: 200px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" />
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="../Scripts/AngularControllers/InventoryListController.js"></script>
</head>
<body ng-app="appHome">
<div ng-controller="ctrlInvList">
<div class="gridStyle" ui-grid="gridInvList">
</div>
</div>
</body>
</html>
InventoryListController.js
var myApp = angular.module('appHome', ['ui.grid', 'ui.grid.pagination', 'ui.bootstrap']);
myApp.controller("ctrlInvList", ['$scope', 'MetadataOrgFactory', '$uibModal', function ($scope, MetadataOrgFactory, $uibModal) {
$scope.gridInvList = {
data: 'invlistdata',
enableFiltering: true,
paginationPageSize: 10,
columnDefs: [
{
field: 'SiteInventoryNumber', displayName: 'Inventory Number',
},
{ field: 'InventoryTypeName', displayName: 'Inventory Type' },
{ field: 'MakeModel', displayName: 'Make Model' },
{ field: 'CityName', displayName: 'City Name' },
{ field: 'Specification', displayName: 'Specification' },
]
}
}]);
If I go by this code then the grid looks like below:-
But when I want to make "Inventory Number" Column as Clickable then I introduce following code as searched from internet. Please look at the cellTemplate portion
InventoryListController.js
var myApp = angular.module('appHome', ['ui.grid', 'ui.grid.pagination', 'ui.bootstrap']);
myApp.controller("ctrlInvList", ['$scope', 'MetadataOrgFactory', '$uibModal', function ($scope, MetadataOrgFactory, $uibModal) {
$scope.gridInvList = {
data: 'invlistdata',
enableFiltering: true,
paginationPageSize: 10,
columnDefs: [
{
field: 'SiteInventoryNumber', displayName: 'Inventory Number',
cellTemplate: '<div ng-click="grid.appScope.foo()" ></div>'
},
{ field: 'InventoryTypeName', displayName: 'Inventory Type' },
{ field: 'MakeModel', displayName: 'Make Model' },
{ field: 'CityName', displayName: 'City Name' },
{ field: 'Specification', displayName: 'Specification' },
]
}
$scope.foo = function ()
{
alert("Hello");
}
}]);
This output the following result:-
Can you please let me know as what needs to be rectified in order to get the correct results?
Add ui-grid-cell-contents class to your cell template and your function will trigger. It's probably required by one of the ui-grid directives.
Use {{COL_FIELD}} to display the cell contents.
The default cell template looks like this:
<div class="ui-grid-cell-contents">{{COL_FIELD}}</div>
var myApp = angular.module('appHome', ['ui.grid', 'ui.grid.pagination', 'ui.bootstrap']);
myApp.controller("ctrlInvList", ['$scope', '$uibModal', function($scope, $uibModal) {
$scope.gridInvList = {
data: [
{
SiteInventoryNumber: "INV100001231",
InventoryTypeName: "test"
}
],
enableFiltering: true,
paginationPageSize: 10,
columnDefs: [{
field: 'SiteInventoryNumber',
displayName: 'Inventory Number',
cellTemplate: '<div ng-click="grid.appScope.foo()" class="ui-grid-cell-contents">{{COL_FIELD}}</div>'
},
{
field: 'InventoryTypeName',
displayName: 'Inventory Type'
},
{
field: 'MakeModel',
displayName: 'Make Model'
},
{
field: 'CityName',
displayName: 'City Name'
},
{
field: 'Specification',
displayName: 'Specification'
},
]
}
$scope.foo = function() {
alert("Hello");
}
}]);
.gridStyle {
border: 5px solid #d4d4d4;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" />
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div ng-app="appHome">
<div ng-controller="ctrlInvList">
<div class="gridStyle" ui-grid="gridInvList"></div>
</div>
</div>
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;
}
I tried implementing the Kendo spreadsheet widget using angular directive but it does not show up.
Here is my code:
HTML:
<div kendo-spreadsheet style="height:580px;" k-options="spreadsheetOptions"></div>
Controller:
$scope.spreadsheetOptions = {
sheets: [{
name: "Food Order",
mergedCells: [
"A1:G1"
],
rows: [{
height: 70,
cells: [{
value: "My Company", fontSize: 32, textAlign: "center"
}]
}],
}],
excel: {
fileName: "Order.xlsx"
}
};
No errors shown in the console either. Any ideas?
Kendo Angular Spreadsheet directive works. Please see below example. You can also paste below example in html file.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.bootstrap.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<div kendo-spreadsheet style="width:100%" k-options="spreadsheetOptions"></div>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.spreadsheetOptions = {
sheets: [{
name: "Food Order",
mergedCells: [
"A1:G1"
],
rows: [{
height: 70,
cells: [{
value: "My Company", fontSize: 32, textAlign: "center"
}]
}],
}],
excel: {
fileName: "Order.xlsx"
}
};
})
</script>
</body>
</html>
I have used angularjs ui-grid in my project.
Below is my code
<link href="#Url.Content("~/Content/js-image-slider.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/js-image-slider.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/ui-grid.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/gemscustomstyle.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo.web.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo.all.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>
<script src="#Url.Content("~/Scripts/js-image-slider.js")"></script>
<script src="#Url.Content("~/Scripts/jquery.blockUI.js")"></script>
<script src="#Url.Content("~/Scripts/AngularGrid/angularjs.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/AngularGrid/angular-ng-route.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/AngularGrid/ui-grid.min.js")" type="text/javascript"></script>
<div ng-app = "myapp" ng-controller="CitywiseReportController">
<div id="grid1" ui-grid="gridoptions" ui-grid-grouping ui-grid-resize-columns class="myGrid" style="width: 98%"></div>
</div>
<script type="text/javascript">
var app = angular.module('myapp', ['ui.grid']);
app.controller('CitywiseReportController', function ($scope, CitywiseReportService) {
$scope.configureHeadCountGrid = function () {
$scope.gridoptions = {
data:'cityReportData',
enableGridMenu: true,
enableFiltering: true,
enableColumnResizing: true
}
//The grid options
$scope.gridoptions.columnDefs = [
{ name: 'Duty Travel ID', field: 'DutyTravelId', width: '90' },
{ name: 'Staff ID', field: 'StaffNumber', width: '90' },
{ name: 'Staff Name', field:'StaffName', width: '120' },
{ name: 'DT Cost Center', field: 'CostCenter', width: '120' },
{ name: 'DT Travel Category', field: 'TravelCategory', width: '120' },
{ name: 'City Code', field: 'CityCode', width: '60' },
{ name: 'City Name', field: 'CityName', width: '100' },
{ name: 'Departure Date', field: 'DepartureDate', width: '120', type: 'date', format: '{0:dd-MMM-yyyy}' },
{ name: 'Arrival Date', field: 'ArrivalDate', width: '120', type: 'date', format: '{0:dd-MMM-yyyy}' }
];
}
getStudents();
function getStudents() {
CitywiseReportService.getStudents()
.success(function (studs) {
$scope.cityReportData = studs;
})
.error(function (error) {
$scope.status = 'Unable to load customer data: ' + error.message;
});
}
$scope.configureHeadCountGrid();
});
app.factory('CitywiseReportService', ['$http', function ($http) {
var CitywiseReportService = {};
CitywiseReportService.getStudents = function () {
return $http.get('/DutyTravel/GetCityWiseDTReport');
};
return CitywiseReportService;
} ]);
</script>
but when grid displays grid filter icon image showing as chinese font.
and in chrome console it is showing
http://localhost:58206/Content/ui-grid.woff
http://localhost:58206/Content/ui-grid.ttf
Need help
You need to add mimeType settings inside your web.config
<system.webServer>
<staticContent>
<mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
<mimeMap fileExtension=".woff2" mimeType="application/font-woff" />
</staticContent>
</system.webServer>
Here i have created a record using ng-grid but wat i need is when i select the selectAll checkbox the selected records should appear in the same page .when i unselect any checkbox in a record the tick mark in selectAll checkbox should not appear in the checkbox the same example which we use in our g-mail plz help me wit this
-----here is my index.html-------
<!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="script.js"></script>
</head>
<body ng-controller="MyCtrl">
<label>
<input type="checkbox"
ng-model="allChecked"
ng-click="checkAll()" /> Select All
</label>
<span ng-model="person.check" ng-click="changeCheckAll()">
<div class="gridStyle" ng-grid="gridOptions" ></div>
</span>
<span ng-repeat="person in people | filter: {check:true}">
<div class="gridStyle" ng-grid="gridOptions1" ></div>
</span>
</body>
</html>
And here is my script...
-------script.js-------
// Code goes here
// script.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.people = [{
name: "Moroni",
age: 50,
}, {
name: "Tiancum",
age: 43,
}, {
name: "Jacob",
age: 27,
}, {
name: "Nephi",
age: 29,
}, {
name: "Enos",
age: 34,
}];
$scope.gridOptions = {
data: 'people',
columnDefs: [{field: 'check',
displayName: 'Check',
cellTemplate: '<input type="checkbox">'
}, {
field: 'age',
displayName: 'Age'
}, {
field: 'name',
displayName: 'Name'
}]
};
$scope.gridOptions1 = {
data: 'people',
columnDefs: [ {
field: 'age',
displayName: 'Age'
}, {
field: 'name',
displayName: 'Name'
}]
};
$scope.checkAll = function() {
for(var i=0; i < $scope.people.length; i++) {
$scope.people[i].check = $scope.allChecked;
}
};
$scope.changeCheckAll = function() {
for(var i = 0; i < $scope.people.length; i++) {
if (!$scope.people[i].check) {
$scope.allChecked = false;
return false;
}
}
$scope.allChecked = true;
};
});
here is my plnkr:http://plnkr.co/edit/ubatnOV83gz1sF3zaVTf?p=preview
Use showSelectionCheckbox to set grid options. Here is the link
http://angular-ui.github.io/ui-grid/