Can't access ui-grid in cellTemplate

Issue I am trying to create a column with different formatting within my ui-grid within the angular framework. columnDefs: [{ name: ‘Column’, width: 300, visible: true, cellTemplate: ‘<a href=”modelremote:{{ grid.getCellValue(row, col) }}”>{{ grid.getCellValue(row, col) }}</a>’ }] However, when the code

Continue reading

How to sort table by column when grid initialize?

Issue I use ui-grid in my project. Here is declaration of the table in html: <div id=”grid1″ ui-grid=”gridOptions1″ class=”grid”></div> Here is defenition of the table in controller: app.controller(‘MainCtrl’, [‘$scope’, ‘$http’, ‘uiGridConstants’, function ($scope, $http, uiGridConstants) { $scope.gridOptions1 = { enableSorting:

Continue reading

DefinitelyTyped only showing Namespace

Issue I am using typescript in an angular project with ui-grid. I have installed the DefinitelyTyped file for ui-grid: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/ui-grid/ui-grid.d.ts In visual studio, my intellisense works for my other d.ts files. I can see the angular object and all the

Continue reading

Date input on UI Grid

Issue I have an AngularJS ui-grid for displaying a few fields including a date. The date comes from the server with the following format: 2018-01-31. On the column definitions I have something similar to: .columnDefs = [ … { name:

Continue reading

Pre-Select rows on load with angular-ui-grid

Issue I want to select certain rows on page load(working days) This is the plunker plnkr.co/edit/48NyxngWNGIlOps1Arew?p=preview Any suggestion? Solution Add the following property to your $scope.gridOptions object : onRegisterApi: function(gridApi) { $scope.gridApi = gridApi; $scope.gridApi.grid.modifyRows($scope.gridOptions.data); $scope.gridApi.selection.selectRow($scope.gridOptions.data[0]); } This sets a

Continue reading

Tooltip property for column header ui-grid angularjs

Issue I am using cellTooltip property of colDef but that does not seems to be working. $scope.gridOptions.columnDefs = [{ displayName: ‘Test’, field: ‘_test’, cellTooltip: function (row, col) { return row.entity._Number }, cellTemplate: ‘<div class=”ui-grid-cell-contents” title=”{{row.entity._Number}}”></div>’}, ]; Any help would be

Continue reading

Angular ui-grid dynamically calculate height of the grid

Issue I am using : https://github.com/angular-ui/ui-grid.info/tree/gh-pages/release/3.0.0-RC.18 <div ui-grid=”gridOptions” style=”height:765px”></div> When I hard code the value, as shown above, the grid spreads out and everything works as expected. However, if I do the following… $scope.gridStyle = ‘height:’+numRows*rowHeight+’px’ //(765px); <div ui-grid=”gridOptions” style=”{{gridStyle}}”></div>

Continue reading

how to get row index in cellTemplate of angular ui-grid

Issue ng-click=”grid.appScope.selectItem($event,row.entity.$index);” i want to pass row index through this function. Even if i tried with $index,$parent.$index. I am unable to get the index. Solution try rowRenderIndex or $parent.$index ng-click=”grid.appScope.selectItem($event, rowRenderIndex);” or ng-click=”grid.appScope.selectItem($event, $parent.$index);” Answered By – Ramesh Rajendran Answer

Continue reading

How to cancel cell editing in Angular ui-grid?

Issue I have some condition in beginCellEdit event gridApi.edit.on.beginCellEdit($scope, function(rowEntity, colDef, event) { var scope = angular.element(event.currentTarget).scope(); var selectedRowIndex = scope.rowRenderIndex; var selectedColumnName = scope.col.name; if ($scope.gridOptions.data[selectedRowIndex-1][selectedColumnName].trim()==”) { alert(“You cannot enter the value in this cell”); // At this place

Continue reading

Why doesn't my Angular.js fiddle work?

Issue I’m just trying to copy tho example here: http://ui-grid.info/docs/#!/tutorial/320_complex_grouping My fiddle is here: http://jsfiddle.net/92u8jtkd/9/ The HTML code is very simple: <div ng-controller=”MainCtrl”> <p ng-show=”lastChange”>Last grouping change: {{ lastChange }}</p> <div id=”grid1″ ui-grid=”gridOptions” ui-grid-grouping ui-grid-edit ui-grid-selection class=”grid” style=”width:100%;”></div> </div> It’s

Continue reading

angular ui grid row template color based on condition

Issue I need to change row color of angular ui grid based on some condition. The target is achieved in ng-grid as shown rowTemplate: ‘<div style=”height: 100%” ng-class=”{red: row.getProperty(\’viewed\’) < 1}”><div ng-style=”{ \’cursor\’: row.cursor }” ng-repeat=”col in renderedColumns” ng-class=”col.colIndex()” class=”ngCell

Continue reading

Angular UI Grid: Conditional Row Format Not Overriding Default Alternating Colours

Issue For my UI-Grid I’ve created conditional formatting with the following row template in the $scope.gridOptions object: rowTemplate: ‘<div ng-class=”{\’recruiter-row-active\’:row.entity.activePositions!=0, ‘ + ‘\’recruiter-row-passive\’:(row.entity.activePositions==0 && row.entity.passivePositions !=0),’ + ‘\’recruiter-row-free\’:(row.entity.activePositions==0 && row.entity.passivePositions==0)}”>’ + ‘<div ng-repeat=”(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name” ‘

Continue reading

$scope.uiGrid is undefined

Issue I’m trying to create a table using angularjs ui-grid but I keep getting told that $scope.uiGrid is undefined, can anyone tell me what I’m doing wrong? requestYelp.success( function(obj) { console.log(obj.businesses[0].name); $scope.gridOptions = { enableSorting: true, rowHeight:100, columnDefs: [ {

Continue reading

ui-grid columnPinned event

Issue Is there any event triggered when any column pinned for ui-grid? Ex: $scope.gridApi.core.on.sortChanged($scope, function()); Solution Please refer to the documentation: http://ui-grid.info/docs/#!/api/ui.grid.pinning.api:PublicApi There is an event gridApi.pinning.on.columnPinned(scope, function(colDef){}) that is raised whenever a column pin state changes. Answered By –

Continue reading

Angular – ui grid – fonts

Issue i installed “angular” and “angular-ui-grid” in my app and included nessesary files: angular.min.js ui-grid.min.js ui-grid.min.css The table display┬┤s properly, but the arrows in the row head are displayed as “korean symbols”. Anybody knows how do deal with this? i

Continue reading