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
Related
I am using ui-Grid v 3.0.1.
I have a custom cell template for a particular column which displays a button in each row. I have attached a ng-click attribute which calls the appScope to trigger some action.
All works beautifully.
However, the clicking of the custom template button also causes the selection of the row in question to be toggled.
I need to prevent this from happening.
i.e. a click to the custom template button should leave the current row's selection status as it was.
I suspect I need to cancel the row selection event somehow.
Can anyone point me in the right direction?
vm.gridOptions = {
data: "vm.myGridData",
columnDefs: [
{ field: "Col1", displayName: "Col1", width: 100 },
{ field: "Col2", displayName: "Col2", width: 200 },
{ name: " ", cellTemplate: "<div><button ng-click='grid.appScope.displayRecord(row.entity)'><i class='fa fa-search'></i></button></div>" }
],
enableRowSelection: true,
enableSelectAll: true,
showGridFooter: true,
multiSelect: true,
enableSorting: true,
enableFiltering: true,
enableFullRowSelection: true,
enableRowHeaderSelection: true
};
Just add
$event.stopPropagation();
to the ng-click attribute as you can see in this plunker.
You can chain javascript calls inside your ng-click attribute just by writing them one next to another with a ; as a separator like this:
ng-click = "instructionOne(); instructionTwo(argument); $event.stopPropagation();"
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' }
],
...
};
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.
I am using Ext Js 4.1, and I need to put a comboBox in a grid cell to user choose the parameter that gonna be saved, however the available parameters coming from a store, but it does not working, I am already using editing plugin, as specified in docs, can anyone provide a insight ??
storeParameter = Ext.create('ParameterStore');
{
header: 'Parameter',
flex: 1,
sortable: true,
dataIndex: 'parameter',
field: {
type: 'textfield'
},
editor: {
xtype: 'combo',
store: storeParameter
}
},
you should define the editor parameter on the grid cell where you want it to appear. Seems like you are trying to defining the editor in the store itself.
I solved the problem. I needed to add the attribute in grid:
selType: 'cellmodel',
And instead of to put a store directly, I replaced for comboBox, which has the store.
var comboParameter = Ext.create('ComboBoxParameter');
And the column replace to:
{
header: 'Parameter',
flex: 1,
sortable: true,
dataIndex: 'parameter',
editor: comboParameter
},