When I'm finished editing a textarea in the grid the edit mode is not closing.
In this Plunker, if you double-click one of the cells under Title, the textarea opens correctly, but does not close after I click out of the cell.
http://plnkr.co/edit/9jrzziWOP6hWWQ1Gab39?p=preview
<div ui-grid="{ data: data, columnDefs: columnDefs }" ui-grid-edit></div>
var app = angular.module('app', ['ui.grid', 'ui.grid.edit']);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.data = [
{ name: 'John', title: 'CEO' },
{ name: 'Jane', title: 'Developer' }
];
$scope.columnDefs = [
{name: 'name', enableCellEdit: false},
{ name: 'title',
cellEditableCondition: true,
enableCellEdit: true,
editType: 'textarea',
editableCellTemplate: '<textarea rows="4" cols="140" ng-model="MODEL_COL_FIELD"></textarea>'
}
];
}]);
Your problem has to do with the line:
editableCellTemplate: '<textarea rows="4" cols="140" ng-model="MODEL_COL_FIELD"></textarea>'
In the API for uiGrid-edit, it states that you must have valid html, templateCache Id, or url that returns html content to be compiled when edit mode is invoked. In your case, you haven't included a means for the textarea to exit edit mode. To remedy this, include ui-grid-editor in the tag as follows.
editableCellTemplate: '<textarea ui-grid-editor rows="4" cols="140" ng-model="MODEL_COL_FIELD"></textarea>'
Related
Has anyone seen this problem and know what's going on? If you load this with chrome dev tools open you will see a 400 error ( Bad Request )
http://plnkr.co/edit/fRhBgC4SmPYL8udb007y?p=preview
The problem appears when you use an row.entity.imgurl inside the cellTemplate.
var testApp = angular.module('testApp', ['ui.grid']);
testApp.controller('TestCtrl', function($scope) {
$scope.grid = {
rowHeight: 50,
data: [{
name: 'Test',
label: 'Suwako Moriya',
imgurl: 'http://i.imgur.com/945LPEw.png'
}],
columnDefs: [
{ field: 'name'},
{ field: 'label', displayName: 'Name',
cellTemplate: '<div class="ui-grid-cell-contents" title="TOOLTIP"><img alt="{{COL_FIELD CUSTOM_FILTERS}}" src="{{row.entity.imgurl}}"/>'
}
]};
});
You can use:
ng-src="{{row.entity.imgurl}}"
I want to change the icon and location of button / icon for expanding any row in angular ui-grid. By default, the icon is plus squared and location is left most column. Any pointers for this would be appreciated.
Instead of:
I want :
I fingered out the solution from Vijay's help.
Updated plunk here
Use cell template to define a custom cell and capture the expandable event of ui-grid
cellTemaplte example:
{
name: 'Actions',
displayName: '',
enableFiltering: false,
enableColumnMenu: false,
cellTemplate: ' <div \
class="ui-grid-cell-contents"> \
<i \
ng-class="{ \'ui-grid-icon-right-dir\' : !row.isExpanded, \'ui-grid-icon-down-dir\' : row.isExpanded }" \
ng-click="grid.api.expandable.toggleRowExpansion(row.entity)"> \
</i> \
</div>',
enableSorting: false
}
You need to set below :
enableExpandableRowHeader: false
Then you need to use a custom cell template for using other icons. I have used a Font awesome icon in the plunker below. Don't forget to inject $templateCache in controller.
app.controller('MainCtrl', ['$scope', '$http', '$log', "$templateCache",function ($scope, $http, $log,$templateCache)
$scope.gridOptions.columnDefs = [
{ name: 'id' },
{ name: 'name'},
{ name: 'age'},
{ name: 'address.city'},
{
// Add a new column with your icon
name: 'Expandable',
displayName: '',
enableSorting: false,
headerCellClass: 'header-cell',
cellClass: 'center-align',
enableCellEdit: false,
enableFiltering: false,
width: '14%',
cellTemplate: $templateCache.put('ui-grid/expandableRowHeader',
"<div class=\'ui-grid-cell-contents expand-row\'>" +
"<i class=\'icon-margin fa fa-pencil-square-o\' " +
"ng-click=\'grid.api.expandable.toggleRowExpansion(row.entity)\'></i>" +
"</div>"
)
}
Plunker : http://plnkr.co/edit/7M8ZIAhHHjURkb9nSbBn?p=preview
I am trying to set cellEditableCondition based on content of other cell in same row.
For that how do I pass row.entity to cellEditableCondition?
I tried passing row as arguement to function defined oncellEditableCondition but that row object does not have entity property.
I want something like below:
columnDefs: [{
name: 'column1',
field: 'name',
cellEditableCondition: function(row) {
return row.entity.lastname === 'Adams'
}
}, {
name: 'column2',
field: 'lastname'
}]
This small tweak to your code should do it:
var app = angular.module('app', ['ui.grid', 'ui.grid.edit']);
app.controller('MainCtrl', ['$scope', function($scope) {
$scope.gridOptions = {
columnDefs: [{
name: 'column1',
field: 'name',
cellEditableCondition: function(scope) {
return scope.row.entity.lastname === 'Adams'
}
}, {
name: 'column2',
field: 'lastname'
}],
data: [{name: "Tim", lastname: "Harker"},
{name: "Akash", lastname: "Adams"}]
}
}]);
div[ui-grid] {
height: 130px;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.css" />
<div ng-app="app" ng-controller="MainCtrl">
<div ui-grid="gridOptions" ui-grid-edit>
</div>
</div>
Let me know if you have any other questions. Happy to help further, if needed.
I got stuck while calling a function inside controller(listCtrl) from ng-click inside ng-grid
asset.js.coffee
app = angular.module('asset',[]).namespace(true)
app.controller 'linkCtrl', ['$scope','Restangular','asset.ProcServiceTools',($scope,Restangular,ProcServiceTools) ->
Restangular.all('asset').customGETLIST("linktogroup",{}).then (data) ->
$scope.myData = data
$scope.dynamicColumnDefs =ProcServiceTools.getIndexDynamicColumnDefs(data)
$scope.customoptions = ProcServiceTools.getCustomOptions()
$scope.linking = () ->
console.log("checkout")
]
app.service 'ProcServiceTools', () ->
class Tools
getIndexDynamicColumnDefs: (data) ->
return [
{field: 'id', displayName: 'ID' },
{field: 'asset_group_id', displayName: 'Group_ID' },
{field:'asset_catalog_id', displayName:'Catalog_id' },
{field: 'condition', displayName: 'Condition' },
{field: 'notes', displayName: 'Notes' },
{field: 'status', displayName: 'Status' },
{field: 'current_user_id', displayName: 'Current_user' },
{field: '' , cellTemplate: "<button ng-click='linking()'>Link-to </button>"}]
getCustomOptions: () ->
return {
showGroupPanel: true
jqueryUIDraggable: true
showSelectionCheckbox: true
showFooter: true
selectWithCheckboxOnly: true
enableColumnResize: true
}
new Tools
This is my asset.js file...I have injected the ProcServiceTools inside my linkCtrl and called the getIndexDynamicColumnDefs function inside this service with data as paramter and it get assigned to $scope.myData and i have also added linking() to the $scope
And this is my
index.html.erb
<div ng-controller='asset.linkCtrl'>
<customgrid columndefs='dynamicColumnDefs' data='myData' dirclass='gridStyleTable' include-search='true' options='customoptions'></customgrid>
In this file i set the data to be myData.I am getting all the datas displayed and button is also getting displayed..My problem is ng-click in the getIndexDynamicCoulmnDefs is not getting triggered when i click the link-to button...
But when i insert a button inside index.html.erb it is triggering the function.See the below code.The inserted button link is triggering the linking().
<div ng-controller='asset.linkCtrl'>
<customgrid columndefs='dynamicColumnDefs' data='myData' dirclass='gridStyleTable' include-search='true' options='customoptions'></customgrid>
<button ng-click="linking()">link</button>
</div>
I dont know the reason why i cant call the function inside the controller from ng-clik in ng-grid.
The problem is because of my user defined customgrid directive which i have included in index.html.erb that has its own private scope..So i used ng-grid itself and got that function triggered...
app = angular.module('asset', []).namespace(true);
app.controller('linkCtrl', ['$scope', 'Restangular', function($scope, Restangular) {
$scope.linking = function() {
console.log("check me out");
};
Restangular.all('asset').customGETLIST("linktogroup", {}).then(function(data) {
$scope.myData = data;
});
$scope.gridOptions = {
data: 'myData',
columnDefs: [{field: 'id', displayName: 'ID' },
{field: 'asset_group_id', displayName: 'Group_ID' },
{field:'asset_catalog_id', displayName:'Catalog_id' },
{field: 'condition', displayName: 'Condition' },
{field: 'notes', displayName: 'Notes' },
{field: 'status', displayName: 'Status' },
{field: 'current_user_id', displayName: 'Current_user' },
{cellTemplate:'<button id="editBtn" type="button" class="btn btn-primary" ng-click="linking()" >Edit</button> '}]};
}
]);
And my index.html.erb
<div ng-controller='asset.linkCtrl'>
<div class="gridStyle" ng-grid="gridOptions"></div>
</div>
And got my thing working :)
I am using ng-grid and I am trying to automatically update a single model when data in the grid-table changes. For that I am using the edit module of ng-grid.
This is the code of my controller:
# Define app
app = angular.module("app", ["ng-rails-csrf", "rails", 'ngTagsInput', 'ui.bootstrap', 'ui.grid', 'ui.grid.edit'])
app = angular.module("app")
app.controller "UsersController", ["$scope", "User", ($scope, User)->
$scope.init = ->
User.query({}).then((results)->
console.log results
$scope.gridOptions.data = results
)
$scope.gridOptions =
enableFiltering: true
columnDefs: [
{field: 'id'}
{field: 'email', enableCellEdit: true, type: 'string'}
{field: 'firstName', enableCellEdit: true, type: 'string'}
{field: 'lastName', enableCellEdit: true, type: 'string'}
{field: 'lastName', enableCellEdit: true, type: 'string'}
]
$scope.init()
$scope.$watch 'gridOptions.data', (newValue, oldValue)->
console.log "new value"
console.log newValue
console.log "old value"
console.log oldValue
# FIXME this causes a lot of updates to the remote
, true
]
html:
.users-list
.my-grid ui-grid="gridOptions" ui-grid-edit="ui-grid-edit"
Is there a better way to do it? Like calling an update function whenever one of the model changes?
I'm not sure where you can use angular debounce or how it applies to the model on your grid.
Maybe something like?
<input ng-model="gridOptions.data" ng-model-options="{debounce: {'default': 700} }"/>
With lodash / underscore it looks like.
$scope.$watch('gridOptions.data', _.debounce(function (value) {
$scope.$apply(function(){
...
})
}, 700));