Unit test ng-grid with Qunit - angularjs

I'm writing unit test for ng-grid by using Qunit frameword. Here is my implementation:
module("Test grid angular", {
setup: function(){
injectorGrid = angular.injector(["ng", "ngGrid"]);
$scope = injectorGrid.get('$rootScope').$new();
$scope.currentPortfolioList = [
{
'symbol': 'bbb',
'available': 100,
'mortage' : 0
},
{
'symbol': 'AAA',
'available': 0,
'mortage' : 1000
}];
$scope.gridTest = {
data: 'currentPortfolioList',
enableCellSelection: false,
enableCellEditOnFocus: true,
multiSelect: false,
columnDefs: [
{field: 'symbol', displayName: 'Ma'},
{field: 'available', displayName: 'KL GD'},
{field: 'mortage', displayName: 'KL CC'}
]
};
},
teardown: function(){
$("#gridview").html("");
}
});
test('hide column', function(){
$scope.gridTest.columnDefs[0].visible = false;
var el = '<div ng-grid="gridTest"></div>';
var $compile = injectorGrid.get('$compile');
var element = $compile(el)($scope);
$("#gridview").html(element);
$scope.$digest();
var col0 = element.find(".col0");
ok(col0.length == 0);
});
Although my test case is passed, I see an error message on console log of the Firefox browser as follow:
[$compile:ctreq] http://errors.angularjs.org/1.2.16/$compile/ctreq?p0=ngInclude&p1=ngInclude
\<\div class="ngHeaderScroller" ng-style="headerScrollerStyle()" ng-include="gridId' 'headerRowTemplate.html'"
I found that this error happens when calling: $compile(el)($scope);
Can you help me resole this issue?

Use Batarang to look at the nginclude directive in question:
gridId' 'headerRowTemplate.html'
is not a valid reference.
This error occurs when HTML compiler tries to process a directive that specifies the require option in a directive definition, but the required directive controller is not present on the current DOM element (or its ancestor element, if ^ was specified).
To resolve this error ensure that there is no typo in the required controller name and that the required directive controller is present on the current element.
References
Error: $compile:ctreq
Missing Required Controller

Related

How to get the rowcol object of a cell DOM element selected in the grid of UIGrid?

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 want to write a custom directive for ui-grid with different input columnDefs

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.

Consultation on ng-repeat variable html

I'm carrying a $ ionicPopup with a variable that I get from my webservice. The problem that I have is not as filling into a variable. I leave my code:
if(data.Count > 0){
$scope.areas = data.Area;
var contentHtml = '<ul ng-repeat="area in data.Area"><li>{{area.name}}</li></ul>';
$ionicPopup.show({
title: 'Areas disponibles',
subTitle: '',
content: contentHtml,
scope: $scope,
buttons: [{
text: 'Salir',
onTap: function(e) {
}
}]
})
}
This obviously does not work and I'm looking to be able to load that variable in the ng-repeat, if someone could help me appreciate it.
In your HTML you can only use scoped var (ie : $scope.data mean that data is scoped).
data.Area isn't accessible into your html.
Doing this :
$scope.areas = data.Area;
You make it accessible as "areas" in your html.
Using ng-repeat like this :
ng-repeat="area in areas"
Will do the trick.

Kendo grid editable template from directive

I am trying to create a kendo grid (angularjs) and attached a personalized editor <div my-directive-editor></div> via grid options editable.template. On my directive editor (angularjs directive), i specify the structure of HTML from remote file and link it via templateUrl. Upon running the application, everything works great when i first click the Add New Entry but when i cancel the popup dialog and click again the Add New Entry an error will show $digest already in progress in angular format.
I tried instead using templateUrl I used template and formatting the whole HTML structure as string and passed it there and it goes well without the error but as i can see, it is hard for the next developer to manage the very long HTML string so it would be great if i can separate it to remote file and just link it to templateUrl. I prepared a dojo to play with CLICK HERE the content of TestTemplate.html is the HTML string from template.
This is my directive
app.directive('grdEditor',
[
function () {
return {
restrict: 'A',
replace: true,
scope: {
dataItem: '=ngModel'
},
//template: '<div><table><tr><td>Name</td><td><input ng-model="dataItem.Name" class="k-input k-textbox" /></td></tr><tr><td>Birthdate</td><td><input kendo-date-picker k-ng-model="dataItem.Birthdate" /></td></tr><tr><td>Gender</td><td><input kendo-combo-box k-ng-model="dataItem.Gender" k-options="optGender" /></td></tr></table></div>',
templateUrl: 'http://localhost/Angular/TestTemplate.html',
/*template: function(){
return '<div><table><tr><td>Name</td><td><input ng-model="dataItem.Name" class="k-input k-textbox" /></td></tr><tr><td>Birthdate</td><td><input kendo-date-picker k-ng-model="dataItem.Birthdate" /></td></tr><tr><td>Gender</td><td><input kendo-combo-box k-ng-model="dataItem.Gender" k-options="optGender" /></td></tr></table></div>';
},*/
controller: function ($scope, $attrs, $timeout) {
$scope.optGender = {
dataTextField: 'Text',
dataValueField: 'Value',
dataSource:
{
data: [
{
Text: 'Male',
Value: 1
},
{
Text: 'Female',
Value: 2
}]
}
};
}
};
}
]);
and this is my kendo grid options (partial)
$scope.optGrid = {
editable: {
mode: "popup",
window: {
minHeight: '320px',
minWidth: '365px',
},
template: '<div grd-editor ng-model="dataItem"></div>',
},
toolbar: ['create', 'excel'],
excel: {
allPages: true
},
.....................
Any help would be appreciated.
TIA
i think a there is problem with templateUrl. you don't need to give http://
you just need to give path from your base directory or directory of your index.html

How to get jquery.Datatable's data to respect angular 2-way binding

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!!

Resources