I'm preparing a grid which have a column that contain another grid, i tried it with ngGrid it works according to this plunkr link :
$scope.updateGrid = function() {$scope.gridOptions = {
data: 'facdata',
rowHeight: $scope.fac1data.length * $scope.rowHeight,
columnDefs: [
{field: 'examname',displayName: 'Exam Name'},
{field: '', displayName: 'Subjects' , cellTemplate: '<div ng-grid="gridOptions1" ></div>'
}]
};
}
Plunkr link
The previous link was done with ngGrid But when i tried to prepare the equivalent of this using ui-grid,
i got a problem (a.uiGrid is undefined).
Please help me for this issue
thanks
You can refer to this plunker link, it might help you...
you need to set another ui-grid in cellTemplate of a column, if u want to put it in a column.
$scope.gridOptions.columnDefs = [
{name: 'id'},
{name: 'categoryName'},
{name: 'products', cellTemplate: '<div ui-grid="row.entity[\'products\']"></div>'} ];
Related
I am trying to get dropdown values in header for one of the field in ui-grid. For the same field I have the dropdown for every row working fine. Based on the header dropdown selection every dropdown values in rows should be selected. Here is my plunker link. Can someone help please?
Here's a link!
var jsonDef = { name: 'Status', field: 'Status', width: 150,
editType: 'dropdown',
editableCellTemplate: 'ui-grid/dropdownEditor',
headerCellTemplate: '<div class="ui-grid-cell-contents header-tcsi"><select
ng-required = "true" ng-options="options.id as options.type for tcsiOption
in grid.appScope.MainCtrl" ng-model="grid.appScope.selectedTCSI"></select>
</div>',
editDropdownIdLabel: 'id',
editDropdownValueLabel: 'type',
filter: {
type: uiGridConstants.filter.SELECT,
condition: uiGridConstants.filter.EXACT }
};
var options = [{
id: 1,
type: 'Closed'
}, {
id: 2,
type: 'Pending'
}, {
id: 3,
type: 'Open'
}];
You were using the ng-options incorrectly. If you want to access something from the appScope you have to the attach it to the controller $scope. Then you can change your template where you use the options like so:
headerCellTemplate: '<div class="ui-grid-cell-contents header-Status"><select ng-required = "true" ng-options="options.id as options.type for options in grid.appScope.dropdownoptions" ng-change= "grid.appScope.selectionChanged()"ng-model="grid.appScope.selectedStatus"></select> </div>'
Pay attention to ng-options:
ng-options="options.id as options.type for options in grid.appScope.dropdownoptions"
The way you've written your code, you need to listen to when the dropdown changes and then update the values in the grid. Check the
Updated Plnkr for the working example.
I have a ng-grid on my page which is used to display details.
Is there a way to add action buttons like edit or delete to my ng-grid?
Or any property in gridOpts that needs to be set so as to enable the edit and delete button.
Also, On click of the button how will I get the details of the row selected.
Here is the code for my ng-grid.
$scope.gridOptions = {
paginationPageSizes: [25, 50, 75],
paginationPageSize: 25,
multiSelect: false,
enableCellEdit: true,
enableRowSelection: true,
enableColumnResize: true,
enableCellSelection: true,
columnDefs: [
{ name: 'Name' },
{ name: 'Description' },
{ name: 'FinalModuleWisePrivileges' },
{ name: 'FinalFunctionWisePrivileges' },
{ name: 'Active' },
]
};
HTML:
I tried options like enableCellEdit and enableRowSelection but they dont seem to work.
Would this have to be done by using a loop when the grid is loaded?
I also tried to look at the following reference but it didn't help much.
ng-grid how to enable Edit and Delete buttons
Edit: I added the following line of code to the gridOptions. This solves the temporary purpose but is there a neat way to do this?
cellTemplate: '<button ng-click="grid.appScope.editClicked(row)" ng-if="row.entity.Active == true">Edit</button>'
you would need to add a column in ColumnDefs with a custom cell template..
columnDefs: [{ field: 'name', displayName: 'Name'},
{ field: 'description', displayName: 'Description'},
{ displayName: 'Actions', cellTemplate:
'<div class="grid-action-cell">'+
'<a ng-click="deleteThisRow(row.entity);" >Delete</a></div>'}
]
};
this example shows how to add custom Delete button
the example code is taken from here
I use ngGrid to display my data. I would like to use cellFilter and cellTemplate together for the specific column, but seems they do not work together.
when I use cellFilter or cellTemplate seperately they work perfect. Basically, I would like to format the value of the cells in this way (e.g 500000 --> 500,000; 1000000 --> 1,000,000) and also I would like to make negative values in a red colour. How can I solve this? Thanks!
$scope.gridOptions = {
data: 'data',
columnDefs: [
{
field: 'Settled',
cellFilter: 'number',
cellTemplate: '<div ng-class="{red: row.getProperty(col.field) < 0}"><div class="ngCellText">{{row.getProperty(col.field)}}</div></div>'
}]
}
I found the answer myself :p
It is so simple.
$scope.gridOptions = {
data: 'data',
columnDefs: [
{
field: 'Settled',
cellTemplate: '<div ng-class="{red: row.getProperty(col.field) < 0}"><div class="ngCellText">{{row.getProperty(col.field) | number }}</div></div>'
}]
}
As ng-grid is now UI-Grid v3.x, referencing the default template for ui-grid/uiGridCell
$templateCache.put('ui-grid/uiGridCell',
"<div class=\"ui-grid-cell-contents\" title=\"TOOLTIP\">{{COL_FIELD CUSTOM_FILTERS}}</div>"
);
I would say the cellTemplate in the updated UI-Grid should be the following:
$scope.gridOptions = {
data: 'data',
columnDefs: [
{
field: 'Settled',
cellFilter: 'number',
cellTemplate: '<div class="ui-grid-cell-contents" ng-class="{red: COL_FIELD < 0}">{{COL_FIELD CUSTOM_FILTERS}}</div>'
}]
}
You can also use the cellClass property instead, and leave the cell template default. However, this applies the class to the .ui-grid-cell. The cell template would apply the class to the child of .ui-grid-cell, which in my example above is .ui-grid-cell-contents. Whichever works for your situation, I suppose.
$scope.gridOptions = {
data: 'data',
columnDefs: [
{
field: 'Settled',
cellFilter: 'number',
cellClass: function (grid, row, col, rowRenderIndex, colRenderIndex) {
var cellVal = grid.getCellValue(row, col);
return (cellVal < 0) ? 'red' : '';
}
}]
}
Based on Mammadj's answer I could work out my own cellTemplate combined with cellFilter. Here is my solution for reference, where executionStatus is the value of the cell which was previously used as cellFilter: 'emJobStateLabel'. Here the executionStatus is piped to emJobStateLabel in a cell template:
cellTemplate: '<div class="em-row">{{row.entity.executionStatus | emJobStateLabel}} {{row.entity["previewStatus"]==\'New\'?\'\':\'(\'+row.entity.previewStatus+\')\'}}</div>'
Don't forget to remove the property cellFilter.
I'm trying to translate Ui-grid in angular but i can't . i just want to translate columnDefs .
here is my controller :
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ name: 'نمایش', cellClass: "editCell", cellTemplate: '<i id="editBtn" tooltip-placement="left" tooltip="نمایش درخواست" class="fa fa-eye" ng-click="getExternalScopes().editUser(row.entity.RequestCode)" ></i>', headerClass: 'JobHeader' },
{
name: 'کد شهر', headerClass: 'cityHeader', field: 'CityCode', editableCellTemplate: self.editableCellTempate,
enableCellEdit: true
},
{ name: 'کد امور', field: 'RgnCode' },
{ name: 'شماره درخواست', field: 'RequestCode' },
],
};
i want to translate name in columnDefs
Any idea ?
Use
cellFilter:'translate' for cell,
headerCellFilter:'translate' for header
footerCellFilter: 'translate' for footer
in colummDefs
I used {field:'id', displayName:'ID_TRANSLATION_KEY', headerFilter:'translate'}. It works like usual template translation. Only problem with your solution you may be losing default sorting functionality offered by the component (have to create your own) when you use headerCellTemplate.
I think this may help someone.
If you want to manually translate it, use name as the fieldname in your data, and then set displayName to whatever you want.
If you want to do on-the-fly translation using angular-translate, then as #YOU said.
Use displayName and $translate.instant('...'):
{
name: 'CityCode',
displayName: $translate.instant('CityCode'),
headerClass: 'cityHeader',
editableCellTemplate: self.editableCellTempate,
enableCellEdit: true
}
Starting out on AngularJS and KendoUI Grid. I'd like to get the row value for a defined grid.
I've defined a button template in my Kendo UI Grid as follows:
$scope.gridOptions = {
dataSource: {
type: "json",
data: $scope.teams,
pageSize: 5
},
sortable: true,
selectable: row,
columns: [
{field: "TeamID", title: "Team ID"},
{field: "TeamName", title: "Name" },
{field: "TeamDistrict", title: "District"},
{
template: "<button class=\"k-button\" ng-click=\"manageTeam(#=TeamID#)\">Manage</button>"
}
]
};
I also defined a function as follows:
$scope.manageTeam = function(tid){
console.log(tid);
};
I am getting the value for the passed Team ID, but I wanted to grab the whole row value into an object so that I can get it like:
$scope.manageTeam = function(rowValue){
console.log(rowValue.TeamID);
console.log(rowValue.TeamName);
console.log(rowValue.TeamDistrict);
};
Appreciate any insight on how to achieve this. Thanks.
Thanks to #CSharper, I was able to map out the answer.
The key is to change the template attribute in the columns declaration to:
template: "<button class=\"k-button\" ng-click=\"manageTeam(this.dataItem)\">Manage</button>"
Hope someone finds this stuff useful.