// define app, include Wijmo 5 directives
var app = angular.module('app', ['wj']);
app.directive('smartWijmoGrid', ['$timeout', '$rootScope', '$compile', '$filter', function($timeout, $rootScope, $compile, $filter) {
return {
restrict: "AE",
transclude: true,
scope: {
columnDefinitions: "=",
filterDefinition: "=",
// groupBy: "=",
groupByConfig: "=?",
// groupData: "=",
items: "=",
// data: "=",
api: "=",
callback: "&",
init: "&"
},
templateUrl: 'smartWijmoGrid.template.html',
link: function(scope, element, attributes) {
var callback = scope.$eval(scope.callback);
var flex;
// add picker icon to column header element
var host;
var colHdr;
var btn;
scope.api.getColumnDefinition = function() {
localStorage.test = scope.grid.columnLayout;
return scope.grid.columnLayout;
};
scope.api.getColumnObjects = function() {
return scope.grid._cols;
};
scope.api.setColumnDefinition = function(colDef) {
scope.grid.columnLayout = colDef;
};
scope.api.populateGridWithData = function(data) {
scope.data = data;
}
scope.api.getFilterDefinition = function() {
return scope.filter.filterDefinition;
};
scope.api.setFilterDefinition = function(filterDef) {
scope.filter.filterDefinition = filterDef;
};
scope.applyFilter = function() {
return scope.filterDefinition;
}
scope.api.getGrid = function() {
return scope.grid;
};
scope.api.manageAttribute = function() {
console.log(host);
};
scope.initialize = function(s, e) {
scope.init({
$event: {
s: s,
e: e
}
});
// add picker icon to column header element
host = s.hostElement;
colHdr = host.querySelector('[wj-part="ch"]');
btn = $('#manage_attr')[0];
btn.id = attributes["columnPickerNew"];
//return scope.grid;
}
function createGrid(columnDefinitions) {
// var gridHtml = '<wj-flex-grid control="flexGrid" items-source="items" auto-generate-columns="false" is-read-only="true" >';
// if (angular.isArray(columnDefinitions)) {
// angular.forEach(columnDefinitions, function(columnDefinition) {
// gridHtml += createColumn(columnDefinition);
// });
// }
// element.append(gridHtml);
// $compile(element)(scope);
}
function initializer() {
scope.$watch("columnDefinitions", initializeGrid);
scope.$watch("items", initializeData);
scope.$watch('flexGrid', initializeFilters);
scope.$watch('filter', traceFilters);
}
scope.$watch('groupByConfig', function(newConfig) {
if (!newConfig) {
return;
}
var groupOptions = [];
for (var i = 0; i < scope.groupByConfig.options.length; i++) {
groupOptions.push(scope.groupByConfig.options[i].dataKey);
}
scope.groupOptions = groupOptions;
scope.groupBy = scope.groupOptions[0];
});
scope.$watch('groupBy', function(newVal) {
if (scope.groupBy && scope.groupData) {
var cv = scope.groupData.groupDescriptions;
cv.clear();
if (scope.groupBy == 'none') {
cv.clear();
} else {
var groupDesc = new wijmo.collections.PropertyGroupDescription(scope.groupBy);
cv.push(groupDesc);
}
}
});
function initializeGrid() {
// if (scope.columnDefinitions) {
// createGrid(scope.columnDefinitions);
// }
}
function initializeData() {
if (scope.items.length != 0)
scope.groupData = new wijmo.collections.CollectionView(scope.items);
// if (scope.columnDefinitions) {
// createGrid(scope.columnDefinitions);
// }
}
function traceFilters() {
// console.log(scope.filter.filterDefinition);
}
function initializeFilters() {
scope.grid = scope.flexGrid;
scope.filter = new wijmo.grid.filter.FlexGridFilter(scope.grid);
scope.filter.filterApplied.addHandler(function(s, e) {
console.log(scope.filter.filterDefinition);
scope.filterDefinition = scope.filter.filterDefinition;
});
}
initializer();
// scope.manageAttributesPopupUrl = "popupManageFields.html";
scope.manageAttributesPopUp = false;
scope.attributes = [];
scope.searchdata = [];
var b = [];
scope.manageAttributesPopupCallback = function(e) {
debugger;
populateFrame();
scope.manageAttributesPopUp = true;
//dragable sort list
$('.dragList').sortable({
containment: "parent",
axis: "y",
handle: ".manageCol-tbl--type-nameTd .icon",
tolerance: "pointer"
});
};
scope.manageAttributesPopupHideCallback = function() {
scope.manageAttributesPopUp = false;
};
scope.onChange = function(e) {
if (flex.columns != null) {
var sender = e.title;
if (e.value != null) {
for (var i = 0; i < flex.columns.length; i++) {
if (flex.columns[i]._hdr == e.title) {
flex.columns[i].visible = e.value;
}
}
}
}
};
scope.search_change = function(e) {
if (e.data[0].value != null && e.data[0].value != "") {
// b = $filter('filter')(scope.attributes, { title: e.data[0].value }, 0);
scope.attributes = [];
b = [];
for (var i = 0; i < scope.searchdata.length; i++) {
var lowerStr = (scope.searchdata[i].title + "").toLowerCase();
var s = lowerStr.indexOf(e.data[0].value.toLowerCase()) === 0;
if(s)
{
if (b.indexOf(scope.searchdata[i].title) == -1)
{
// b = scope.attributes[i];
b.push({ "title": scope.searchdata[i].title, 'value': scope.searchdata[i].value });
}
}
}
scope.attributes = b;
}
else
{
b = [];
scope.attributes = [];
scope.attributes = scope.searchdata;
}
}
// populate the frame with checkboxes for each column
function populateFrame() {
// add one checkbox for each grid column
for (var i = 0; i < flex.columns.length; i++) {
// create checkbox
var col = flex.columns[i];
var hdr = col.header ? col.header : col.binding;
var checked = col.visible ? 'checked' : '';
if (scope.attributes.indexOf(hdr) == -1) {
scope.attributes.push({
"title": hdr,
'value': col.visible
});
}
}
scope.attributes.sort()
scope.searchdata = scope.attributes;
}
},
};
}]);
// controller
app.controller('appCtrl', function($scope) {
$scope.wijmoApi = {};
// $scope.groupOptions = [{
// "group": "None"
// },{
// "group": "Country"
// }, {
// "group": "Sales"
// }, {
// "group": "Expenses"
// }];
$scope.groupByConfig = {
options: [{
"displayKey": "None",
"dataKey": "none"
}, {
"displayKey": "Country",
"dataKey": "country"
}, {
"displayKey": "Sales",
"dataKey": "sales"
}, {
"displayKey": "Expenses",
"dataKey": "expenses"
}]
};
$scope.filterDefinition = {};
$scope.data = [];
$scope.columns = [];
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: null,
expenses: Math.random() * 5000
});
}
$scope.open = function(){
$scope.cols = $scope.wijmoApi.getColumnObjects();
debugger;
$scope.pop.show(true);
}
$scope.manageAttributesPopupCallback = function(e) {
$scope.wijmoApi.manageAttribute();
};
$scope.data = data;
// $scope.columns = [
// {
// "name": "country",
// "dataType": 1,
// "binding": "country",
// "header": "country"
// }, {
// "name": "downloads",
// "dataType": 1,
// "binding": "downloads",
// "header": "downloads"
// }, {
// "name": "sales",
// "dataType": 1,
// "binding": "sales",
// "header": "sales"
// }, {
// "name": "expenses",
// "dataType": 1,
// "binding": "expenses",
// "header": "expenses"
// }
// ];
// expose data as a CollectionView to get events
// $scope.data = new wijmo.collections.CollectionView(data);
// $scope.cvGroup = new wijmo.collections.CollectionView(data);
// $scope.groupBy = '';
});
<!-- mark this as an Angular application and give it a controller -->
<link rel="stylesheet" type="text/css" href="http://cdn.wijmo.com/5.20162.198/styles/wijmo.min.css" />
<script type='text/javascript' src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type='text/javascript' src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.min.js"></script>
<script type='text/javascript' src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.input.min.js"></script>
<script type='text/javascript' src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.grid.min.js"></script>
<script type='text/javascript' src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.grid.filter.min.js"></script>
<!-- <script type='text/javascript' src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.grid.detail.min.js"></script> -->
<script type='text/javascript' src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.grid.min.js"></script>
<!-- AngularJS and Wijmo directives (optional, use in AngularJS applications) -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js" type="text/javascript"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="http://cdn.wijmo.com/5.20162.198/interop/angular/wijmo.angular.min.js" type="text/javascript"></script>
<script src="app.js"></script>
<div ng-app="app" ng-controller="appCtrl" >
<a href="javascript:void(0)" id="manage_attr" ng-click="open()">
{{ 'Manage Attributes' }}
</a>
<smart-wijmo-grid items="data" group-by-config="groupByConfig" column-definitions="columns" filter-definition="filterDefinition" api="wijmoApi" init="init($event)">
</smart-wijmo-grid>
<wj-popup style="padding: 12px" control="pop">Manage Attrs
<br />
<hr />{{cols[0]._name}}
<input type="checkbox" ng-change="change()" >
<br />Downloads:
<input type="number" ng-model="newItem.downloads" />
<br />Sales :
<input type="number" ng-model="newItem.sales" style="margin-left:30px" />
<br />Expenses :
<input type="number" ng-model="newItem.expenses" style="margin-left:10px" />
<br />
<hr/>
<button class="wj-hide" ng-click="handleOK(newItem)">OK</button>
<button class="wj-hide">Cancel</button>
</wj-popup>
</div>
<!-- <smart-popup type="small" template-url="{{manageAttributesPopupUrl}}" show='{{manageAttributesPopUp}}' on-hide="manageAttributesPopupHideCallback(e)"></smart-popup> -->
/* Put your css in here */
<div class="col s12">
<wj-menu value="$parent.groupBy" header="Group by" ng-if="groupByConfig && groupByConfig.options">
<wj-menu-item ng-repeat="item in groupByConfig.options" value="item.dataKey">{{item.displayKey}}</wj-menu-item>
</wj-menu>
<!-- <div ui-grid="gridConfig" ui-grid-selection ui-grid-pinning ui-grid-grouping ui-grid-auto-resize ui-grid-edit ui-grid-cellNav ui-grid-pagination ui-grid-save-state ui-grid-resize-columns ui-grid-move-columns></div> -->
<wj-flex-grid style="height: 400px;width:100%;box-sizing:border-box;" column-picker-new="manage_attr" control="flexGrid" items-source="groupData" initialized="initialize(s, e)" selection-changed="filtered(s, e)" is-read-only="true" ></wj-flex-grid>
</div>
<div class="modal-header">
<div class="searchSlideMain searchSlideMain--inputBdrBNone" data-ng-init="mysearch=false;">
<div class="searchWithHiddenTextField" ng-class="{'active': isActive}">
<a href="javascript:void(0)" ng-class="showMe" ng-click="treeSearchModel='';hideSearch(e)" smart-tooltip position="Down" message="{{'Down' || translate }}" delay="250" ng-show="hideClose" class="waves-circle waves-effect cancel-icon btn-flat black-text">
<i class="icon iconSmall center grey-text">
<svg><use xlink:href="#icon_Close"></use></svg>
</i>
</a>
<smart-textfield type="autocomplete" class="input-field" focus="focusSearch" on-change="search_change($event)"></smart-textfield>
<a href="javascript:void(0)" class="search-icon btn-flat black-text" smart-tooltip position="bottom" delay="50" message="{{'Search' || translate }}" ng-click="showSearch(e)">
<i class="icon iconSmall center grey-text">
<svg><use xlink:href="#icon_Search"></use></svg>
</i>
</a>
</div>
</div>
<i class="icon iconSmall grey-text left">
<svg>
<use xlink:href="#icon_ManageFields"></use>
</svg>
</i>
<span class="title">{{ 'Manage Attributes' || translate }} </span>
</div>
<div class="modal-content padding0" ng-class="{'is-scrolled': scrolled}" id="dynamicdata">
<div class="model_body">
<!--<smart-list model="{{attributes}}"-->
<!-- style-class="collection noBorder dragList"-->
<!-- item-class="collection-item ui-sortable"-->
<!-- template="checkboxList.html" height="283px">-->
<!--</smart-list>-->
</div>
</div>
<div class="modal-footer is-scrolled" ng-class="{'is-scrolled': scrolled}">
<div>
<a href="javascript:void(0)" class="waves-circle waves-effect cancel-icon pull-left black-text" smart-tooltip message="Reset" position="bottom" delay="50">
<i class="icon iconSmall center blue-text">
<svg><use xlink:href="#icon_Reset"></use></svg>
</i>
</a>
<smart-button flat="true" class="modal-close" config='{"title":"DONE"}' ng-click="applyChanges()"></smart-button>
<smart-button flat="true" class="modal-close" config='{"title":"CANCEL"}'></smart-button>
</div>
</div>
<script id="checkboxList.html" type="text/ng-template">
<div>
<span class="manageCol-tbl--type-nameTd">
<icon class="icon iconSmall ui-sortable-handle">
<svg>
<use xlink:href="#icon_Drag"></use>
</svg>
</icon>
</span>
<input type="checkbox" class="filled-in" id="{{'attribute_' + $index}} " checked="checked" ng-change="onChange(item)" ng-model="item.value" />
<label for="{{'attribute_' + $index}} " class="grey-text text-darken-4"> {{item.title}}</label>
</div>
</script>
<div ng-class="{'modal': true, 'modal-lg': modalType == 'large', 'modal-sm': modalType == 'small'}">
<div class="modal-header" ng-if="headerUrl" ng-include="headerUrl"></div>
<div class="modal-content padding0" ng-if="contentUrl" ng-include="contentUrl"></div>
<div class="modal-footer" ng-if="footerUrl" ng-include="footerUrl"></div>
<div class="modal-footer" ng-if="!footerUrl && !templateUrl">
<div class="row marginBottom0">
<a class="modal-action modal-close waves-effect btn-flat ng-binding">DONE</a>
<a ng-if="isCancelButton" class="btn-flat editRequest modal-close waves-effect">CANCEL</a>
</div>
</div>
<div ng-include="templateUrl"></div>
</div>