I'm developping an app in angular 1.2.20 and using the ng-grid 2.0.11 and
I'm having this problem :
when I'm using the headerRowTemplate attribut I loose the sort functionality of ng-grid. Is there a solution to keep it.
I have a second question, as seen in my first question I'm using the headerRowTemplate of ng-grid and I was wondering if anyone has succeeded in making a two rows header grid with or without the headerRowTemplate attribut.
Thanks in advance
I can't sure your real problem. Maybe you can give a Plunker link.
First, I suppose you don't modify from default template.
It's here. headerRowTemplate.html
Second, I suppose you need a display header row, and original sortable header row,
I can't find it from ng-grid direct support, but this hack it's work.
It's a example:
main.js
// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.headerRowHeight = 60;
$scope.gridOptions = {
data: 'myData',
headerRowTemplate: 'myHeaderTemplate.html',
headerRowHeight: $scope.headerRowHeight,
columnDefs: [{field: 'name', displayName: 'Name'}, {field:'age', displayName:'Age'}]
};
});
myHeaderTemplate.html
<div class="ngRow ngHeaderText" ng-style="{height: headerRowHeight / 2}" style="text-align:center">I'm other header row</div>
<div ng-style="{ height: col.headerRowHeight / 2, top: col.headerRowHeight / 2 }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngHeaderCell">
<div class="ngVerticalBar" ng-style="{height: col.headerRowHeight / 2}" ng-class="{ ngVerticalBarVisible: !$last }"> </div>
<div ng-header-cell></div>
</div>
Plunker
Related
I have ng-grid and want bind it with this Object in Javascript:
$scope.myData = [{ يوم: "Moroni", age: 50 },
{ يوم: "Tiancum", age: 43 },
];
$scope.gridOptions = { data: 'myData' };
the html is:
<div class="gridStyle" ng-grid="gridOptions"></div>
when i see the grid it look like
and no value come in column 'يوم', but if the column is in english its return result.
Any solution for the problem please
If you don't mind keeping latin alphabet for variable names, there is a workaround.
You need to add the following to $scope.gridOptions:
columnDefs: [
{field:"name",displayName:"يوم"},
{ field: 'age', displayName: 'age' }
]
Please find workaround plunker
All of the examples that I can find of ng-grid Mater/Detail, such as the official demo at http://angular-ui.github.io/ng-grid/ do show Master / Detail, but they don't show it with two ng-grids.
How can I do that? I don't even know how to start. It looks like the grid is bound to $scope.gridOptions and $scope is bound to controller, so I don't see how to have two ng-grids in one controller.
Does that mean I need two controllers (connected by a service)?
The HTML
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="fooGridOptions"></div>
<div class="gridStyle" ng-grid="barGridOptions"></div>
</body>
the JS:
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.foo = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.bar = [{name: "Moroni", age: 50},
{name: "Foo", age: 43},
{name: "Bar", age: 27},
{name: "FooBar", age: 29},
{name: "JohnJohn", age: 34}];
$scope.fooGridOptions = { data: 'foo' };
$scope.barGridOptions = { data: 'bar' };
});
ng-grid looks in whichever object is passed with the directive(ng-grid="myOptionsObject"). In this case we only have the 'data' property set upon the object but other options are available.
I'm trying to evaluate filters programmatically within an Angular expression in a template.
HTML:
<div ng-app="myApp">
<div ng-controller = "MyCtrl">
<div ng-grid="gridOptions" class="gridStyle"></div>
</div>
</div>
JS:
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function ($scope) {
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 43},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions = {
data: 'myData',
columnDefs: [{ field: "name", },
{ field: "age", cellTemplate: '<div><div>{{row.getProperty(col.field) | col.colDef.filter}}</div></div>', cellFilter: 'test' }],
};
});
app.filter('test', function () {
return function (input) {
return input + '!';
};
});
CSS:
.gridStyle {
border: 1px solid rgb(212, 212, 212);
width: 100%;
height: 500px;
}
As you can see, in the cellTemplate for the 'age' column, I'm trying to pass through the cell data through a filter that is in a string in my column definitions (col.colDef.filter).
Is this possible?
I want to do this because I want to use just one template but define a variety of filters on each of the columns.
http://jsfiddle.net/GWha8/2/
How about simply adding test as the filter instead of getting the col's:
{{row.getProperty(col.field) | test}}
Updated jsfiddle.
The gridOption id you should be using is cellFilter (not filter). If you are not doing any other formatting that would require a cellTemplate all you need to do it set $scope.gridOptions.columnDefs[1].cellFilter = 'test' like this:
$scope.gridOptions = {
data: 'myData',
columnDefs: [
{
field: "name"
},
{
field: "age",
cellFilter: 'test'
}
]
};
However, if you are do need to do other changes that will require a cellTemplate then you can just reference your filter by name right in the template (no need to define $scope.gridOptions.columnDefs[1].cellFilter) like this:
$scope.gridOptions = {
data: 'myData',
columnDefs: [
{
field: "name"
},
{
field: "age",
cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()">{{COL_FIELD | test}}</div>''
}
]
};
1) you can fix this in ng grid sources inside ngColumn, and use column cellFilter
if (colDef.cellTemplate && !TEMPLATE_REGEXP.test(colDef.cellTemplate)) {
self.cellTemplate = $.ajax({
type: "GET",
url: colDef.cellTemplate,
async: false
}).responseText;
}
self.cellTemplate = self.cellTemplate.replace(CUSTOM_FILTERS, self.cellFilter ? "|" + self.cellFilter : "");
2) you can create custom function which accept filter and return string
function getTemplateFilter(test){
return '<div><div>{{row.getProperty(col.field) | '+ test +'}}</div></div>'
}
I have a view in an angularjs application in which I want to allow the user to select between various differently configured grids. Ideally I would like to bind the value passed to the ng-grid directive to a model variable, as illustrated below. However, although this example renders markup that works when a simple string value is passed to ng-grid (ie. <div class="gridStyle" ng-grid="gridOptions1"></div>, dynamic configuration fails.
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.option;
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions1 = { data: 'myData',
columnDefs: [{ field:"name", displayName: "NAME"},
{ field:"age", displayName: "AGE"}],
multiSelect: true };
$scope.gridOptions2 = { data: 'myData',
columnDefs: [{ field:"name", displayName: "Name"},
{ field:"age", displayName: "Age"}],
multiSelect: false };
});
<body ng-controller="MyCtrl">
<label>Show me:</label>
<input type="radio" name="option" ng-model="option" value="gridOptions1">Grid A</input>
<input type="radio" name="option" ng-model="option" value="gridOptions2">Grid B</input>
<div class="gridStyle" ng-grid="{{option}}"></div>
</body>
Can anyone tell me please if there is a way of getting ng-grid to accept a different configuration dynamically, or if there is a workaround to this limitation? Please note that I need to reconfigure multiple properties of the grid, not just the columnDefs and data properties for which I believe there are workarounds.
Plunker: http://plnkr.co/edit/mdXrq6?p=preview
It looks like you can do it if you assign columnDefs to a string of a property on the $scope and then change the array: http://plnkr.co/edit/wuob1M?p=preview;
It is described in this issue raised on ng-grid.
JS:
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.columnDefs1 = [{ field:"name", displayName: "NAME"},
{ field:"age", displayName: "AGE"}];
$scope.columnDefs2 = [{ field:"name", displayName: "Name"},
{ field:"age", displayName: "Age"}];
$scope.gridOptions = { data: 'myData',
columnDefs: 'columnDefs1',
multiSelect: true };
$scope.switchColumnDefs = function() {
$scope.columnDefs1 = $scope.columnDefs2;
}
});
HTML:
<body ng-controller="MyCtrl">
<label>Show me:</label>
<a ng-click="switchColumnDefs()">Switch Options</a>
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
Just thought I'd share that if anyone is interested in changing from Single Select to MultiSelect it can be done dynamically like so:
$gridScope.selectionProvider.multi = true / false;
Found a nice solution to this on the angular forum. Essentially, if an array of config objects is maintained, individual elements can be passed to the ng-grid directive as in the markup above. Plunker illustrating solution here: http://plnkr.co/edit/TDGKRo?p=preview
var gridOptions1 = {
data: 'myData',
columnDefs: [
{ field:"name", displayName: "NAME"},
{ field:"age", displayName: "AGE"}],
multiSelect: true,
selectedItems: $scope.selected
};
var gridOptions2 = {
data: 'myData',
columnDefs: [
{ field:"name", displayName: "Name"},
{ field:"age", displayName: "Age"}],
multiSelect: false,
selectedItems: $scope.selected
};
$scope.filterTabs = [{grid: gridOptions1}, {grid: gridOptions2}];
<ol>
<li ng-repeat="tab in filterTabs">
<div class="gridStyle" ng-grid="tab.grid"></div>
</li>
</ol>
Another way to do this is to just stick in something like:
<div ng-grid="gridOptions" ng-if="refresh"></div>
Then just flip refresh to off, update the grid config, then back to on in two different refresh cycles.
It is possible like the plnker that I edited for you: Here
Please notice when I played with it, not all options where live refreshing... But some where as you can see in the example.
Basically the solution is to have $scope variables assigned to the params of gridOptions.
Folks,
I am trying to use the ng-grid component on my webpage.
I have included the following files in my HTML page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="lib/jquery/jquery.layout-latest.min.js"></script>
<script src="lib/angular/angular.min.js"></script>
<!-- Got from the build directory -->
<script src="lib/angular/ng-grid.js"></script>
As for the rest of the code,
I have the following in my controller:
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions = { data: 'myData' };
I have added the relevant stuff in angular. module declaration too.
However, the ng-grid gets rendered in the following fashion. Has anyone faced anything similar?