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.
Related
I am using kendo grid, with angularjs. The following is my grid columns, declared as the same as below-
this.$scope.gridColumn = [
{
field: 'IsActive', width: 65, editable: true, filterable: false,
template: '< md-checkbox aria-label="Checkbox2" ng-model="dataItem.IsActive" ng-change="select(dataItem)" ></md-checkbox>'
},
{
...
}];
I am trying to incorporate a "Select All" checkbox. But unfortunately, the "headerTemplate" tag is showing the following error -
Error: ngTransclude:orphan
Orphan ngTransclude Directive
Please help me to sort it out.
Thanks
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 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' }
],
...
};
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>'} ];