I used angular-datatables for table, and its With ColVis Plugin (https://l-lin.github.io/angular-datatables/#/withColVis) for show/hide columns now I want to call services to maintain the column preference userwise (store column visibility state in database) so I had customized html open on click of show/hide column, I had took one button Update on click of this button I want to call web-service and after I will get response I will change the visibility of columns
But I am not able to bind the directive on update button click, once I able to bind directive I can call web service.
Can Anyone suggest whats going wrong?
Try to call your service on this state change event:
angular.module('showcase.withColVis', ['datatables', 'datatables.colvis'])
.controller('WithColVisCtrl', WithColVisCtrl);
function WithColVisCtrl(DTOptionsBuilder, DTColumnBuilder) {
var vm = this;
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
.withPaginationType('full_numbers')
// Active ColVis plugin
.withColVis()
// Add a state change function
.withColVisStateChange(stateChange)
// Exclude the last column from the list
.withColVisOption('aiExclude', [2]);
vm.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('ID'),
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
DTColumnBuilder.newColumn('lastName').withTitle('Last name')
];
function stateChange(iColumn, bVisible) {
console.log('The column', iColumn, ' has changed its status to', bVisible);
}
}
Related
I am new to ag-grid. I am trying to add custom column menu item.
I wrote this in constructor:
this.gridOptions = <GridOptions>{
getMainMenuItems: this.addColumnMenu
};
So, Whenever I click filter icon of column, 'addColumnMenu' is called.
Now, in addColumnMenu, I have added my menu item as
var menuItems = params.defaultItems.slice(0);
menuItems.push({
name: 'Stats', action: this.callStat }
});
Its giving this.callStat is not defined. Because I am not getting anything in this
Whats wrong here ?
If addColumnMenu needs to access 'this', then it needs to be bound. One way to achieve this:
this.gridOptions = <GridOptions>{
getMainMenuItems: this.addColumnMenu.bind(this)
};
I have a UI grid component and when you click on a row, I would like it to load the contents of another ui grid component on the page.
How would you write a function to tell the grid to update the second grid based on a rest api call with parameter from selected from first grid row? As an example, the first grid would be a list of states and the second grid would show all of the cities within the selected state.
Here are the steps to achieve what you are looking for.
Register the Grid API
Call modifyRows
Put your secoundary function call inside the onRowSelection call using .get selectedRows() to get all selected rows.
here is a quick example:
$scope.yourGridName.onRegisterApi = function (gridApi) {
// Set gridApi on scope, if you have more then one grid,
// Your grid api name (gApi in this case)must be unique
$scope.gApi = gridApi;
// Allow row modification
$scope.gApi.grid.modifyRows($scope.requestsGrid.data);
// On a change of selection
gridApi.selection.on.rowSelectionChanged($scope, function (row) {
// Get current selected row, current row is an array
var currentRow = $scope.gApi.selection.getSelectedRows();
//put your secondary call for your second grid here ex:
var config = {
params : {param : currentRow[0].prop}
}
$scope.get("/your/URL", config)
.then (function (data) { //success callback })
.then (function (data, status...etc) { //error callback})
.finally( function(data,...etc) {//reset your grid})
});
};
Let me know if this resolves your issue.
http://ui-grid.info/docs/#/tutorial
I need to set selection to a newly added row.
When $scope.gridApi.selection.selectRow(newObject) is entered, the grid's row model does not have the new row and thus can not select it.
After method addRow is finished, the grid shows the new row (and the data) but no selection was made.
My test code:
$scope.addRow = function() {
$scope.gridOptions.data.unshift({
// my new data object
});
var newObject = $scope.gridOptions.data[0];
$scope.gridApi.selection.selectRow(newObject);
};
How can I achieve this behavior?
Is there an event like 'rowAdded' in angularjs ui-grid I have to listen to?
Is there anywhere a comprehensive list of events fired by ui-grid?
Thanks for help!
You can event listeners on row, column and so on. The documentation is here http://ui-grid.info/docs/#/api/ui.grid.class:Grid
You can add the data listener in onRegisterApi like below,
onRegisterApi : function(gridApi)
{
if(!$scope.gridApi)
{
$scope.gridApi = gridApi;
$scope.gridApi.grid.registerDataChangeCallback(function(data)
{
$scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
}, [uiGridConstants.dataChange.ROW]);
}
}
and select any row you want to select.
Here is a working plnkr. http://plnkr.co/edit/NjnMb65w86L0bKmkkJp0?p=preview
I am trying to use angular-ui/ui-calendar( FullCalendar ) in my Angular Js app.
I have select box which lists some items, based on the selcted item, my event source url need to be updated. So in controller, I do update it, but the calendar is still not using the updated URL and also I need the calendar to refresh/Render, once the source is changed.
As per this link need to some remove and add event source.
I am new to both Jquery and Angular so I would appreciate if any one can explain how I can do it in angular js.
some bits of my controller where i set the url source , but I think it is not the right way to do , and it is also not working.
$scope.locationId = 0
$scope.url = "./api/ev/event/calendarByLocationId?locationId=" + $scope.locationId;
$scope.eventSource = {
url : $scope.url
};
$scope.setURL = function(locationId) {
$scope.locationId = locationId
$scope.url = "./api/ev/event/calendarByLocationId?locationId=" + $scope.locationId;
$scope.eventSource = {
url : $scope.url
};
$scope.eventSources = [ $scope.eventSource ];
}
Without using refetchEvents, below code works for me. Once the new event source is added, Calendar automatically fetching the new data from new source.
// This function is called to change the event source. When
// ever user selects some source in the UI
$scope.setEventSource = function(locationId) {
// remove the event source.
uiCalendarConfig.calendars['myCalendar'].fullCalendar('removeEventSource', $scope.eventSource);
// Create the new event source url
$scope.eventSource = {url : "./api/ev/event/calendarByLocationId?locationId=" + locationId};
// add the new event source.
uiCalendarConfig.calendars['myCalendar'].fullCalendar('addEventSource', $scope.eventSource);
}
I am figuring out on adding and removing events sources as well. There seems to be a problem.
But as temporarily, what I had was a REST url. Once updated, the data is updated. By then I made the program to refresh the event on the same url by triggerring this. This enables the url to be refreshed and grabbed from database again.
$scope.myCalendar.fullCalendar( 'refetchEvents' );
Which your HTML code should look like this:
<div class="calendar" ng-model="eventSources" calendar="myCalendar" config="uiConfig.calendar" ui-calendar="uiConfig.calendar"></div>
Hope this helps.
I'm using a kendo grid and have a checkbox column with the following template:
"<input class='gridCheckbox' id='gridCheckbox_#=name#' name='Selected' type='checkbox' ng-model='dataItem.checked'/>"
In addition I'm also using an observableArray as the grid's dataSource.
When clicking the chekcbox the data in the observableArray is changed as expected but no "change" event is triggered.
Here is how I define the observableArray:
var obsArray = new kendo.data.ObservableArray(scope.gridData);
this.gridDataSource = new kendo.data.DataSource({
data: obsArray
});
obsArray.bind("change", function (e) {
console.log(e.action, e.field);
});
"scope.gridData" is the original dataModel. When I click the checkbox the observableArray is changed but not the "scope.gridData". In order to change the "scope.gridData" I want to listen to the "change" event and change the "scope.gridData" manually but as I said the "change" event is not triggered.
Any suggestions to what am I doing wrong and maybe there is a better solution.
Read This
your issue is that kendo uses a copy of your scope object
I manually added an event to my input checkbox (in our class we're using Angular so it was on ng-click="doSomething()" but maybe yours is just click="doSomething" and recorded handling the boolean change manually.
We have the Kendo Observables, too - but I got **lucky because we're also using the Breeze JS stuff where we can do data detection and refresh the grid once the data propagates backwards to the right place to be set to dirty. ( grid.dataSource.read(); )
If you want the full row value, make the click="doSomething(this)" and then capture it as the Sender. Just debug in and you should the dataItem attached to the Sender.
This might help you & this is not the correct figure but i did one example like this similar to your problem
var contentData = [
{ organization: 'Nihilent', os: 'Window' }
];
var nihl = contentData[0];
var viewModel = kendo.observable({
gridSource: new kendo.contentData.DataSource({
contentData: contentData
})
});
kendo.bind($(document.body), viewModel);
contentData.push({ organization: 'Dhuaan', os: 'Android' });
nihl.set('os', 'iOS');