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
}
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'm using Angular Ui Grid.How can I show multiple fields for the single column ? Thanks.
I need to show both streetNumber and StreetName on the same column.How can I do that ?
vm.propertyListGridOptions = {
appScopeProvider: vm,
flatEntityAccess: false,
fastWatch: true,
showHeader: false,
columnDefs: [
{
name: app.localize('IplNumber'),
field: 'id',
width: 100,
},
{
name: app.localize('BrAddress'),
field: 'address.streetNumber',
width: 140,
}
],
data: []
};
You can use custom template like this
$scope.gridOptions['columnDefs'] = [
{field: 'name', displayName: 'Name'},
{field: 'options',displayName: 'Options', cellTemplate: '<span>{{row.entity.streetNumber}} {{row.entity.StreetName}}</span>'}
];
You can also refer this page for documentation for custom templates http://ui-grid.info/docs/#/tutorial/317_custom_templates
I'm trying to get UI-Grid on my Angular App to filter dates properly but it doesn't seem to respond to any kind of filter change. I've tried going over the docs and using their example:
displayName: "Long Date", cellFilter: 'date:"longDate"', filterCellFiltered:true,
But nothing seems to change the format of the date, here is my code currently: (updated)
$scope.gridOptionsClaims = {
enableSorting: true,
enableFiltering: true,
showColumnFooter: true,
enableGridMenu: true,
columnDefs: [
{ field: 'date', name: 'Date', displayName: "Date", type: 'date', cellFilter: 'date:"MM-dd-yyyy"', filterCellFiltered: true },
{ field: 'transaction_id', name: 'Purchase Order', displayName: "Purchase Order" },
{ field: 'full_name', name: 'Salesperson', displayName: "Salesperson" }
]};
I've tried using filters 'date:MM-dd-yyy' and that didn't work either. Could anyone please tell me what I'm missing?
Did you enable filtering with enableFiltering: true property?
Also, try to define cellFilter with filters as you already mentioned:
cellFilter: 'date:"yyyy-MM-dd HH:mm"'
apologies if this is really simple but....
I want to display a grid of data but need a look up for some columns. This will become an editable grid but I am suffering with the basics so god help me.
I have two sets of data:
$gridOptions1.data = [{"group_id":"1","location_id":"-1","group_name":"Cars","active":"1"},{"group_id":"2","location_id":"1","group_name":"Trains","active":"1"},{"group_id":"3","location_id":"2","group_name":"Buses","active":"0"}]
and
$scope.locations=[{value: "-1", text: 'All Locations'},
{value: "0", text: 'Location 1'},
{value: "1", text: 'Location 2'},
{value: "2", text: 'Location 3'},
{value: "3", text: 'Location 4'}];
And want to display in the grid.
$scope.gridOptions1 = {
enableSorting: true,
columnDefs: [
{ field: 'location_id' },
{ field: 'group_name' },
{ field: 'active' },
{ name: 'Location', field:'location_id', cellFilter: 'maplocation:this'}
],
onRegisterApi: function( gridApi ) {
$scope.grid1Api = gridApi;
}
};
What I need to do is map the location id
I thought I could use a filter but cannot seem to get access to the scope data.
If anyone could give me a simple example of how to do this I would be very grateful as I am struggling to find any examples of what I want to do.
From what I can see the 'this' parameter is a pointer to the record and not the scope in which the grid options is defined.
I don't want to define the data in the filter because it is coming from the database.
Hope that makes sense.
If you want to use part of the data that's in your application scope to transform the data displayed in UI grid it's best to go with a custom template and calling in the function from your template.
Something like this should work:
columnDefs: [
{ field: 'location_id' },
{ field: 'group_name' },
{ field: 'active' },
{ name: 'Location', field:'location_id', cellTemplate: 'location-template'}
],
And then HTML:
<script type="text/ng-template" id="location-template">
<div class="ui-grid-cell-contents" title="TOOLTIP">{{grid.appScope.formatLocation(row)}}</div>
</script>
Now all you have to do is to define function formatLocation in your controller's scope and do the magic there.
When calling functions from within the cell template, make sure you use grid.appScope to get access to your controller's scope, like in the example I've provided.
Thanks to #Ethnar, here is a workable solution that keeps the template in the source:
columnDefs: [ { field: 'location_id' },
{ field: 'group_name' },
{ field: active' },
{ name: 'Location', field:'location_id',
cellTemplate: '<div class="ui-grid-cell-contents" title="TOOLTIP">{{grid.appScope.formatLocation(row)}}</div>'
}],
Then all is needed is the formatLocation function:
$scope.formatLocation=function(row)
{
locationid=row.entity.location_id;
if(locationid && $scope.locations.length) {
var selected = $filter('filter')($scope.locations, {value: locationid});
return selected.length ? selected[0].text : 'Not set';
} else {
return 'Not set';
} };
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