Styjun

An issue with the location of my button thought it was straight forward but keep misplacing it. I would like it to be here, however as shown in the image that doesn't seem to be the case.

I've looked online currently but can't seem to find one that is relevant, although perhaps I'm not looking hard enough.

AngularJS:

app.controller('ClientsDetailsEditCtrl', function ($scope, $log, $uibModalInstance, $http, SpringDataRestService, row, onComplete) 
 $scope.alerts = [];
 $scope.onComplete = onComplete;

 // If row is provided, gather up existing data entry for binding
 if (row) 
 SpringDataRestService.get(
 
 "resource": "clientsInternal",
 "id": row
 ,
 function (response) // Success Function - we have a copy of this client
 // Transform URIs into IDs etc for rendering
 if (response.type === "SUBSCRIBER") 
 $http(
 method: 'GET',
 url: response._links.vendorClient.href
 ).then(function successCallback(response) 
 // this callback will be called asynchronously
 // when the response is available
 $scope.targetEntity.vendorClient = response.data.id;
 );
 else 
 // Find any clients which depend on this one and disable delete if necessary
 SpringDataRestService.get(
 
 "vendorClientId": row,
 "collection": "clientsInternal",
 "resource": "search",
 "method": "findActiveClientsByVendorClientId"
 ,
 function (response) // Success Function
 if (response._embedded.clientsInternal.length) 
 $scope.disableDeletionReason = "Cannot delete - " + response._embedded.clients.length + " active client(s) depend on this one."
 
 
 );
 
 $scope.targetEntity = response;
 ,
 function (response) // Failure Function
 clearDentAlerts($scope.alerts);
 reportDentAlert($scope.alerts, new DentAlert(AlertType.ERROR, generateAlertMessage(response)));
 
 );

 $scope.isNew = false;
 else 
 $scope.isNew = true;
 $scope.targetEntity = ;
 

 /*$scope.contactTypeList = [
 'id': 1, 'name': 'Reporting'
 , 
 'id': 2, 'name': 'Primary Reporting'
 , 
 'id': 3, 'name': 'Distribution List'
 , 
 'id': 4, 'name': 'Location'
 , 
 'id': 5, 'name': 'Billing'
 ];
 $scope.targetEntity.contactType = $scope.contactTypeList[0].name;*/

 // Get list of clients for pulldown menu
 $scope.vendorClientList = [];
 SpringDataRestService.get(
 "collection": "clientsInternal",
 function (response) // Success Function
 var clients = response._embedded.clientsInternal;
 for (var i = 0, len = clients.length; i < len; i++) 
 if (clients[i].type === "VENDOR") 
 var newClient = id: clients[i].id, name: clients[i].name;
 $scope.vendorClientList.push(newClient);
 
 
 ,
 function (response) // Failure Function
 clearDentAlerts($scope.alerts);
 reportDentAlert($scope.alerts, new DentAlert(AlertType.ERROR, generateAlertMessage(response)));
 
 );

 // Handle event changes in the form to make it more idiot-proof
 $scope.handleTypeChange = function (newType) 
 // Type has changed - blank values where necessary
 if (newType === "VENDOR") 
 // Blank the vendor client pull down menu - no longer relevant
 $scope.targetEntity.client = "";
 
 ;

 // Handle create button event
 $scope.handleCreate = function () 
 // Got a new or updated object - now try persisting it
 if ($scope.targetEntity.vendorClient) 
 $scope.targetEntity.vendorClient = getResourceUri("clientsInternal", $scope.targetEntity.vendorClient);
 else 
 $scope.targetEntity.vendorClient = null;
 
 SpringDataRestService.save(
 "collection": "clientsInternal",
 $scope.targetEntity,
 function (response) // Success Function
 $scope.onComplete();
 $uibModalInstance.close();
 ,
 function (response) 
 clearDentAlerts($scope.alerts);
 reportDentAlert($scope.alerts, new DentAlert(AlertType.ERROR, generateAlertMessage(response)));
 
 );
 ;

 // Handle update button event
 $scope.handleUpdate = function () 
 if ($scope.targetEntity.vendorClient) 
 $scope.targetEntity.vendorClient = getResourceUri("clientsInternal", $scope.targetEntity.vendorClient);
 else 
 $scope.targetEntity.vendorClient = null;
 
 SpringDataRestService.update(
 
 "collection": "clientsInternal",
 "id": $scope.targetEntity.id
 ,
 $scope.targetEntity,
 function (response) // Success Function
 $scope.onComplete();
 $uibModalInstance.close();
 ,
 function (response) 
 clearDentAlerts($scope.alerts);
 reportDentAlert($scope.alerts, new DentAlert(AlertType.ERROR, generateAlertMessage(response)));
 
 );
 ;

 // Handle delete button event
 $scope.handleDelete = function () 
 SpringDataRestService.delete(
 
 "resource": "clientsInternal",
 "id": $scope.targetEntity.id
 ,
 function (response) // Success Function
 $scope.onComplete();
 $uibModalInstance.close();
 ,
 function (response) // Failure Function
 clearDentAlerts($scope.alerts);
 reportDentAlert($scope.alerts, new DentAlert(AlertType.ERROR, generateAlertMessage(response)));
 
 );
 ;

 // Handle cancel button event
 $scope.handleCancel = function () 
 $uibModalInstance.dismiss('cancel');
 ;

);

HTML:

<div class="widget-body">
 <table ng-table="clientTableOptions"
 class="table table-bordered table-striped margin-bottom-10">
 <tr ng-repeat="entity in $data" ng-click="onRowSelect(entity)">
 <td data-title="'Name'" sortable="'name'" filter=" name: 'text'">
 entity.name
 </td>
 <td data-title="'Type'" sortable="'type'" filter=" type: 'text'">
 <div style="width:100px">
 entity.type
 </div>
 </td>
 <td data-title="'First Line of Address'" sortable="'address1'" filter=" address1: 'text'">
 entity.address1
 </td>
 <td data-title="'City'" sortable="'city'" filter=" city: 'text'">
 entity.city
 </td>
 <td data-title="'State / Province'" sortable="'stateProvince'"
 filter=" stateProvince: 'text'">
 entity.stateProvince
 </td>
 <td data-title="'Country'" sortable="'country'" filter=" country: 'text'">
 entity.country
 </td>
 <td data-title="'Status'">
 <span ng-bind-html="renderCrudEntityState(entity)"></span>
 </td>
 <td data-title="'Action'" href type="button" class="btn btn-sm shiny" ng-click="openModal()">Create New Client>
 <a ng-click="openModal(entity.id)" class="btn btn-default btn-xs purple">
 <i class="fa fa-edit"></i>Modify
 </a>
 </td>
 </tr>
 </table>
 </div>

Code for button:

 <a href type="button" class="btn btn-sm shiny" ng-click="openModal()">Create New Client</a>

Thanks in advance

you are trying to put your button in the filters row , to do that you have to define a custom filter template and pass it to your td for the action col.

I made a sample solution using your code, and you can view it here

the code :
html :

 <div ng-app="myApp" class="container-fluid">

 <script type="text/ng-template" id="path/to/your/filters/actions.html">
 <a href type="button" class="btn btn-sm shiny" ng-click="openModal()">Create New Client</a>
 </script>

 <div class="widget-body">
 <table ng-table="clientTableOptions"
 class="table table-bordered table-striped margin-bottom-10">
 <tr ng-repeat="entity in $data" ng-click="onRowSelect(entity)">
 <td data-title="'Name'" sortable="'name'" filter=" name: 'text'">
 entity.name
 </td>
 <td data-title="'Type'" sortable="'type'" filter=" type: 'text'">
 <div style="width:100px">
 entity.type
 </div>
 </td>
 <td data-title="'First Line of Address'" sortable="'address1'" filter=" address1: 'text'">
 entity.address1
 </td>
 <td data-title="'City'" sortable="'city'" filter=" city: 'text'">
 entity.city
 </td>
 <td data-title="'State / Province'" sortable="'stateProvince'"
 filter=" stateProvince: 'text'">
 entity.stateProvince
 </td>
 <td data-title="'Country'" sortable="'country'" filter=" country: 'text'">
 entity.country
 </td>
 <td data-title="'Status'">
 <span ng-bind-html="renderCrudEntityState(entity)"></span>
 </td>
 <td data-title="'Action'" filter=" action: 'actions'"
 href type="button" class="btn btn-sm shiny" ng-click="openModal()">Create New Client>
 <a ng-click="openModal(entity.id)" class="btn btn-default btn-xs purple">
 <i class="fa fa-edit"></i>Modify
 </a>
 </td>
 </tr>
 </table>
 </div>

</div>

JS:

(function() 
 angular.module("myApp", ["ngTable", "ngTableDemos", "angularMask"]);

 angular.module("myApp").config(setConfigPhaseSettings);

 setConfigPhaseSettings.$inject = ["ngTableFilterConfigProvider"];

 function setConfigPhaseSettings(ngTableFilterConfigProvider) 
 var filterAliasUrls = 
 actions: "path/to/your/filters/actions.html"
 ;
 ngTableFilterConfigProvider.setConfig(
 aliasUrls: filterAliasUrls
 );

 // optionally set a default url to resolve alias names that have not been explicitly registered
 // if you don't set one, then 'ng-table/filters/' will be used by default
 ngTableFilterConfigProvider.setConfig(
 defaultBaseUrl: "ng-table/filters/"
 );
 
)();

(function() 
 "use strict";

 angular.module("myApp").controller("demoController", demoController);

 demoController.$inject = [
 "NgTableParams",
 "ngTableSimpleMediumList",
 "ngTableDemoCountries"
 ];

 function demoController(NgTableParams, simpleList, countries) 


 


)();

for more details see the documentation on this link