Wijmo 5 [Flex Grid]
read only change on click
HTML
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20161.164/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20161.164/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20161.164/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.20161.164/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20161.164/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20161.164/interop/angular/wijmo.angular.min.js"></script>
<div ng-app="app" ng-controller="appCtrl" >
<wj-flex-grid items-source="data"
control="flex"
initialized="init(s,e)"
allow-add-new="false">
</wj-flex-grid>
</div>
JavaScript
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
data = [];
for (var i = 0; i < countries.length; i++) {
data.push({
country: countries[i],
downloads: Math.round(Math.random() * 20000),
sales:Math.random() * 1000,
expenses: Math.random() * 5000
});
}
var app = angular.module('app', ['wj']);
app.controller('appCtrl', function ($scope) {
$scope.data = new wijmo.collections.CollectionView(data);
$scope.$watch('flex', function () {
var flex = $scope.flex;
if (flex) {
// make first cell read only after initialized FlexGrid
if (flex.selection.row == 0 && flex.selection.col==0) {
flex.rows[0].isReadOnly = true;
}
// cell editable on double click
flex.cells.hostElement.addEventListener('click', function () {
flex.rows[flex.selection.row].isReadOnly = false;
flex.startEditing(false, flex.selection.row, flex.selection.col);
});
// cell read only on selection change
flex.selectionChanged.addHandler(function (s, e) {
flex.rows[e.row].isReadOnly = true;
});
}
});
});