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
Related
I am trying to use Ui-grid from this link
http://ui-grid.info/docs/#/tutorial/101_intro.
I make a simple example of ui-grid in plunker..I need to add select box on "Gender" as filter .If I select "male" it show only data who is "m or If I select "female" it show filter data only "f" value here is my code
Plunker https://plnkr.co/edit/DqBgHFnwLpYM5pvg0f56?p=preview
I try like that but not work
type: uiGridConstants.filter.SELECT,
selectOptions: [
{ value: 'm', label: 'male' },
{ value: 'F', label: 'female' }
];
I don't need input field on gender .I need select box or dropdown on gender column
First you need to add uiGridConstants as parameter in your controller declaration, so you can use it. Then, you will be able to do what you want.
angular.module('app',['ngTouch', 'ui.grid'])
.controller('MainCtrl',function( $scope, uiGridConstants ){
// ...
$scope.gridOptions = {
enableFiltering: true,
columnDefs: [
{
field: 'gender',
displayName:'Gender',
filter: {
type: uiGridConstants.filter.SELECT,
selectOptions: [
{ value: 'm', label: 'male' },
{ value: 'F', label: 'female' }
];
}
},
{field: 'name', displayName:'First'},
{field: 'lastname', displayName:'Second',enableSorting: false}
]
};
// ...
}
I'll give you an advice : to debug angular code, or any javascript code, use a tool like Firebug (for Mozilla Firefox). It will show you the javascript errors encountered when you change your code and plunker try to apply it. In this case, you would have seen this :
Error: uiGridConstants is not defined
#https://run.plnkr.co/8CvvTtAR4QY8O2Ln/app.js:30:11
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
I am using the example from here:
http://plnkr.co/edit/hy6Evh?p=preview
My module name is different, but other than that it seems the same as the plnkr example.
(function () {
"use strict";
angular.module("productManagement").controller("PriceListCtrl",
["$scope",
PriceListCtrl]);
function PriceListCtrl($scope) {
$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',
enableCellSelection: true,
enableCellEditOnFocus: true,
enableRowSelection: false,
columnDefs: [{ field: 'name', displayName: 'Name', enableCellEdit: false },
{ field: 'age', cellFilter: 'number:2', displayName: 'Age' }]
};
}
}());
But when I put it into my application, the input boxes don't close:
In this image, I clicked into the first age row, then the second, then the third. The open input box should close when I click into the second row.
This works correctly in the plnkr ... but not in my application. Any thoughts as to what could be wrong?
I can't believe that this took SO long to resolve... but I found the answer.
Try this plunk: http://plnkr.co/edit/p4iLdfoYydZ9LKU312zK?p=preview
Then try this plunk: http://plnkr.co/edit/hy6Evh?p=preview
In this first case, when you click on the cells for edit and then click on another cell, the edit boxes don't close.
In the second case, the code works fine.
The ONLY difference is the order of the script tags.
This does not work:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
This DOES work:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
Hope this helps others so they don't waste as much time as I did!
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.