I'm using Angular UI-Grid.
This is the grid implementation:
JS
var statusCellTemplate =
'<div class="ui-grid-cell-contents"><span ng-
if="row.entity.statusDetails.length>=2" title="My Tooltip">[Multiple Statuses]
</span></span></div>';
vm.propertyListGridOptions = {
appScopeProvider: vm,
flatEntityAccess: false,
fastWatch: true,
showHeader: false,
columnDefs: [
{
name: app.localize('ListingStatus'),
cellTemplate: statusCellTemplate,
width: 240,
},
],
data: []
};
I need to show the ToolTip by using below logic.Can you tell me how to implement such a logic with the above cellTemplate ?
_.each(row.entity.statusDetails, function (s) {
vm.statusValues += s.status.name + ', ';
});
Note : _.each can be a ng-repeat on angular.
Related
grid for angularjs project. I need datetime picker for the filter.
So I have used angular angular-bootstrap-datetimepicker-directive for that
Now my filter text box shows the datetimepicker.
But when i change the date it doesn't trigger filter change event
Here is my code:
$scope.gridOptions = {
paginationPageSizes : [1],
paginationPageSize : 1,
useExternalPagination: true,
showGridFooter : true,
showColumnFooter : true,
enableFiltering : true,
useExternalFiltering : true,
onRegisterApi : function(gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.core.on.filterChanged($scope, function(){
console.log("teststs");
angular.forEach(this.grid.columns, function(column){
console.log(column.filters[0].term);
if(column.filters[0].term)
$scope.searchParams[column.name] = column.filters[0].term;
else if(column.filters[0].term === null)
delete $scope.searchParams[column.name];
});
getPages(1, $scope.searchParams);
});
},
columnDefs : [
{
field: 'createdAt',
filterHeaderTemplate: '<div class="ui-grid-filter-container"><input type="text" id="dt1" class="form-control input-sm" datetimepicker ng-model="colFilter.term" placeholder="RAMA" name="time"></div>',
cellFilter: 'date: "yyyy-MM-dd"'
},
{
field: 'updatedAt',
cellFilter: 'date: "' + ENV.dateFormat + '"'
}
]
};
on the change event of the datepicker, you could add:
$scope.gridPacksApi.core.raise.filterChanged();
to force the event.
I have a dynamically-driven ng-click call inside a cellTemplate call that should fire a function call to open a previously defined Ionic modal, but when I run the click event on entries in the datagrid, the associated scope function call never fires.
I'm not clear if the issue is caused by scope range, or the mechanism of building the function call problematically. Any ideas as to what the cause could be?
//Generator for edit links in the grid cell
$scope.makeEditButtons = function (gridName) {
return "<i class='icon ion-gear-a' ng-click='openEdit" + gridName + "Modal(row.entity)' title='Edit' style='cursor:pointer;'></i> <i class='icon ion-alert' ng-click='openDelete" + gridName + "Modal(row.entity)' title='Delete' style='cursor:pointer;'></i>";
};
//Cell declarations for grid for "Custom Costs"
$scope.custom_costs_columns = [
{field: "description", displayName: "Description", width: '35%'},
{field: 'cost', displayName: "Cost", width: '35%', cellClass: 'text-right', cellFilter: 'currency'},
{field: 'edit', displayName: "Actions", cellTemplate: $scope.makeEditButtons("CustomCost"), cellClass: 'text-center'}
];
// UI-Grid initalize
$scope.CustomCostOptions = {
enableSorting: true,
columnDefs: $scope.custom_costs_columns,
enableCellSelection: true,
enableRowSelection: false,
enableCellEdit: false,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
}
};
//Ionic Modal declare and click function
$scope.deleteCustomCostModal = $ionicModal.fromTemplate({{Template}}, function ($ionicModal) {
$scope.modal = $ionicModal;
},
{
scope: $scope,
focusFirstInput: true
});
$scope.openDeleteCustomCostModal = function (row) {
console.debug(row);
$scope.deleteCustomCostModal.show();
};
One possible issue with not being able to click the created button is because the $scope has not recieved the compiled elemt yet.
Modify the function to
$scope.makeEditButtons = function (gridName) {
return $compile("<i class='icon ion-gear-a' ng-click='openEdit" + gridName + "Modal(row.entity)' title='Edit' style='cursor:pointer;'></i> <i class='icon ion-alert' ng-click='openDelete" + gridName + "Modal(row.entity)' title='Delete' style='cursor:pointer;'></i>")($scope);
};
Use the following function and call it right before the click event.
$scope.applyToview=function(){ if ($scope.$root.$$phase != '$apply' &&
$scope.$root.$$phase != '$digest') {
$scope.$apply();
}
}
Good luck.
First, you need to declare the function to handle click event in appScopeProvider.
Then call it in cellTemplate
Ex:
vm.gridOptions = {
columnDefs: [
{field: 'edit', displayName: "Actions", cellTemplate: '<span ng-click="grid.appScope.clickHandler(row)">Edit</span>'}
],
................
appScopeProvider: {
clickHandler: onCellClick
}
}
function onCellClick(row){
console.log(row.entity);
}
Hope it helps!
First, your cellTemplate should be just that. It should look something like this:
cellTemplate: '<i class="icon ion-gear-a" style="text-decoration:underline; color: blue; cursor:pointer;" ng-click="grid.appScope.openDeleteCustomCostModal(row)">{{COL_FIELD}}</i><i class='icon ion-alert' ng-click="grid.appScope.deleteCostModal(row)" title='Delete' style='cursor:pointer;'></i>'
This will call the two functions you have when clicked.
I have data of messages including {id,message,date}.
I would like to display a grid for each Date with data{message} in AngularJs using ui-grid
I was thinking of something like this:
<div ng-repeat="(item in data | groupBy: 'Date'">
<div>{{ item.Date }}</div>
<div id="grid1" ui-grid="gridOptions(item.Date) " class="grid"></div>
</div>
but it's not working!
$scope.gridOptions = function (date) {
return {
enableSorting: true,
enableFiltering: true,
data: 'data',
columnDefs: $scope.filterGrid(date),
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
},
};
};
$scope.filterGrid= function (date){
return [
{ field: 'id', enableFiltering: False},
{
field: 'Date', enableFiltering: false, filter: {
noTerm: true,
condition: function (searchTerm, cellValue) {
return cellValue.match(date);
}
}
},
{ field: 'Message' , enableFiltering: false },
]
}
First of all - ui-grid has a grouping feature, but this is still in beta.
You can try to use this example to group the data and build grids accordingly.
var dataSource = {};
$scope.gridOptions = {};
var generalGridOptions = {
enableSorting: true,
columnDefs: [
{ name: 'prop1' },
{ name: 'prop2' },
],
data: null
};
// group the data
for(var i = 0; i < data.length; i++){
if(!dataSource[data[i].month]){
dataSource[data[i].month] = [];
}
var obj = {};
for(var prop in data[i]){
if(prop!='month'){
obj[prop] = data[i][prop];
}
}
dataSource[data[i].month].push(obj);
}
// build the grid options
for (var item in dataSource) {
$scope.gridOptions[item] = angular.copy(generalGridOptions);
$scope.gridOptions[item].data = dataSource[item];
}
ui-grid attribute recieves a gridOptions object containing several parameters. Two of them are:
columnDefs - defining the columns and their data-binding.
data - the message objects in your case.
Look at the the documentation for further study: http://ui-grid.info/docs/#/tutorial
Code Example
template:
<div ng-repeat='item in items track by item.id' ui-grid='getItemGridOptions($index)'></div>
Passing the item index to the controller allows you to process your data. Then you can return an object containing the data and columnDefs properties. Like this:
private getItemGridOptions(index): IGridOptions {
//get the data you need for your items array using the index...
// then return the gridOptions object (I put random values)
return {
columnDefs: this.columns,
rowHeight: 24,
rowTemplate: rowtpl,
enableHorizontalScrollbar: this.uiGridConstants.scrollbars.NEVER,
enableColumnMenus: false,
enableRowSelection: true,
enableRowHeaderSelection: false,
enableFiltering: true,
modifierKeysToMultiSelect: true,
multiSelect: true,
data: null,
};
}
I'm very new to angular , i know little basic of angular only.
I'm trying to integrate kendo ui grid in my view using angular component.
My Angular Component :
class GetAllPostController{
constructor(API, ToastService){
'ngInject';
this.API = API;
this.ToastService = ToastService;
}
submit(){
var data = {
name: this.name,
topic: this.topic
};
this.API.all('posts').post(data).then((response) => {
this.ToastService.show('Post added successfully');
});
}
test(){
alert('');
this.gridOptions = {
sortable: true,
selectable: true,
dataSource: [
{ text: "Foo", id: 1 },
{ text: "Bar", id: 2 },
{ text: "Baz", id: 3 }
],
columns: [
{ field: "text", title: "Text" }
]
};
}
}
export const GetAllPostComponent = {
templateUrl: './views/app/components/get_all_post/get_all_post.component.html',
controller: GetAllPostController,
controllerAs: 'vm',
bindings: {},
}
My View :
<div kendo-grid k-options="gridOptions" k-ng-delay="gridOptions" ng-init="vm.test()"></div>
But it's now working. Any one please help ?
And please explain how to use scope inside componenet and view?
I'm using Laravel Angular Material
suppose u going to implement kendo inside this div
<div ng-controller="myController">
</div>
The script part
<script>
angular.controller('myController',['$scope',function($scope){
$scope.results=[];
/* ajax request and result bind to the $scope.results array */
//here you implement kendo/what ever other framework
$scope.apply(function(){
//write kendo functions inside this apply service
kendo.gridOptions = {
sortable: true,
selectable: true,
dataSource: $scope.result,
columns: [
{ field: "text", title: "Text" }
]
};
})
}])
</script>
My problem is I'm using the kendo-grid as follows
in index.html
<table kendo-grid k-options="gridOptions" k-ng-delay="gridOptions" id="grid">
<thead>
<tr>
<th data-field="type">Type</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="asset in assets">
<td>{{asset.type}}</td>
</tr>
</tbody>
</table>
and using a factory for restangular
angular.module('myApp')
.factory('assetFactory', function (Restangular) {
return Restangular.withConfig(function(RestangularConfigurer) {
RestangularConfigurer.setBaseUrl('my/service/url');
});
});
then in assetCtrl
assetFactory.all('cases').getList().then(function(assets) {
$scope.assets = assets;
});
.......
.......
$timeout(function(){
$scope.gridOptions = {
sortable: true,
selectable: true,
scrollable: true,
groupable: true,
height:790,
pageable: {
pageSize: 25,
input: true
}
};
}, 500);
now it is working but I'm not able to add more attributes for columns or updating because everything is generated in the index.html so I feel like I have no control on it.
So I want to make it something like this
in index.html just
<kendo-grid k-options="gridOptions" k-ng-delay="gridOptions">
</kendo-grid>
and keeping the factory as it is (using Restangular)
then in assetCtrl
var myData = new kendo.data.dataSource{
data: **// assign the assets here**
}
$timeout(function(){
$scope.gridOptions = {
dataSource: myData,
columns: [
**//fields with attributes like filtering for each col**
]
sortable: true,
selectable: true,
scrollable: true,
groupable: true,
height:790,
pageable: {
pageSize: 25,
input: true
}
};
}, 500);
Also can anyone tell me how should my service return look like ?? json array or .... ?
Any help ?
Thanks in advance
I know this question is a few months old, but I had to figure out how to make Restangular and Kendo UI Grid play nice today. I eventually came across the kendo.data.DataSource api as a reference: http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport.read
Note: There's some solutions out there recommending using Datasource.push or DataSource.add and essentially transferring your json array via a for-loop. That's a bad idea since .add and .push both trigger an update.
Anyway, the solution using DataSource.transport.read:
Angular HTML Template:
<kendo-grid k-options="mainGridOptions"></kendo-grid>
Pertinent Controller Code:
// Set the columns of the grid. 'title' is the Label, 'field' is the corresponding json field name.
var kGridColumns = [
{title: "Asset Type", field: "asset"},
{title: "Asset Case Name", field: "name"},
{title: "Asset Case ID", field: "id"},
];
// Create a new Kendo DataSource and set the transport.read to a function.
var kDataSource = new kendo.data.DataSource({
pageSize: 10,
transport:{
read:function(e){
var assetListPromise= assetFactory.all('cases').getList();
assetListPromise.then(function(resp){
// Use .plain() to strip out all the excess Restangular features from the response
var plain = resp.plain();
// Pass your data back to the datasource/grid
e.success(plain);
});
assetListPromise.catch(function(resp){
var msg = "Issue loading asset cases:"+JSON.stringify(resp);
e.error(msg)
});
}
}
});
// Set the scope object with our columns and datasource config
$scope.mainGridOptions = {
dataSource: kDataSource,
sortable: true,
pageable: true,
columns: kGridColumns
};