I'm using uigrid like below:
columnDefs: [
{ name: 'CA', field: 'CA', displayName: 'CA', enableCellEdit: false }
]
the CA column has data like below :
<div> name : Jon ><br /> Job : Barber </div>
even that i have <br /> i got a result as it is , without a break line.
Any solution ? to show the result like :
name : Jon
Job : Barber
I believe this might be close to what you want, user2848242.
JavaScript/AngularJS Controller:
var app = angular.module('app', ['ui.grid', 'ngSanitize']);
app.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
$scope.gridOptions = {
rowHeight: 40,
enableRowHeaderSelection: false,
columnDefs: [{
name: 'CA1',
field: 'CA',
displayName: 'Original CA',
enableCellEdit: false,
cellTemplate: '<span ng-bind-html="row.entity[col.field]"></span>'
}, {
name: 'CA2',
field: 'Name',
displayName: 'Alternative CA',
enableCellEdit: false,
cellTemplate: '<div>Name: {{row.entity[col.field]}}<br />Job: {{row.entity["Job"]}}</div>'
}]
}
$http.get('data.json')
.then(function(response) {
$scope.gridOptions.data = response.data;
});
}]);
The basic idea is, add a cellTemplate to your columnDefs. The tricky part is, since HTML is in your data you need to use ngSanitize to "trust" the HTML so it'll appear as HTML. Since it's best to separate HTML from data, for many reasons, I provided an alternative - hence Original CA and Alternative CA columns.
Here's a working Plunker, http://plnkr.co/edit/pkoARFr11Q7TmbBIegIT?p=preview.
Hope that helps, let me know if you have any other questions.
Related
Here I go again, with angular problems.
I have a grid in my HTML, which is just a line.
I'm copypasteing the controller.
app.controller('PanelController', function ($scope, $compile, uiGridConstants){
var actionTemplate = '<div class="ui-grid-cell-contents"><img class="addNotes" src="images/button/detail.gif" ng-click="dettaglio(row.entity)" /></div>';
$scope.dettaglio = function(ritornoSearch, inspect) {
console.log("make it function");
};
columnDefs: [
{ field: 'azioni', enableFiltering: false, width: 85, enableSorting: false, enableColumnMenu: false, cellTemplate: actionTemplate, displayName: 'Azioni'},
{ field: 'codeSubInstaller', headerCellClass: $scope.highlightFilteredHeader },
{ field: 'nomeSubInstaller', headerCellClass: $scope.highlightFilteredHeader },
{ field: 'cognSubInstaller', headerCellClass: $scope.highlightFilteredHeader },
{ field: 'codeFiscaleSubInstaller', headerCellClass: $scope.highlightFilteredHeader },
{ field: 'descStato' , headerCellClass: $scope.highlightFilteredHeader }
]
};
The question is: when I open it in my browser, the image doens't show up as clickable. If I try to click on it anyway, it doens't even provide me the console.log.
What am I missing?
Just do it like its documented in http://ui-grid.info/docs/#/tutorial/305_appScope and compare this runnable plnkr demo with your solution.
$scope.grid.appScope is available in all templates that the grid uses.
In a template, you access the scope using grid.appScope property
In that way you need to change your template into the right syntax:
ng-click="grid.appScope.dettaglio(row)":
var actionTemplate = '<div class="ui-grid-cell-contents"><img class="addNotes" src="images/button/detail.gif" ng-click="grid.appScope.dettaglio(row)" /></div>';
AngularJS application example with ui-grid:
var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$log', '$http', function ($scope, $log, $http) {
$scope.dettaglio = function (row) {
console.log(row);
alert('inside');
};
$scope.gridOptions = {};
$scope.gridOptions.columnDefs = [
{name: 'name'},
{name: 'gender'}, {
name: 'ShowScope',
cellTemplate: '<button class="btn primary" ng-click="grid.appScope.dettaglio(row)">Click Me</button>'
}
];
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json').success(function (data) {
$scope.gridOptions.data = data;
});
}]);
I have a grid with columns for name,price etc. To this grid I have added another column that depicts serial nos. i.e. 1,2,3... . In order to generate this I have used cellTemplate: '{{rowRenderIndex+1}}'
Now I want to sort based on this column with serial numbers. But the sorting does not work. I tried adding a type:'number' to the column definition. Still the sorting does not happen on the column which has the serial numbers.
Here is my fiddle link
http://plnkr.co/edit/zgQKyaS7KbJeZoyzPLKf?p=preview
My html
<div ng-controller="MainCtrl">
<div id="grid1" ui-grid="gridOptions1" class="grid"></div>
</div>
My jS
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
$scope.gridOptions1 = {
enableSorting: true,
columnDefs: [
{ name: 'SL NO' ,cellTemplate: '<div>{{rowRenderIndex+1}}</div>', type:'number'},
{ field: 'name' },
{ field: 'gender' },
{ field: 'company', enableSorting: false }
],
onRegisterApi: function( gridApi ) {
$scope.grid1Api = gridApi;
}
};
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
$scope.gridOptions1.data = data;
});
}]);
I want to sort column with the name SL NO here which contains the row indexes.
Firstly, rowRenderIndex is not apt for the sorting purposes because it displays the rows index after rendering hence if you scroll down the grid you will notice the numbers automatically adjust.
Second, You could use IndexOf function to get your row indeces but it wont solve the sorting problem,
// { name: 'SL NO' ,field:'index',cellTemplate: '<div class = "ui-grid-cell-contents">{{grid.renderContainers.body.visibleRowCache.indexOf(row)}}</div>', type:'number'},
Here is the final working code snippet:-
columnDefs: [
{field:'index'},
{ field: 'name' },
{ field: 'gender' },
{ field: 'company', enableSorting: false }
],
onRegisterApi: function( gridApi ) {
$scope.grid1Api = gridApi;
}
};
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
$scope.gridOptions1.data = data;
angular.forEach(data, function(data, index) {
data["index"] = index+1;
Here is the plunkr : http://plnkr.co/edit/LiDWg8ozwdEo290xUqNe?p=preview
I need some help to transfer the data from the ng-grid, to another page.
I'm making an invoice, and when the invoice from the ng-grid is complete, the data must go to another page with another layout, ready to be printed.
I used a service, but something obviously is lacking.
I thought I correctly pushed data into the array.
If i put something in the empty array, in the other page I can see it, so, basically, I just didn't push anything inside from ng-grid. :(
The main Controller, with ng-grid:
controller('MainCtrl', ['$scope','$http', function($scope, $http){
/*empy array, where I would like to push my data*/
$scope.dataFatt=[];
/*array for the ng-grid*/
$scope.myData = [{Numero:'1',Descrizione:'a',CostoUnitario:'10',Qta:'1',Totale:''},
{Numero:'2',Descrizione:'b',CostoUnitario:'10',Qta:'1',Totale:''},
{Numero:'',Descrizione:'',CostoUnitario:'',Qta:'',Totale:''},
{Numero:'',Descrizione:'',CostoUnitario:'',Qta:'',Totale:''},
{Numero:'',Descrizione:'',CostoUnitario:'',Qta:'',Totale:''}
];
/*-------------------------GRID-----------------------*/
$scope.gridOptions = {
data: 'myData',
selectedItems:$scope.dataFatt,
enableCellSelection: true,
enableCellEdit: true,
enableRowSelection: true,
columnDefs: [
{cellTemplate: '<button ng-click="addRow()">+</button>',width: 40, enableCellEdit: false},
{field: 'Numero', displayName: 'Numero', enableCellEdit: true},
{field:'Descrizione', displayName:'Descrizione'},
{field: 'CostoUnitario', displayName: 'Costo Unitario', enableCellEdit: true},
{field: 'Qta', displayName: 'Qta', enableCellEdit: true},
{field: 'getTotale()', displayName: 'Totale', enableCellEdit: false},
{cellTemplate: '<input type="button" value="-" ng-click="removeRow($index)"/>',width: 40, enableCellEdit: false }],
};
The service that select the items and should push them in to the empty array:
controller.factory('DatiFattura', function(){
return{
getDati:function(){
angular.forEach($scope.myData, function(dataFatt, index){
if (dataFatt.Numero){
$scope.gridOption.selectItem(index,true);
$scope.data.push(selectItem);
}
});
}
};
});
Thank you very much for your help.
I'm not sure I completely understand your flow since this isn't the full code, but you could put the variable that holds selectedItems into the service and attach it directly to the grid. Then you can inject the same service into another controller and access the selected items data array to display your printable invoice. See main.js and service.js in this Plnkr.
I'm currently working with Groovy/Grails and Javascript.
The code I am currently working with doesn't seem to follow a standard of how DataTables are implemented (at least not what I can see; I'm new to using DataTables and I can't find anything that is similar to what I'm seeing)
I need to combine the Survey Name and Type columns into a single column.
Example data within the "Survey Name / Type" column: "This is my Survey Name (Type)"
Controller:
The Table definitions are declared in the Controller. I'm not quite sure why they are defined here rather than on the gsp...
def impTableConfigs = [
id: [ title: '', sortIndex: 'id', visible: false ],
surveyId: [ title: 'Survey ID Number', sortIndex: 'surveyId', visible: true ],
surveyName: [ title: 'Survey Name', sortIndex: 'surveyName', visible: true],
type: [ title: 'Survey Type', sortIndex: 'type.code', visible: true]
]
def imp = {
// Check is user is logged in
// Check the users role
def dataMemberNames = getDataMemberNames(impTableConfigs)
def editingShtuff = userService.getUserEditing()
withFormat{
html{
return [
title: "Surveys",
editingShtuff : editingShtuff ,
selectedRefugeId: params.filter,
colNames: dataMemberNames,
colTitles: dataMemberNames.collect{
impTableConfigs[it]["title"]
}
]
}
json{
def args = getListDataParams(impTableConfigs, dataMemberNames, editingShtuff)
def results = getFormattedImpListData(
impTableConfigs,
editingShtuff ,
args.refuge,
args.max,
args.offset,
args.sort,
args.sortDir
)
render results as JSON
}
}
}
GSP
$(document).ready(function() {
var ops = {
editAction:'${createLink(controller:"survey", action:"edit")}',
source:'${createLink(controller:"report", action:"imp.json")}?filter='+$("#filter option:selected").val(),
swfUrl:'${resource(dir:'css/data-tables-tabletools',file:'copy_csv_xls_pdf.swf')}',
colNames:<%= colNames as JSON %>,
selectable: false,
useCache: false,
csvAction: '${createLink(action:"imp_download_csv")}',
pdfAction: '${createLink(action:"imp_download_pdf")}',
csvParams: getFilterParam,
pdfParams: getFilterParam
};
// Initialize dataTable
var table = new primr.dataTable("#dataTable", ops, {
aoColumnDefs: [ { aTargets: [8], bSortable: false }]
});
window.table = table;
// Connect filter events
$("#filter").change(function(){
var filter = $("#filter option:selected").val();
table.changeSource("${createLink(controller:"report", action:"imp.json")}?filter=" + filter);
})
});
HTML within the GSP
<table id="dataTable">
<thead>
<tr>
<g:each in="${colTitles}" var="it" status="i">
<th>${it}<sup>${i}</sup></th>
</tr>
</thead>
<tbody>
</tbody>
I'm thinking I need to move the column definitions from the Controller to the GSP and put them in the aoColumnDefs and formatting the surveyName to concatonate the 2 columns together? I'm hesistent to do this, however, as the impTableConfigs variable is used in multiple methods within the Controller. (I've included one such method).
Nevermind, I had already solved the issue but my browser was caching the domain object and controllers.
I put a getter in the Domain Object to concatonate the column values and put it in the impTableConfigs
def impTableConfigs = [
id: [ title: '', sortIndex: 'id', visible: false ],
surveyId: [ title: 'Survey ID Number', sortIndex: 'surveyId', visible: true ],
surveyNameAndType: [title: 'Survey Name/(Type)', sortIndex: 'surveyName', visible: true],
//surveyName: [ title: 'Survey Name', sortIndex: 'surveyName', visible: true ],
//type: [ title: 'Survey Type', sortIndex: 'type.code', visible: true ],
]
I am using the ngGrid module for AngularJS to show some paged data. I want to be able to search across multiple columns, however using an OR search.
Lets say I have a column with the following headings: Id, Name, Description. When I search I want to return all rows where either Id OR name OR description contain the search term.
$scope.pagingOptions = {
pageSizes: [20, 50, 100],
pageSize: 20,
totalServerItems: 0,
currentPage: 1
};
$scope.gridOptions =
{
data: 'myData',
columnDefs: [
{ field: 'id', displayName: 'Id' },
{ field: 'name', displayName: 'Name' },
{ field: 'description', displayName: 'Description' },
{ displayName: 'Actions', cellTemplate: '<input type="button" data-ng-click="doSomething(row.entity)" value="Do Something" />'}],
enablePaging: true,
showFooter: true,
showFilter: true,
pagingOptions: $scope.pagingOptions,
filterOptions: {
filterText: "",
useExternalFilter: false
}
};
I have tried using the default search box, and also using an external input box bound to $scope.filterText to define a custom filter such as:
$scope.filterUpdated = function () {
$scope.gridOptions.filterOptions.filterText = 'id:' + $scope.filterText + ';name:' + $scope.filterText + ';description:' + $scope.filterText;
};
However this seems to do an AND on all of the columns. Is it possible to achieve what I want using the ngGrid module?
Thanks in advance,
Chris
Yes it's possible to do an OR filter, but after searching in the ng-grid source code I can't see how it can be done using their filterOptions.filterText. That can do AND filtering only.
The solution would be then to use filterOptions.useExternalFilter:true
I also found no examples of it, but after playing around with that for a bit, I got the notion that the filter is actually done by re-creating the gridOptions.data object|array. That is the only downside to this filter.
Plunker code is here
So basically your code would look like this index.html:
<body ng-controller="MyCtrl">
<strong>Filter Name:</strong> </string><input type="text" ng-model="filterName"/>
</br>
OR
</br>
<strong>Filter Age:</strong> </string><input type="text" ng-model="filterAge"/>
</br>
<button ng-click="activateFilter()">Run Filter</button>
<br/>
<br/>
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
And in your controller.js:
app.controller('MyCtrl', function($scope) {
$scope.filterOptions = {
filterText: '',
useExternalFilter: true
};
$scope.activateFilter = function() {
var name = $scope.filterName || null;
var age = ($scope.filterAge) ? $scope.filterAge.toString() : null;
if (!name && !age) name='';
$scope.myData = angular.copy($scope.originalDataSet, []);
$scope.myData = $scope.myData.filter( function(item) {
return (item.name.indexOf(name)>-1 || item.age.toString().indexOf(age) > -1);
});
};
$scope.originalDataSet = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.myData = angular.copy($scope.originalDataSet, []);
$scope.gridOptions = {
data: 'myData',
filterOptions: $scope.filterOptions
};
});
That's just basic filtering (use regex and/or convert to lowercase for better matching). Also note that if both name and age are empty I set name to be '' and then every element would return true inside the filter (resulting in the whole dataset return).
This option is much better suited to dynamic dataset (read - server fed), but it works just as well but replicating the original dataset and applying the filters on it.