Question posted in 
Here I created the sample code for wijmo flex grid, its working fine, but the problem is how to get the selected row values?
angular.module('app', ['wj']);
'use strict';
// declare app module
var app = angular.module('app');
// controller
app.controller('appCtrl', function ($scope, $http) {
// create the filter and expose it to scope for customization
$scope.initialized = function (s, e) {
var flex = s;
$scope.filter = new wijmo.grid.filter.FlexGridFilter(flex);
$scope.downloadsColumnFilterType = wijmo.grid.filter.FilterType.Condition;
$scope.$apply();
$scope.filter.filterChanging.addHandler(function () {
console.log('filter changing');
});
$scope.filter.filterChanged.addHandler(function () {
console.log('filter changed');
});
$scope.filter.filterApplied.addHandler(function () {
console.log('filter applied');
});
}
// persist filter definition
$scope.saveFilter = function () {
localStorage['filter'] = $scope.filter.filterDefinition;
}
$scope.restoreFilter = function () {
$scope.filter.filterDefinition = localStorage['filter'];
}
// update filter type for "downloads" column
$scope.$watch('downloadsColumnFilterType', function () {
var f = $scope.filter;
if (f) {
var col = f.grid.columns.getColumn('downloads'),
cf = f.getColumnFilter(col, true);
cf.filterType = $scope.downloadsColumnFilterType;
}
});
// filters are localizable
$scope.culture = 'en';
$scope.$watch('culture', function () {
// remove old localization reference
var loc = document.getElementById('loc');
if (loc) {
document.head.removeChild(loc);
}
// add new localization reference
loc = document.createElement('script');
loc.id = 'loc';
loc.type = 'text/javascript';
loc.async = false;
loc.src = 'scripts/vendor/wijmo.culture.' + $scope.culture + '.js';
document.getElementsByTagName('head')[0].appendChild(loc);
// show changes
invalidateAll();
});
// invalidate all Wijmo controls
// using a separate function to handle strange IE9 scope issues
function invalidateAll() {
wijmo.Control.invalidateAll();
}
// create some random data
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
data = [];
for (var i = 0; i < 1000; i++) {
data.push({
id: i,
date: new Date(2015, i % 12, (i + 1) % 25),
time: new Date(2015, i % 12, (i + 1) % 25, i % 24, i % 60, i % 60),
country: countries[i % countries.length],
countryMapped: i % countries.length,
downloads: Math.round(Math.random() * 20000),
sales: Math.random() * 10000,
expenses: Math.random() * 5000,
checked: i % 9 == 0
});
}
$scope.data = new wijmo.collections.CollectionView(data);
// notify scope when collectionView changes
$scope.data.collectionChanged.addHandler(function () {
if (!$scope.$root.$$phase) {
$scope.$apply();
}
});
// expose countries, country map
$scope.countries = countries;
var countryMap = [
{ name: 'US', key: 0 },
{ name: 'Germany', key: 1 },
{ name: 'Japan', key: 2 },
{ name: 'Italy', key: 3 },
{ name: 'Greece', key: 4 },
{ name: 'Spain', key: 5 },
{ name: 'Chile', key: 6 },
{ name: 'China', key: 7 },
{ name: 'Canada', key: 8 },
{ name: 'Astralia', key: 9 },
{ name: 'Austria', key: 10 }
];
$scope.countryMap = new wijmo.grid.DataMap(new wijmo.collections.CollectionView(countryMap), 'key', 'name');
});<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" />
<!-- Wijmo -->
<script src="http://demos.wijmo.com/5/Angular/FlexGridFilter/FlexGridFilter/scripts/vendor/wijmo.min.js" type="text/javascript"></script>
<script src="http://demos.wijmo.com/5/Angular/FlexGridFilter/FlexGridFilter/scripts/vendor/wijmo.grid.min.js" type="text/javascript"></script>
<script src="http://demos.wijmo.com/5/Angular/FlexGridFilter/FlexGridFilter/scripts/vendor/wijmo.grid.filter.min.js" type="text/javascript"></script>
<script src="http://demos.wijmo.com/5/Angular/FlexGridFilter/FlexGridFilter/scripts/vendor/wijmo.input.min.js" type="text/javascript"></script>
<link href="http://demos.wijmo.com/5/Angular/FlexGridFilter/FlexGridFilter/styles/vendor/wijmo.min.css" rel="stylesheet" />
<!-- Wijmo-Angular interop -->
<script src="http://demos.wijmo.com/5/Angular/FlexGridFilter/FlexGridFilter/scripts/vendor/wijmo.angular.min.js" type="text/javascript"></script>
</head>
<body ng-app="app" ng-controller="appCtrl">
<wj-flex-grid
style="height:300px"
initialized="initialized(s, e)"
items-source="data">
<wj-flex-grid-column header="ID" binding="id"></wj-flex-grid-column>
<wj-flex-grid-column header="Date" binding="date" format='MMM/dd/yyyy'></wj-flex-grid-column>
<wj-flex-grid-column header="Time" binding="time" format="t"></wj-flex-grid-column>
<wj-flex-grid-column header="Country" binding="country"></wj-flex-grid-column>
<wj-flex-grid-column header="Country ID" binding="countryMapped" data-map="countryMap"></wj-flex-grid-column>
<wj-flex-grid-column header="Downloads" binding="downloads"></wj-flex-grid-column>
<wj-flex-grid-column header="Sales" binding="sales"></wj-flex-grid-column>
<wj-flex-grid-column header="Expenses" binding="expenses"></wj-flex-grid-column>
<wj-flex-grid-column header="Checked" binding="checked"></wj-flex-grid-column>
</wj-flex-grid>
</div>
</html>
2
Answers
You may use the FlexGrid’s selectedItems property, as well as the selectedRows and selection properties if you’d like, to access the row values. selectedItems is probably the easiest way to access the underlying data items, and below is a modified version of your sample that logs the selected data items to the console.
You must add your own html code selection-changed=”selectionChanged()”
And add the method in the controller