i want to bind a ui-select result into a ui-grid...
$scope.gridOptions = {
enableSorting: true,
showFooter: true,
columnDefs: [
{ field: 'name', name: 'Name' },
],
data: 'multipleDemo.selected',
onRegisterApi: function( gridApi ) {
$scope.gridApi = gridApi;
}
};
$scope.selectItem = function (item, model) {
$scope.gridApi.core.notifyDataChange( $scope.gridApi.grid, uiGridConstants.dataChange.EDIT );
};
My Jade Template is like this:
ui-select(theme='bootstrap', multiple='', ng-model='multipleDemo.selected', ng-disabled='disabled', close-on-select='false', on-select='selectItem()')
ui-select-match(placeholder='select something...') {{$item.name}}
ui-select-choices(repeat='f in data | filter: $select.search')
div(ng-bind-html='f.name | highlight: $select.search')
#grid.grid(ui-grid="gridOptions")
EDIT
i solved the problem. (my ng-controller was only around the gird, and not around the select...)
Would you mind posting a plunker or fiddle with your code? Hard to visual it and I'm working with something similar. Cheers!
EDIT: Behold StackOverflow'ers, an OP who answers his own question with a working solution. A truly rare and majestic beast to witness. From his comment: http://embed.plnkr.co/d37YrfRjE7YZPgwCncBE/preview
Related
I'm using AngularJS's grid and in a column I call a function to return some html.
When debugging this function I noticed it is called infinitely.
I changed the function to only console.log("test") and "test" is printed like crazy.
I'm new to AngularJS and I'm working in this project of my company.
This is the column definition:
{
field: "statusId", width: '8%', enableSorting: true, displayName: "", enableHiding: false, enableFiltering: false,
cellTemplate: "<div class='ui-grid-cell-contents' ng-bind-html='grid.appScope.getIcon(row.entity.statusId)'></div>"
}
And the function:
$scope.getIcon = function (statusId) {
console.log("getIcon");
};
I don't know what code you guys need to help. Let me know in the comments.
It's seems a bug, see: Multiple grid.appScope calls when used in cellTemplate
To overcome this, you can use directives.
I'm using UIGrid.
How can I get the row-column object of a selected cell's DOM element in the grid?
$(".ui-grid-cell-focus") this gives you the HTML DOM of the currently focused/selected cell. I'm trying to get the uiGrid row-col object using this HTML DOM value. I dont know how to!
Please try as shown below.
js
var editCellTemplate = '<div class="ngCellText"><button class="btn btn-icon-only
green height-28" ng-click="grid.appScope.editProperty(row.entity.id)"><i
class="fa fa-edit"></i></button></div>';
vm.yourGridOptions = {
appScopeProvider: vm,
flatEntityAccess: false,
fastWatch: true,
showHeader: false,
columnDefs: [
{
name: 'id',
field: 'id',
width: 240,
},
{
name: 'Edit',
cellTemplate: editCellTemplate,
width: 40,
}
],
data: []
};
//edit property
vm.editProperty = function (id) {
// your logic here
};
You could try in your gridOptions declaration:
onRegisterApi: function(gridApi){
gridApi.cellNav.on.navigate($scope,function(newRowcol, oldRowCol){
console.log(newRowcol);
});
}
Just be sure to inject ui.grid.cellNav into your angular module and ui-grid-cellNav in your grid directive view. newRowcol is your row-col object
I have a grid displaying data. I want to be able to route to a new view with a click of a grid row. Right now I am unable to even register a row click/selection. I have tried in my grid definition:
onRegisterApi: function (gridApi ) {
$scope.gridApi = gridApi;
gridApi.selection.on.onRowSelectionChanged($scope, function (rows) {
$scope.mySelections = gridApi.selection.getSelectedRows();
});
},
with a call to mySelections in the html:
<p>{{mySelections}}</p>
this results in error : Cannot read property 'on' of undefined. However, I can't tell what is 'undefined'.
I have also tried a separate function:
$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope, function (row) {
alert(row.isSelected);
//$scope.mySelections = gridApi.selection.getSelectedRows();
});
};
but it returns the same error.
I have added ui.grid and ui.grid.selection to my angular.module. I would love to find an actual example of using rowselect to link to a new page, but I have to find anything.
Cannot read property 'on' of undefined.
Suggests that the selection property is not available on your gridApi object, i'de double check if you really added the dependencies the right way:
angular.module('app', [
'ui.grid',
'ui.grid.selection'
]);
Next, calling gridApi.selection.on.onRowSelectionChanged won't work because the method is called rowSelectionChanged not onRowSelectionChanged. You've got that right in your second example. For the rest your code seems ok, perhaps there's something wrong in the rest of your grid definition. Here's one that works with an example using ui.router for view change:
$scope.gridOptions = {
enableRowSelection: true,
enableRowHeaderSelection: false,
multiSelect: false,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope, function (rows) {
var selection = gridApi.selection.getSelectedRows();
$state.go('item', {item: selection[0]});
});
}
};
http://plnkr.co/edit/Rs9M6pJd83vK8syr3W9g?p=preview
Don't forget to add the "ui-grid-selection" attribut to your DIV :
<div class="gridStyle" ui-grid="gridOptions" ui-grid-selection ... ></div>
This is my Controller
$scope.usersList = {};
$scope.usersList = {
paginationPageSizes: [10,15, 20],
paginationPageSize: 10,
columnDefs: [
{ name: 'userId', cellTemplate: '<div class="ui-grid-cell-contents"><a ui-sref="appSetting.userSelected({userId: row.entity.userId})">{{ row.entity.userId }}</a></div>' },
{ name: 'firstName' },
{ name: 'lastName' },
{ name: 'emailId' },
{
name: 'action',
cellTemplate: '<div>' +
' <button ng-click="grid.appScope.sampledetails()">Delete</button>' +
'</div>',
enableSorting: false,
enableColumnMenu: false
}
]
};
and this is my .cshtml
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
I want to write this in such a way that it should be used in other .cshmtls, but the columnDefs varies depending on table column name. How should I write in such a way that ths user should give the columnsDefs in directive along with pagination?
Your question is hard to understand, hopefully I got it right. You want to define default-settings for your grid but enable the user to input some special settings if needed?
Warp ui-grid in your own directive. Pass your wanted arguments into that directive and create default settings in your directive.
Your .cshtml. You pass your settings variable into that.
<my-grid options="usersList" />
Your Directive. Grab the settings there (see options: '=') and bind that to controller or scope.
angular.module('app').directive('myGrid', myGrid);
function myGrid() {
return {
templateUrl : 'grid.html',
controller : 'GridCtrl',
controllerAs : 'grid',
restrict: 'E',
scope: {
options : '=',
},
bindToController: true,
};
}
Your Controller. Now you can access your settings in that controller.
There you could combine the default settings with your inserted settings and pass that into the directive template.
angular.module('app').controller('GridCtrl', GridCtrl);
function GridCtrl() {
var grid = this;
console.log(grid.options); // containts your settings
grid.gridOptions = {
paginationPageSize: grid.options.paginationPageSize,
...,
columnDefs: grid.options.columnDefs
etc
}
}
And your grid.html, you pass the combined settings into the grid-API.
<div id="grid1" ui-grid="grid.gridOptions" class="grid"></div>
There are many more details to watch out for, but thats a possible setup.
e: I made a Plunkr for another similar question. For future reference.
I have a json object that may be modified by local conditions (not async ajax calls). I want this json object to be output on a datatables grid.
I have the table displaying the data just fine, however if the data changes, the grid does not. Do I have to call the constructor datatables every time? I would prefer to just use 2-way binding, but I am not sure. I have gotten it to update using a $watch, but I'd like to avoid using a $watch on this large object if I can. It could have 1000's of rows.
Here is a fiddle showing the datatable load, and the data it runs on changing after 3000 millis (simple $timeout). Is there a way to get the table to detect the change in the json object and refresh itself? Or do I need to do something different in the Angular code?
I am using a directive to load the table:
.directive('myTable', function() {
return {
restrict: 'E',
scope: {
data: '=',
options: '=',
columns: '='
},
template:
'<table id="balancesTable"></table>',
replace: true,
link: function(scope, elem, attrs) {
scope.options["aaData"] = scope.data;
scope.options["aoColumnDefs"] = scope.columns;
elem.dataTable(scope.options);
}
};
})
My Controller (edited for brevity... see fiddle for full code):
var myApp = angular.module('myApp', [])
.controller('MyAppCtrl', function ($scope, $timeout) {
$("#data-preview").css("color","green");
$scope.dataObj = [ { "balanceType": "Available Funds", ... } ];
$timeout(function(){
$scope.dataObj = [ { "balanceType": "Available Funds", ... different data ...} ];
$("#data-preview").css("color","red");
},
3000);
// columns settings for data table
$scope.columnDefs = [
{
"mData": "balanceType",
"sTitle": "Balance Type",
"aTargets":[0],
"sWidth": "200px"
},
{
...
}
];
// data table settings for table to not show search, pagination and allow column resize
$scope.overrideOptions = {
"bSort": true,
"bPaginate": false,
"sDom": "Rlfrtip",
"bFilter": false,
"bAutoWidth": false,
"bInfo": false
};
})
HTML:
<pre id="data-preview">{{dataObj}} | json}}</pre>
<my-table options="overrideOptions" data="dataObj" columns="columnDefs"><my-table>
Thanks in Advance!!