I want to use selectize.js in my project. Everything works fine except one thing, when I click on a scroll-bar in drop-down menu it closes automatically and I don't understand how to fix this issue, maybe I should do something in config. Someone faced with this problem?
Here is my config object:
facility_config = {
maxItems: 1,
plugins: ['remove_button'],
valueField: 'id',
searchField: ['facility_name'],
optgroups: [
{ id: 0, group_name: 'Teams' },
{ id: 1, group_name: 'Primary Practices' },
{ id: 2, group_name: 'Facility Affiliations' }
],
optgroupField: 'group_name',
optgroupValueField: 'group_name',
optgroupLabelField: 'group_name',
lockOptgroupOrder: true,
render: {
item: function (item, escape) {
return '<div class="option">' +
'<span>' + escape(item.facility_name) + '</span>' +
'<span ng-if="item.city && item.state">' + ' ( ' + escape(item.city) + ', ' + escape(item.state) + ' )' + '</span>' +
'<span class="fa fa-asterisk text-orange"></span>'
'</div>';
},
optgroup_header: function (data, escape) {
return '<div class="optgroup-header"><strong>' + escape(data.group_name) + '</strong></div>';
},
option: function (item, escape) {
return '<div class="option">' +
'<span>' + escape(item.facility_name) + '</span>' +
'<span ng-if="item.city && item.state" class="text-muted">' + ' ( ' + escape(item.city) + ', ' + escape(item.state) + ' )' + '</span>' +
'<span class="fa fa-asterisk text-orange"></span>'
'</div>';
}
}
};
And my html:
<selectize options="model.items", config="model.facility_config", ng-model="modalObject.facility_id"></selectize>
sample data can be as :
items = [{id: 1, facility_name: 'QA', state: 'LA', city: 'San Francisco', group_name: 'Teams'}];
Here is a website, on which user can control device via browser. The communication between the browser and middlewire is via signalr. The problem here is: when new message from signalr hub reached, I rebind the data to the collection, but the page didn't get refreshed.
Here is the directive:
//主框架
app.directive('mainPart',['$compile',function ($compile) {
return {
restrict: 'AE',
replace: true,
scope: { options: "=" },
link: function(scope, element, attrs) {
scope.$watchCollection('options', function (newValue, oldValue) {
console.log("I see a data change!");
});
},
template: '<div class="panel panel-info" style="margin:10px 10px 10px 10px">'
+ ' <div class="panel-heading">'
+ ' <h3 class="panel-title glyphicon glyphicon-user"><strong>{{options.title}}</strong></h3>'
+ ' </div>'
+ ' <div class="panel-body">'
+ ' <controller-part options="options.controller"></controller-part>'
+ ' <led-part options="options.led"></led-part>'
+ ' </div>'
+ '</div>'
};
}]);
//可控制的控制器部分
app.directive('controllerPart', function () {
return {
restrict: 'AE',
replace: true,
scope: { options: "=options" },
template: '<div class="panel panel-default">'
+ ' <div class="panel-heading">'
+ ' <h3 class="panel-title">控制器部分</h3>'
+ ' </div>'
+ ' <div class="panel-body">'
+ ' <controller-instance options="options"></controller-instance>'
+ ' </div>'
+ '</div>'
};
});
//不可控制的指示灯部分
app.directive('ledPart', function () {
return {
restrict: 'AE',
replace: true,
scope: { options: "=options" },
template: '<div class="panel panel-default">'
+ ' <div class="panel-heading">'
+ ' <h3 class="panel-title">指示灯部分</h3>'
+ ' </div>'
+ ' <div class="panel-body">'
+ ' <led-instance options="options"></led-instance>'
+ ' </div>'
+ '</div>'
};
});
//控制器具体的路数
app.directive('controllerInstance', function () {
return {
restrict: 'AE',
replace: true,
scope: { options: "=options" },
template: '<div class="panel panel-success" style="float:left;margin-left:20px;" ng-repeat="controller in options">'
+ ' <div class="panel-heading">'
+ ' <h3 class="panel-title">{{controller.title}}(在线)</h3>'
+ ' </div>'
+ ' <div class="panel-body">'
+ ' <div class="btn-group" role="group">'
+ ' <button type="button" ng-repeat="function in controller.functionlist" tag="{{function.functionorder}}" class="btn {{function.state|onlineConverter}} glyphicon {{function.functionicon}}">{{function.functionname}}</button>'
//+ ' <button type="button" class="btn btn-default glyphicon glyphicon-off">停止</button>'
//+ ' <button type="button" class="btn btn-default glyphicon glyphicon-chevron-up btn-success">正转</button>'
//+ ' <button type="button" class="btn btn-default glyphicon glyphicon-chevron-down">反转</button>'
+ ' </div>'
+ ' </div>'
+ '</div>'
};
});
//指示器具体的路数
app.directive('ledInstance', function () {
return {
restrict: 'AE',
replace: true,
scope: { options: "=options" },
template: '<div class="panel panel-success" style="float:left;margin-left:20px;" ng-repeat="led in options">'
+ ' <div class="panel-heading">'
+ ' <h3 class="panel-title">{{led.title}}(在线)</h3>'
+ ' </div>'
+ ' <div class="panel-body">'
+ ' <div class="btn-group" role="group">'
+ ' <button type="button" ng-repeat="function in led.functionlist" tag="{{function.functionorder}}" class="btn {{function.state|onlineConverter}} glyphicon {{function.functionicon}}">{{function.functionname}}</button>'
//+ ' <button type="button" class="btn btn-success glyphicon glyphicon-eye-close">灭</button>'
//+ ' <button type="button" class="btn btn-default glyphicon glyphicon-eye-open">亮</button>'
+ ' </div>'
+ ' </div>'
+ '</div>'
};
});
//此过滤器主要是为了过滤工作状态的，将true和false转变为具体的css样式。
app.filter('onlineConverter', function () {
return function (input) {
if (input) {
return "btn-success";
}
else {
return "btn-default";
}
}
});
Here is the Service part:
app.service('dataService', function () {
var getData = function () {
/*
数据结构中的state代表当前路是否是工作状态
*/
var controllerData =
{
title: '中国联通对接设备',
controller: [{
title: '风机',
functionlist: [{ functionname: '停止', functionicon: 'glyphicon-off', functionorder: '0', state: true }, { functionname: '正转', functionicon: 'glyphicon-chevron-up', functionorder: '1', state: false }, { functionname: '反转', functionicon: 'glyphicon-chevron-down', functionorder: '2', state: false }]
}, {
title: '湿帘',
functionlist: [{ functionname: '停止', functionicon: 'glyphicon-off', functionorder: '0', state: false }, { functionname: '正转', functionicon: 'glyphicon-chevron-up', functionorder: '1', state: false }, { functionname: '反转', functionicon: 'glyphicon-chevron-down', functionorder: '2', state: true }]
}, {
title: '暖灯',
functionlist: [{ functionname: '停止', functionicon: 'glyphicon-off', functionorder: '0', state: false }, { functionname: '高光', functionicon: 'glyphicon-chevron-up', functionorder: '1', state: true }, { functionname: '低光', functionicon: 'glyphicon-chevron-down', functionorder: '2', state: false }]
}],
led: [{
title: '电源',
functionlist: [{ functionname: '灭', functionicon: 'glyphicon-eye-close', functionorder: '0', state: false }, { functionname: '亮', functionicon: 'glyphicon-eye-open', functionorder: '1', state: true }]
}, {
title: '转轴',
functionlist: [{ functionname: '正转', functionicon: 'glyphicon-eye-close', functionorder: '0', state: true }, { functionname: '反转', functionicon: 'glyphicon-eye-open', functionorder: '1', state: false }]
}, {
title: '浇灌',
functionlist: [{ functionname: '关闭', functionicon: 'glyphicon-eye-close', functionorder: '0', state: true }, { functionname: '打开', functionicon: 'glyphicon-eye-open', functionorder: '1', state: false }]
}, {
title: '电压',
functionlist: [{ functionname: '正常', functionicon: 'glyphicon-eye-close', functionorder: '0', state: true }, { functionname: '异常', functionicon: 'glyphicon-eye-open', functionorder: '1', state: false }]
}]
};
return controllerData;
}
return {
controllerData: getData,
};
});
app.service('hubService', ['dataService', function (dataService) {
//添加对自动生成的Hub的引用
var chat = $.connection.chatHub;
//启动链接
$.connection.hub.start().done(function () { });
var getData = function () {
return dataService.controllerData();
}
return {
commandReceived: function(callback)
{
if(callback)
{
//调用Hub的callback回调方法
chat.client.printCommand = function (command) {
var data = getData();
var obj = { data: data, command: command };
return callback(obj);
}
}
},
controllerData:getData
};
}]);
Here is the controller part:
var mainController = app.controller('dsController', ['$scope', 'hubService', function ($scope, hubService) {
var currentData = hubService.controllerData();
$scope.controllerData = currentData;
hubService.commandReceived(function (result) {
debugger;
var command = result.command;
var data = result.data;
if (command != undefined) {
if (command.localeCompare("aaaa")==0)
data.controller[1].title = "哈哈哈";
else if (command.localeCompare("bbbb") == 0)
data.controller[0].title = "呵呵呵";
}
$scope.controllerData = data;
});
}]);
Here is the screen shot:
When there is new message reached, then I can see that the hubService.commandReceived was triggered, then I re-bind the data to the collection.
Here is the screen shot:
But the problem is, after re-binding the data,the page is not changed at all!
I have checked many articles on the stackoverflow, seems many problems were solved by adding link function in the directive, so I did. But it didn't work for me.
Maybe I think the problem should be placed in the directive I used? Or the service method I used to handle the signalr callback message?
Anyone who can help me ?
Edit:2015-12-28 22:06:01
Thx for Walt's response, I will have a try, meantime, hope you guys' can provide more advice. I will wait online. thx again.
You need to call
$scope.$apply(function {
$scope.controllerData = data;
})
to notify angular that your data has changed as the notification from signalR is out of the angularjs scope life cycle.
$apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries). Because we are calling into the angular framework we need to perform proper scope life cycle of exception handling, executing watches.
You can read up on it here
You also need to check if the $digest is in progress in some cases not to receive an error.
ui-grid allows for column menus but they are added one on top of the other. I need to have nested menu items (like this http://www.bootply.com/86684) but I also need to specify custom controls, like check boxes and radio buttons on the nested menu item.
So far, I've spent several hours going through the docs, searching online, and reading the ui-grid code but have not been able to come up with a solution. Looking for some pointers or guidance on how I may be able to achieve this.
Sample configuration of menu items for a column in ui-grid:
$scope.gridOptions.columnDefs = [
field: 'Column01',
menuItems: [
{
title: 'Outer Scope Alert',
icon: 'ui-grid-icon-info-circled',
shown: function() { return true; },
active: function() { return true; },
context: $scope,
action: function($event) {
this.context.blargh();
}
},
{
title: 'Grid ID',
action: function() {
alert('Grid ID: ' + this.grid.id);
}
}
]
];
Is there a way to completely overwrite the column menu template so that I can specify a nested array of menu items like so? Note also that I would like to specify a template for the individual menu items.
$scope.gridOptions.columnDefs = [
field: 'Column01',
menuItems: [
{
title: 'Menu A',
icon: 'ui-grid-icon-info-circled',
context: $scope,
menuItems: [
{
title: 'Menu A1',
icon: 'ui-grid-icon-info-circled',
template: '<li>' +
' <div class="checkbox">' +
' <label>' +
' <input type="checkbox"> Checkbox 01' +
' </label>' +
' </div>' +
' <div class="checkbox">' +
' <label>' +
' <input type="checkbox"> Checkbox 02' +
' </label>' +
' </div>' +
'</li>',
action: function($event) {
this.context.blarghA1();
}
},
{
title: 'Menu A2',
icon: 'ui-grid-icon-info-circled',
action: function($event) {
this.context.blarghA2();
}
},
{
title: 'Menu A3',
icon: 'ui-grid-icon-info-circled',
action: function($event) {
this.context.blarghA3();
}
}
]
},
{
title: 'Menu B',
action: function() {
alert('Grid ID: ' + this.grid.id);
}
}
]
];
Thanks!
How to convert normal select list code into angular-ui-select directive code.
My code html:
<select class="input-small tight-form-input" ng-model="panel.valueName" ng-options="f.value as f.text for f in bigValueOptions" ng-change="render()"></select>
My controller code:
$scope.bigValueOptions= [{
text: 'min',
value: 'min'
}, {
text: 'max',
value: 'max'
}, {
text: 'avg',
value: 'avg'
}, {
text: 'current',
value: 'current'
}, {
text: 'total',
value: 'total'
}];
What I have tried:
<ui-select id="viewSelector"
class="viewSelector input-small tight-form-input"
ng-model="panel.valueName"
theme="selectize"
ng-change="render()">
<ui-select-match placeholder="Select">{{$select.selected.text}}</ui-select-match>
<ui-select-choices repeat="f in bigValueOptions">
<div ng-bind-html="f.text"></div>
</ui-select-choices>
</ui-select>
panel.valueName is not having correct value. How to fix this or how to convert normal select into ui-select directuve code.
Please guide.
It works for me: Plunker
Did you defined $scope.panel = {};?
JS:
app.controller('DemoCtrl', function($scope, $http) {
$scope.bigValueOptions= [{
text: 'min',
value: 'min'
}, {
text: 'max',
value: 'max'
}, {
text: 'avg',
value: 'avg'
}, {
text: 'current',
value: 'current'
}, {
text: 'total',
value: 'total'
}];
$scope.panel = {};
});
HTML:
<body ng-controller="DemoCtrl">
Selected object: {{panel.valueName}}
<ui-select id="viewSelector"
class="viewSelector input-small tight-form-input"
ng-model="panel.valueName"
theme="selectize"
ng-change="render()">
<ui-select-match placeholder="Select">{{$select.selected.text}}</ui-select-match>
<ui-select-choices repeat="f in bigValueOptions">
<div ng-bind-html="f.text"></div>
</ui-select-choices>
</ui-select>
</body>
I created one directive in Angularjs now binding model data into directive , problem is that I have I am using JqGrid and I want call one function when JqGrid's gridcomplete event will call.
Everything working fine when we direct use function code into directive, But when trying to call it from
model then its not able to call.
Pasting code and highlighting problem into snap also.
> var app = angular.module('BOneApp', []);
>
> app.directive('jqGrid', function ($compile) {
>
> var jqGridCounter = 0;
>
> return {
> replace: true,
> restrict: 'E',
> scope: {
> gridData: '='
> },
> template: '<div>' +
> '<table></table>' +
> '<div class="jqgrid-pagination"></div>' +
> '</div>',
> controller: function ($scope, $element) {
> $scope.editRow = function (row) {
> $element.find('table').editRow(row);
> };
> $scope.saveRow = function (row) {
> $element.find('table').saveRow(row);
> };
> $scope.restoreRow = function (row) {
> $element.find('table').restoreRow(row);
> };
> },
> link: function (scope, element) {
> var gridNumber = jqGridCounter++;
> var wrapperId = 'jqgrid-' + gridNumber;
> element.attr('id', wrapperId);
>
> var tableId = 'jqgrid-table-' + gridNumber;
> var table = element.find('table');
> table.attr('id', tableId);
>
> var pagerId = 'jqgrid-pager-' + gridNumber;
> element.find('.jqgrid-pagination').attr('id', pagerId);
>
> table.jqGrid({
> id:scope.gridData.id,
> url: scope.gridData.url,
> datatype: "json",
> height: 'auto',
> colNames: scope.gridData.colNames || [],
> colModel: scope.gridData.colModel || [],
> rowNum: 10,
> rowList: [10, 20, 30],
> pager: '#' + pagerId,
> sortname: 'id',
> toolbarfilter: true,
> viewrecords: true,
> sortorder: "asc",
>
> gridComplete: scope.gridData.gridComplete(),
> //editurl: scope.gridData.editurl,
> caption: scope.gridData.caption,
> multiselect: scope.gridData.multiselect,
> autowidth: true
>
> });
> table.jqGrid('navGrid', '#' + pagerId, {
> edit: true,
> add: true,
> del: true
> });
> table.jqGrid('inlineNav', '#' + pagerId);
>
>
> element.find(".ui-jqgrid").removeClass("ui-widget ui-widget-content");
> element.find(".ui-jqgrid-view").children().removeClass("ui-widget-header
> ui-state-default");
> element.find(".ui-jqgrid-labels, .ui-search-toolbar").children().removeClass("ui-state-default
> ui-th-column ui-th-ltr");
> element.find(".ui-jqgrid-pager").removeClass("ui-state-default");
> element.find(".ui-jqgrid").removeClass("ui-widget-content");
>
> // add classes
> element.find(".ui-jqgrid-htable").addClass("table table-bordered table-hover");
> element.find(".ui-jqgrid-btable").addClass("table table-bordered table-striped");
>
> element.find(".ui-pg-div").removeClass().addClass("btn btn-sm btn-primary");
> element.find(".ui-icon.ui-icon-plus").removeClass().addClass("fa
> fa-plus");
> element.find(".ui-icon.ui-icon-pencil").removeClass().addClass("fa
> fa-pencil");
> element.find(".ui-icon.ui-icon-trash").removeClass().addClass("fa
> fa-trash-o");
> element.find(".ui-icon.ui-icon-search").removeClass().addClass("fa
> fa-search");
> element.find(".ui-icon.ui-icon-refresh").removeClass().addClass("fa
> fa-refresh");
> element.find(".ui-icon.ui-icon-disk").removeClass().addClass("fa
> fa-save").parent(".btn-primary").removeClass("btn-primary").addClass("btn-success");
> element.find(".ui-icon.ui-icon-cancel").removeClass().addClass("fa
> fa-times").parent(".btn-primary").removeClass("btn-primary").addClass("btn-danger");
>
> element.find(".ui-icon.ui-icon-seek-prev").wrap("<div class='btn btn-sm btn-default'></div>");
> element.find(".ui-icon.ui-icon-seek-prev").removeClass().addClass("fa
> fa-backward");
>
> element.find(".ui-icon.ui-icon-seek-first").wrap("<div class='btn btn-sm btn-default'></div>");
> element.find(".ui-icon.ui-icon-seek-first").removeClass().addClass("fa
> fa-fast-backward");
>
> element.find(".ui-icon.ui-icon-seek-next").wrap("<div class='btn btn-sm btn-default'></div>");
> element.find(".ui-icon.ui-icon-seek-next").removeClass().addClass("fa
> fa-forward");
>
> element.find(".ui-icon.ui-icon-seek-end").wrap("<div class='btn btn-sm btn-default'></div>");
> element.find(".ui-icon.ui-icon-seek-end").removeClass().addClass("fa
> fa-fast-forward");
>
> $(window).on('resize.jqGrid', function () {
> table.jqGrid('setGridWidth', $("#content").width());
> });
>
> $compile(element.contents())(scope);
> }
> } });
>
>
> app.controller('CostCenter', function ($scope) {
>
> $scope.gridData = {
> url: baseURL + "/CompanyAdmin/GetCostCenterForCompanyAdmin",
> //editurl: "/Tables/Edit",
> caption: "Cost Centers",
> colNames: ['Actions', 'ID', 'Parent Code', 'Parent Name', 'Code', 'Name', 'Address', 'Contact Number', 'Website'],
> colModel: [
> { name: 'act', index: 'act', sortable: false },
> { name: 'ID', index: 'ID', key: true, hidden: true },
> { name: 'ParentCode', index: 'ParentCode', editable: true },
> { name: 'ParentName', index: 'ParentName', editable: true },
> { name: 'Code', index: 'Code', editable: true },
> { name: 'Name', index: 'Name', editable: true },
> { name: 'Address', index: 'Address', editable: true/*, searchoptions: { sopt: ['eq', 'ne', 'cn'] }*/ },
> { name: 'ContactNumber', index: 'ContactNumber', editable: true },
> { name: 'Website', index: 'Website', editable: true/*, edittype: 'select', editoptions: { value:
> sa_EditOpt(arr_AccountNumbers, 'Id', 'ACNumber') } */ }
> ],
> multiselect: false,
> gridComplete: function () { **/* Need to call this function into run time in directive */**
>
> var gridid = $("#jqgrid-table-0");
> var ids = gridid.jqGrid('getDataIDs');
> for (var i = 0; i < ids.length; i++) {
> var cl = ids[i];
> be = "<a class='btn btn-xs btn-default' data-original-title='Edit Row'
> href=\"/CompanyAdmin/UpdateBusinessEntity/" + cl + "\"><i class='fa
> fa-pencil'></i></a>";
> ac = "<a class='btn btn-xs btn-default' data-original-title='Edit Row' href=\"/CompanyAdmin/Create?ParentID="
> + cl + "\"><i class='fa fa-sitemap'></i></a>";
> jQuery(gridid).jqGrid('setRowData', ids[i], {
> act: be + ac
> });
> }
> },
>
> };
>
> });
I guess, in your directive code you are executing the function directly at time of linking and due to that it is not able to execute on gridComplete event.
Try to change
gridComplete: scope.gridData.gridComplete() in your directive code with
gridComplete: scope.gridData.gridComplete.
So it can execute on gridComplete event.
Here is a working example that should give you what you need:
http://plnkr.co/edit/bN5KOtehElJqNP3C7CkD?p=preview
You can bind functions the same way you bind data from outer -> inner scopes. Here, gridComplete is bound from the outer scope (controller scope) into the inner scope using a two-way binding. It gets called in the link function, immediately after compiling, but it could be called any time.
// Code goes here
angular.module('MyApp', [])
.controller('MainCtrl', ['$scope',
function($scope) {
$scope.gridData = {
gridComplete: function() {
console.log("someFn was executed!")
}
}
}
])
.directive('directiveWithFn', function() {
return {
restrict: 'A',
$scope: {
'gridData': '='
},
link: function(scope, elem) {
// Call the function after compile
scope.gridData.gridComplete();
}
}
})
After explore many angularjs official findout the solution
angular.module('getterSetterExample', [])
.controller('ExampleController', ['$scope', function($scope) {
var _name = 'Brian';
$scope.user = {
name: function(newName) {
if (angular.isDefined(newName)) {
_name = newName;
}
return _name;
}
};
}]);
Now my code looks like added "event_gridComplete" function inside block and then called from directive.
Working !
var app = angular.module('BOneApp', []);
app.directive('jqGrid', function ($compile) {
var jqGridCounter = 0;
return {
replace: true,
restrict: 'E',
scope: {
gridData: '='
},
template: '<div>' +
'<table></table>' +
'<div class="jqgrid-pagination"></div>' +
'</div>',
controller: function ($scope, $element) {
$scope.editRow = function (row) {
$element.find('table').editRow(row);
};
$scope.saveRow = function (row) {
$element.find('table').saveRow(row);
};
$scope.restoreRow = function (row) {
$element.find('table').restoreRow(row);
};
},
link: function (scope, element) {
var gridNumber = jqGridCounter++;
var wrapperId = 'jqgrid-' + gridNumber;
element.attr('id', wrapperId);
var tableId = 'jqgrid-table-' + gridNumber;
var table = element.find('table');
table.attr('id', tableId);
var pagerId = 'jqgrid-pager-' + gridNumber;
element.find('.jqgrid-pagination').attr('id', pagerId);
table.jqGrid({
id:scope.gridData.id,
url: scope.gridData.url,
datatype: "json",
height: 'auto',
colNames: scope.gridData.colNames || [],
colModel: scope.gridData.colModel || [],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#' + pagerId,
sortname: 'id',
toolbarfilter: true,
viewrecords: true,
sortorder: "asc",
gridComplete: scope.gridData.gridComplete.event_gridComplete,
//editurl: scope.gridData.editurl,
caption: scope.gridData.caption,
multiselect: scope.gridData.multiselect,
autowidth: true
});
table.jqGrid('navGrid', '#' + pagerId, {
edit: true,
add: true,
del: true
});
table.jqGrid('inlineNav', '#' + pagerId);
element.find(".ui-jqgrid").removeClass("ui-widget ui-widget-content");
element.find(".ui-jqgrid-view").children().removeClass("ui-widget-header ui-state-default");
element.find(".ui-jqgrid-labels, .ui-search-toolbar").children().removeClass("ui-state-default ui-th-column ui-th-ltr");
element.find(".ui-jqgrid-pager").removeClass("ui-state-default");
element.find(".ui-jqgrid").removeClass("ui-widget-content");
// add classes
element.find(".ui-jqgrid-htable").addClass("table table-bordered table-hover");
element.find(".ui-jqgrid-btable").addClass("table table-bordered table-striped");
element.find(".ui-pg-div").removeClass().addClass("btn btn-sm btn-primary");
element.find(".ui-icon.ui-icon-plus").removeClass().addClass("fa fa-plus");
element.find(".ui-icon.ui-icon-pencil").removeClass().addClass("fa fa-pencil");
element.find(".ui-icon.ui-icon-trash").removeClass().addClass("fa fa-trash-o");
element.find(".ui-icon.ui-icon-search").removeClass().addClass("fa fa-search");
element.find(".ui-icon.ui-icon-refresh").removeClass().addClass("fa fa-refresh");
element.find(".ui-icon.ui-icon-disk").removeClass().addClass("fa fa-save").parent(".btn-primary").removeClass("btn-primary").addClass("btn-success");
element.find(".ui-icon.ui-icon-cancel").removeClass().addClass("fa fa-times").parent(".btn-primary").removeClass("btn-primary").addClass("btn-danger");
element.find(".ui-icon.ui-icon-seek-prev").wrap("<div class='btn btn-sm btn-default'></div>");
element.find(".ui-icon.ui-icon-seek-prev").removeClass().addClass("fa fa-backward");
element.find(".ui-icon.ui-icon-seek-first").wrap("<div class='btn btn-sm btn-default'></div>");
element.find(".ui-icon.ui-icon-seek-first").removeClass().addClass("fa fa-fast-backward");
element.find(".ui-icon.ui-icon-seek-next").wrap("<div class='btn btn-sm btn-default'></div>");
element.find(".ui-icon.ui-icon-seek-next").removeClass().addClass("fa fa-forward");
element.find(".ui-icon.ui-icon-seek-end").wrap("<div class='btn btn-sm btn-default'></div>");
element.find(".ui-icon.ui-icon-seek-end").removeClass().addClass("fa fa-fast-forward");
$(window).on('resize.jqGrid', function () {
table.jqGrid('setGridWidth', $("#content").width());
});
$compile(element.contents())(scope);
}
}
});
app.controller('CostCenter', function ($scope) {
$scope.gridData = {
url: baseURL + "/CompanyAdmin/GetCostCenterForCompanyAdmin",
//editurl: "/Tables/Edit",
caption: "Cost Centers",
colNames: ['Actions', 'ID', 'Parent Code', 'Parent Name', 'Code', 'Name', 'Address', 'Contact Number', 'Website'],
colModel: [
{ name: 'act', index: 'act', sortable: false },
{ name: 'ID', index: 'ID', key: true, hidden: true },
{ name: 'ParentCode', index: 'ParentCode', editable: true },
{ name: 'ParentName', index: 'ParentName', editable: true },
{ name: 'Code', index: 'Code', editable: true },
{ name: 'Name', index: 'Name', editable: true },
{ name: 'Address', index: 'Address', editable: true/*, searchoptions: { sopt: ['eq', 'ne', 'cn'] }*/ },
{ name: 'ContactNumber', index: 'ContactNumber', editable: true },
{ name: 'Website', index: 'Website', editable: true/*, edittype: 'select', editoptions: { value: sa_EditOpt(arr_AccountNumbers, 'Id', 'ACNumber') } */ }
],
multiselect: false,
gridComplete: {
event_gridComplete: function () {
var gridid = $("#jqgrid-table-0");
var ids = gridid.jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
be = "<a class='btn btn-xs btn-default' data-original-title='Edit Row' href=\"/CompanyAdmin/UpdateBusinessEntity/" + cl + "\"><i class='fa fa-pencil'></i></a>";
ac = "<a class='btn btn-xs btn-default' data-original-title='Edit Row' href=\"/CompanyAdmin/Create?ParentID=" + cl + "\"><i class='fa fa-sitemap'></i></a>";
jQuery(gridid).jqGrid('setRowData', ids[i], {
act: be + ac
});
}
} },
};
});
You shouldn't do any DOM manipulations inside of your controller to begin with. These lines:
var gridid = $("#jqgrid-table-0");
var ids = gridid.jqGrid('getDataIDs');
can be executed inside of a directive (your current one or a different one for this specific use case) by using element parameter. Another way to put it inside of your directive is to make it an optional attribute, i.e.:
scope: {
gridData: '=',
editButtons: '#'
},
link: function (scope, element) {
...
if(scope.editButtons){
var ids = element.jqGrid('getDataIDs');
...
}
The edit buttons shouldn't be done inside of a controller as well. You should move them inside of a template or add them in a link function.
Using jqGrid with Angular is a bad idea overall. There are some Angular based grids that can be mapped with your application in a much cleaner way, for example: http://ui-grid.info/
If you decide to keep all this presentation logic inside of your controller, then you should fix this line:
gridComplete: scope.gridData.gridComplete(),
You are calling the function during the assignment and therefore assigning the function's RESULT, not the function itself. It should be:
gridComplete: scope.gridData.gridComplete,