I am using ui-grid in one of my projects and one of the requirement is to hide/show columns in the grid. Hiding columns working well but then how can I re-show the hidden column?
After searching awhile I found that in ng-grid there is showColumnMenu which provide the ability to show column after hiding it, see this example I found
$scope.gridOptions = {
data: 'myData',
columnDefs: [{
field: "id",
visible: false
},{
field: "name",
displayName : "name"
},{
field: "age",
displayname: "age",
}] ,
multiSelect: false,
showGroupPanel: true,
selectedItems: [],
showColumnMenu: true };
, but in ui-grid using showColumnMenu is not working.
I was wondering if someone know how to show hidden columns.
Thanks,
ng-grid is being re written as ui-grid. Your example link is pointing to ng-grid. But if you are wondering how to do this in angular-ui-grid.
http://plnkr.co/edit/In28bF2EYuQaATwqnBAn?p=preview Take a look at this example. To show the hidden the columns, you need to enableGridMenu, which will show you the option to show the hidden columns.
$scope.gridOptions = {
exporterMenuCsv: false,
enableGridMenu: true,
columnDefs: [
{ name: 'name' },
{ name: 'gender', enableHiding: false },
{ name: 'company' }
],
...
};
Related
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"'
This is my grid
$scope.selectedUsers = {
enableRowSelection: true,
enableSelectAll: true,
enableHorizontalScrollbar: 0,
enableVerticalScrollbar: 0,
columnDefs: [
{ name:'userName', enableColumnMenu: false, sort: { direction: uiGridConstants.ASC, priority: 0 } },
{ name: 'mandatory',cellTemplate: '<input type="checkbox">', enableColumnMenu: false, enableSorting: false },
{ name: 'alternative user', cellTemplate: '<div class="ui-grid-cell-contents" ng-if="!$eval(row.entity.alternativeuserexists)" ><a ng-click="grid.appScope.showAlternativeUsers(row)">Alternative Users</a></div>', enableColumnMenu: false, enableSorting: false }]
};
In the above grid contains 3 columns, 3rd column contains hyperlink , when i click link i want to update new value in 3rd column for particular row link value only not entire row data by using angularjs ui-grid
Your question is quite hard to understand, so if my answer doesn't fit your needs, try to provide more details or a Plunkr please.
You required a refresh of row-data on button click? Then read on.
You can modify your data-set dynamically and it will autoupdate your grid without reloading the whole thing.
I made a Plunkr showcasing a possible setup.
As you already did, one needs to provide a cellTemplate with reference to appScopeProvider. There you can create a function that modifies your present grid.data.
appScopeProvider: {
showAlternativeUsers : function(row) {
myData[myData.indexOf(row.entity)] = altUsers[myData.indexOf(row.entity)];
},
}
Depending on how and where your new data arrives, you can adjust the update logic.
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
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.