<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://rawgit.com/clinton-lobo/uiGridInlineEdit/master/Css/ui-grid.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script data-require="lodash.js@*" data-semver="4.16.2" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.2/lodash.js"></script>
<script src="https://rawgit.com/clinton-lobo/uiGridInlineEdit/master/Js/vendor/angular.js"></script>
<script src="https://rawgit.com/clinton-lobo/uiGridInlineEdit/master/Js/vendor/ui-grid-inline-editing.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app" class="container">
<div class="row col-lg-12" ng-controller="gridCtrl">
<div class="inline-editing-grid" ui-grid="gridOptions" ui-grid-pagination="" ui-grid-selection="" ui-grid-edit="" ui-grid-row-edit=""></div>
<div class="pull-right" style="margin-top: 15px;">
<button ng-click="saveAll()" class="btn btn-primary">Save</button>
<button ng-click="cancelAll()" class="btn btn-primary">Reset</button>
</div>
</div>
<div class="row">
</div>
</body>
</html>
/**
*
*/
var app = angular.module('app',
[
'ui.grid',
'ui.grid.pagination',
'ui.grid.selection',
'ui.grid.edit',
'ui.grid.rowEdit',
'ui.grid.saveState'
]);
app.filter('genderFilter', function () {
var genderHash = {
'M': 'male',
'F': 'female'
};
return function (input) {
var result;
var match;
if (!input) {
return '';
} else if (result = genderHash[input]) {
return result;
} else if ((match = input.match(/(.+)( \([$\d,.]+\))/)) && (result = genderHash[match[1]])) {
return result + match[2];
} else {
return input;
}
};
});
app.filter('maritalFilter', function () {
var genderHash = {
'M': 'Married',
'S': 'Single'
};
return function (input) {
var result;
var match;
if (!input) {
return '';
} else if (result = genderHash[input]) {
return result;
} else if ((match = input.match(/(.+)( \([$\d,.]+\))/)) && (result = genderHash[match[1]])) {
return result + match[2];
} else {
return input;
}
};
})
app.controller('gridCtrl', ['$scope', '$http', '$log', '$timeout', 'uiGridConstants', '$q', '$interval',
function ($scope, $http, $log, $timeout, uiGridConstants, $q, $interval) {
$scope.gridOptions = {
enableSorting: true,
enableFiltering: true,
enableRowSelection: true,
enableFullRowSelection: false,
enableSelectAll: true,
enableInlineRowEditing : true,
enableGridMenu: false,
disableMouseWheel:true,
gridMenuShowHideColumns: false,
enableColumnMenus: false,
enableHorizontalScrollbar: uiGridConstants.scrollbars.NEVER,
paginationPageSizes: [5, 10, 15],
enablePaginationControls: true,
paginationPageSize: 10,
onRegisterApi: function (gridApi) {
$scope.grid1Api = gridApi;
$timeout(function() {
gridApi.core.notifyDataChange(uiGridConstants.dataChange.ROW);
},300);
gridApi.selection.on.rowSelectionChanged($scope,function(row){
setInlineEditing(row);
});
gridApi.selection.on.rowSelectionChangedBatch($scope,function(rows){
var filtered = _.filter(gridApi.grid.rows, function(o) { return o.visible; });
filtered.forEach(function(thisRow){
setInlineEditing(thisRow);
});
});
gridApi.core.on.canvasHeightChanged($scope, function(oldHeight, newHeight) {
handleWindowResize();
});
},
columnDefs: [
{ name: 'employeeid', enableCellEdit: false, enableCellEditOnDblClick:false, type: "number" },
{ name: 'managerid', enableCellEdit: true, enableCellEditOnDblClick:false },
{ name: 'title', enableCellEdit: true, enableCellEditOnDblClick:false},
{ name: 'birthdate', enableCellEdit: false, type: "date", cellFilter: 'date:"yyyy/MM/dd"' },
{
name: 'gender', enableCellEdit: false, enableCellEditOnDblClick:false, cellFilter: 'genderFilter',
editableCellTemplate: 'ui-grid/dropdownEditor',
editDropdownValueLabel: 'gender',
editDropdownOptionsArray: [
{ id: 'M', gender: 'male' },
{ id: 'F', gender: 'female' }]
},
{
name: 'maritalstatus', enableCellEdit: true, enableCellEditOnDblClick:false, cellFilter: "maritalFilter",
editableCellTemplate: 'ui-grid/dropdownEditor',
editDropdownValueLabel: 'maritalstatus',
editDropdownOptionsArray: [
{ id: 'M', maritalstatus: 'Married' },
{ id: 'S', maritalstatus: 'Single' }]
}
]
};
$http.get('https://rawgit.com/clinton-lobo/uiGridInlineEdit/master/data/employeeData.json')
.success(function (data) {
$scope.gridOptions.data = data.slice(0, 55);
});
function setInlineEditing(row){
if(row.isSelected && row.inlineEdit){
row.inlineEdit.isEditModeOn = true;
row.inlineEdit.enterEditMode();
}
if(!row.isSelected && row.inlineEdit){
console.log("In setInlineEditing = false");
row.inlineEdit.isEditModeOn = false;
row.inlineEdit.cancelEdit();
}
}
function handleWindowResize(){
if($scope.grid1Api){
$interval(function(){
$scope.grid1Api.core.handleWindowResize();
},250,5);
}
}
$scope.saveAll = function(){
$scope.grid1Api.grid.rows.forEach(function(row) {
if(row.inlineEdit && row.inlineEdit.isEditModeOn){
row.inlineEdit.saveEdit();
}
});
};
$scope.cancelAll = function(){
$scope.grid1Api.selection.clearSelectedRows();
$("form[name='inputForm']").parent(".ng-scope").remove();
$(".ui-grid-cell-contents-hidden").removeClass("ui-grid-cell-contents-hidden");
};
}]);
/* Styles go here */
.inline-editing-grid {
width: 100%;
border-radius: .5em;
box-shadow: 0 0 .5em #000;
box-sizing: border-box;
}
.ui-grid-row:nth-child(odd) .ui-grid-cell {
background-color: rgb(243, 241, 241);
}
.ui-grid-row:nth-child(even) .ui-grid-cell {
background-color: #FFFFFF;
}
.ui-grid-row.ui-grid-row-selected > [ui-grid-row] > .ui-grid-cell {
background-color: #cfedf7;
}
.inline-editing-grid .highlight-cell{ background-color: #8cbde4 !important; }
.inline-editing-grid .ui-grid-render-container-body .ui-grid-header-cell,
.inline-editing-grid .ui-grid-render-container-left .ui-grid-header-cell,
.inline-editing-grid .ui-grid-row,
.inline-editing-grid .ui-grid-cell,
.inline-editing-grid .ui-grid-cell .ui-grid-vertical-bar {
height: 20px !important;
font-size: 12px;
line-height: 20px;
}
.inline-editing-grid .ui-grid-render-container-body .ui-grid-header-cell,
.inline-editing-grid .ui-grid-render-container-left .ui-grid-header-cell,
.inline-editing-grid .ui-grid-header-cell {
height: 20px !important;
}
.inline-editing-grid .ui-grid-filter-container {
padding: 1px 1px;
}
.inline-editing-grid .ui-grid-cell-contents {
padding: 1px 1px;
}
.inline-editing-grid form[name="inputForm"] select, .inline-editing-grid form[name="inputForm"] input {
font-size: 12.5px !important;
width: 100% !important;
}
.inline-editing-grid .ui-grid-header-cell .ui-grid-cell-contents {
white-space: normal;
-ms-text-overflow: clip;
-o-text-overflow: clip;
text-overflow: clip;
overflow: visible;
}
div.ui-grid-header-cell-primary-focus {
/* display: inline; */
margin-right: 20px;
}
*:focus{
outline:none;
}
.ui-grid-header-cell-label{
word-wrap: break-word;
}