How to add confirm box for ui-grid check box ?
The defaultYn value, tried to add a confirm message before making a server call.
vm.gridOptions1 = {
enableColumnResizing: true,
enableAutoResizing: false,
enableHorizontalScrollbar : 1,
enableRowSelection: true,
enableRowHeaderSelection: false,
appScopeProvider: vm.myAppScopeProvider,
// rowTemplate: "<div ng-dblclick=\"grid.appScope.openOtherPavacce(row)\" ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name\" class=\"ui-grid-cell\" ng-class=\"{ 'ui-grid-row-header-cell': col.isRowHeader }\" ui-grid-cell></div>",
columnDefs: [
{field: 'jobVaccinationPK.screeningTypeMast.screeningType', displayName: 'Screening type',type: 'text',width: '27%', enableCellEdit: false},
{field: 'jobVaccinationPK.jobCategoryTypeMast.jobCategoryName', displayName: 'Job Category',width: '27%', enableCellEdit: false},
{field: 'jobVaccinationPK.vaccinationMast.vaccinationName', displayName: 'Vaccination', width: '27%', enableCellEdit: false},
{field: 'defaultYn', displayName: 'DefaultYn',width: '10%' , cellTemplate: '<input type="checkbox" ng-model="row.entity.defaultYn" ng-really-message="Are you sure ?" ng-really-click="grid.appScope.updateRow(row)" ng-true-value="\'Y\'" ng-false-value="\'N\'">'},
{
//field:'',
name: 'Action',
cellTemplate: '<button class="btn btn-primary-joli" ng-click="grid.appScope.deleteRow(row)">Delete</button>',width: '9%'
}
],
onRegisterApi: function(gridApi) {
vm.gridApi = gridApi;
var cellTemplate='<div style= \"height:100px \" class=\"ui-grid-row-header-cell ui-grid-expandable-buttons-cell\"><div class=\"ui-grid-cell-contents\"><i ng-class=\"{ \'glyphicon glyphicon-calendar \' : row.entity.visitMasts[0].orderses.length !== 0 }\" ng-click=\"grid.appScope.showPopup(row)\" style=\"color: rgb(212, 106, 64)\";></i></div></div>'; //
vm.gridApi.core.addRowHeaderColumn( { name: 'rowHeaderCol', displayName: '', width: 30, cellTemplate: cellTemplate , headerTooltip: 'Click icon to see details'} );
vm.gridOptions1.multiSelect = false;
vm.gridOptions1.modifierKeysToMultiSelect = false;
vm.gridOptions1.noUnselect = true;
}
};
Related
created a UI grid with the following fields.
vm.gridRadioTest.columnDefs = [{
name: 'testName',
displayName: 'Test Name',
enableCellEdit: false,
enableColumnMenu: false,
enableSorting: true,
sort: {
direction: uiGridConstants.ASC
}
}, {
name: 'remarks',
displayName: 'Remarks to Lab',
enableCellEdit: true,
enableColumnMenu: false
}, {
name: 'xrayNo',
displayName: 'X-ray No',
enableCellEdit: true,
enableColumnMenu: false
}, {
name: 'testStatus.status',
displayName: 'Status',
enableCellEdit: false,
enableColumnMenu: false,
//cellTemplate: '<a style="cursor: pointer;color: black" class="ui-grid-cell-contents" ng-if="row.entity.resultStatus != null" ng-click="grid.appScope.navigateToPage(row)"><span class=\"glyphicon glyphicon glyphicon-folder-open\" >Report</span></a>'
}, {
name: 'reportStatus',
displayName: 'Report Status',
enableCellEdit: false,
enableColumnMenu: false,
//cellTemplate: '<a style="cursor: pointer;color: black" class="ui-grid-cell-contents" ng-if="row.entity.resultStatus != null" ng-click="grid.appScope.navigateToPage(row)"><span class=\"glyphicon glyphicon glyphicon-folder-open\" >Report</span></a>'
},{
name: 'xrayReferral',
displayName: 'X-Ray Referral',
nableCellEdit : true,
editableCellTemplate: 'ui-grid/dropdownEditor',
cellFilter: 'mapLabSpecimen:this',
editDropdownIdLabel: 'estCode',
editDropdownValueLabel: 'estName',
editDropdownOptionsArray: vm.instituteList,
width: '30%'
// enableColumnMenu: false,
// cellEditableCondition:false
//cellTemplate: '<div class="ui-grid-cell-contents" ng-if="row.entity.resultStatus == \'\'" ><span class=\"glyphicon glyphicon-ok-circle\" style=\"color: green\";>Normal</span></div><div class="ui-grid-cell-contents" ng-if="row.entity.resultStatus == \'Abnormal\' "><span class=\"glyphicon glyphicon-remove-circle\" style=\"color: Red\";>Abnormal</span></div>'
},{
name: 'add',
displayName: '',
enableCellEdit: false,
enableColumnMenu: false,
width: '3%',
cellTemplate: '<div class="ui-grid-cell-contents" ><span class=\"glyphicon glyphicon-plus btn-primary-joli\" ng-click="grid.appScope.reOrderRadioTest()"></span></div>'
}];
Pushing new record in the grid on each add button click
$scope.reOrderRadioTest = function(){
vm.gridRadioTest.data.push(radioTestList);
}
radioTestList is
{"code":null,"message":"Total 1 records found","result":{"testId":4,"testName":"X-RAY","testNameAr":null,"testType":"R","componentTestsYn":null,"testUnitMast":{"id":1089,"ucumCode":"pmol/umol","ucumDesc":"PicoMolesPerMicroMole [Substance Ratio Or Substance Fraction Units]","ucumSynonym":"pmol/umol","mohName":"pmol/umol","activeYn":null},"labTestResultRange":{"testid":4,"description":"DESCRIPTION ","sex":"M","fromAge":0,"fromAgeFactor":"D","toAge":15,"toAgeFactor":"D","low":30,"high":50,"intermediateValue":40,"criticalLow":10,"criticalHigh":80,"printDescription":null,"ruleId":null,"createdBy":null,"createdDt":null,"lastModifiedBy":null,"lastModifiedDt":null,"rangeId":2,"activeYn":"Y","alertLowRange":null,"alertHighRange":null},"refOutYn":null,"doneHereYn":null,"mohTestId":null,"activeYn":"Y"}}
Here all on typing a value one grid field is appearing in all other fields.
Here i typed ff in one field its reflected in all other rows.
I can see internally it using hashkey, How can I modify that
I have found the solution for it:
In function to add row, add the initialization of radioTestList variable.
$scope.reOrderRadioTest = function(){
var radioTestList= {"remarks":'',"testName":''};
vm.gridRadioTest.data.push(radioTestList);
}
Working Plunker is here: http://plnkr.co/edit/Vnn4K5DcCdiercc22Vry?p=preview
{
name: 'Actions', width: '30%', enableFiltering: false, enableSorting: false, enableColumnMenu: false,
cellTemplate: '<div class="grid-action-cell">' +
'<a #Html.ActionLink("ViewByHtml", "GetCountryById", "Country", new { id= "row.entity.inCntId" }, new { data_modal = "", id = "{{row.entity.inCntId}}" })>{{row.entity.inCntId}} </a>' +
'</div>'
}
I search for this error but not able to fix it.Am new to angular.Dont know exactly whats going wrong.
Html:
<div class="row gridContainer" ng-controller="tripsGridController">
<div ui-i18n="{{::selectedLanguageName}}">
<div ui-grid="gridOptionsTrips" ui-grid-selection ui-grid-resize-columns ui-grid-move-columns ></div>
</div>
</div>
Angular code:
$scope.gridOptionsTrips = {};
$scope.gridDataSourceTrips = [];
var ROW_HEIGHT = 30;
// to show data on Grid
$scope.gridOptionsTrips = {
enableRowSelection: true,
enableRowHeaderSelection: true,
enableSorting: true,
multiSelect: false,
rowHeight: ROW_HEIGHT,
virtualizationThreshold: 10,
fastWatch: false,
enableHorizontalScrollbar: uiGridConstants.scrollbars.NEVER,
data: 'gridDataSourceTrips',
appScopeProvider: $scope,
showColumnMenu: true,
enableSelectAll: false,
noUnselect: true,
enableCellSelection: true,
rowTemplate: '<div ng-click=\"grid.appScope.onTripsGridRowClick(row)\" ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.uid\" class=\"ui-grid-cell\" ng-class=\"{ \'ui-grid-row-header-cell\': col.isRowHeader }\" ui-grid-cell></div>'
};
$scope.onTripsGridRowClick = function (row) {
$scope.gridApi.selection.selectRow(row.entity);
};
$scope.gridColDefsTrips = function () {
var idTemplate = '<div></div>';
var sTemplate = '<div></div>';
var speedTemplate = '<div></div>';
var directionTemplate = '<div></div>';
var timeTemplate = '<div></div>';
var kmCounterTemplate = '<div></div>';
var driverNameTemplate = '<div></div>';
return [
{ name: "CARDRIVER", displayName: "CARDRIVER", field: 'UserId', cellTemplate: idTemplate, enableColumnMenu: false, headerCellFilter: 'translate', width: 150, showInColumnFilter: true },
{ name: 'STARTEND', displayName: 'STARTEND', field: 'Departure.DateTime', cellTemplate: idTemplate, width: 70, enableColumnMenu: false, headerCellFilter: 'translate', showInColumnFilter: true },
{ name: 'STARTEND', displayName: 'STARTEND', field: 'Destination.DateTime',cellTemplate: idTemplate, enableColumnMenu: false, headerCellFilter: 'translate', width: 80, showInColumnFilter: true },
{ name: 'TRIPLENGTH', displayName: 'TRIPLENGTH', field: 'Distance', cellTemplate: idTemplate, enableColumnMenu: false, headerCellFilter: 'translate', width: 150, showInColumnFilter: true }
];
};
$scope.gridDataSourceTrips = tripsDetailsService.GetAllTripsByWeek('2014-01-10', '2014-01-14', 1, 20);
$scope.gridOptionsTrips.columnDefs = $scope.gridColDefsTrips();
I have to make an invoice application, and I have to use ng-grid.
But I cannot figure out how to take the value that the user will insert into the cell, and use it.
$scope.myData = [{},{},{}]; /*tre row di default*/
$scope.gridOptions = {
data: 'myData',
enableCellSelection: true,
enableCellEdit: true,
enableRowSelection: false,
columnDefs: [{field: 'Numero', displayName: 'Numero', enableCellEdit: true},
{field:'Descrizione', displayName:'Descrizione'},
{field: 'CostoUnitario', displayName: 'Costo Unitario', enableCellEdit: true},
{field: 'Qta', displayName: 'Qta', enableCellEdit: true},
{field: 'Totale', displayName: 'Totale', enableCellEdit: false},]
};
$scope.addRow = function() {
$scope.myData.push({});
};
I really don't know how to do this!
Try using row.entity object..
On html side, define your input with ng-model="exapmle" as you probably did..
On angular side, get your textbox value with row.entity.example
An example which i did recently.. Look at last column def column..
$scope.gridOptions = {
data: 'accounts',
multiSelect: false,
showFilter: false,
showColumnMenu: false,
showSelectionCheckbox: false,
showGroupPanel: false,
showMenu:false,
showFooter: false,
enableRowSelection: false,
columnDefs: [
{field: 'username', displayName: 'Username', width:180},
{field: 'email', displayName: 'Email', width:250},
{field: 'role.displayTxt', displayName: 'Role', width:120},
{field: 'active', displayName: 'Active', width:80},
{field: '', displayName: ' ', width: 50,
cellTemplate: '<div class="grid-action-cell">' +
'<a class="btn-link" type="button" title="Edit" ng-href="#/accounts/{{row.entity.username}}">' +
'<i class="glyphicon glyphicon-edit" style="left:8px; top:8px;"></i>' +
'</a>' +
'</div>'
},
]
};
I am trying to disable to celledit for a column in a nggrid:
$scope.gridOptions = {
data: 'myData',
enableCellSelection: true,
enableCellEditOnFocus:true,
enableRowSelection: false,
columnDefs: [{field: 'name', displayName: 'Name', enableCellEdit: true},
{field:'age', displayName:'Age',
cellTemplate: '<div ng-disabled=true ng-class="{green: row.getProperty(col.field) == row.getProperty(\'name\'),red:row.getProperty(col.field) != row.getProperty(\'name\')}"><div style="text-align:center;" class="ngCellText">{{row.getProperty(col.field)}}</div></div>'}]
};
I tried ng-disabled=true but it does not work? how to do this?
plunkr:http://plnkr.co/edit/nj57V6WcHJxN5OosvwYx?p=preview
Could you try using enableCellEdit: false ?
columnDefs: [{field: 'name', displayName: 'Name', enableCellEdit: false},