I have a grid that the first column is a checkbox, and I need to bring the checkbox marked, but when I load my grid sometimes the checkbox comes checked and sometimes not comes checked,
someone could help me ??
var item = record.data;
grid.store.load({
callback: function(response){
Ext.each(response, function(records) {
Ext.each(item.links, function (valor){
if(records.data.id == valor.id){
var row = records.index;
grid.getSelectionModel().select(row);
}
});
});
}
});
form.loadRecord(record);
Problem solved with event beforerefresh. Thanks for all.
var item = record.data;
grid.store.load({
callback: function(response){
grid.getView().on('beforerefresh', function(view) {
Ext.each(response, function(records) {
Ext.each(item.links, function (valor){
if(records.data.id == valor.id){
var row = records.index;
grid.getSelectionModel().select(row, true);
}
});
});
});
}
});
form.loadRecord(record);
Related
Currently am working with angularjs.
now i have an ng-click function,it is called when checkbox is checked or unchecked. i have a full page loader and when i click on the check box it will be displayed. It will be hidden only after loading the complete view. I tried this code and it is not working
here comes the click
<input type="checkbox"id="myId" ng-click="sampleClick(1)">
here is the js code
$scope.sampleClick = function(type) {
var param = new Object();
param.type = type;
//side bar listing
Data.post('url/testurl', param).then(function(data){
$scope.all = '';
$scope.all = angular.fromJson(data);
console.log("Contents is trying to load.");
$scope.$on('$viewContentLoaded',function(event, viewConfig){
console.log("Contents did load.");
$rootScope.setVariable = 1;
});
}, function (error) {
$rootScope.setVariable = 1;
});
}
I want to set the $rootScope.setVariable = 1 only when the view section is completely loaded.(and each time when I click on the check box)
Note : when I use $viewContentLoaded at the time of page load, it works without any issue. But when I use the same along with the ng-click function, i don't get any response.
If the view is rendered using ng-repeat, why can't you use ng-repeat directive to handle the end of render and then initiate a function call.
for example
<div ng-repeat="i in things" repeat-done>
// here you use i to render your filter with checkbox
</div>
and directive will look like
app.directive('repeatDone', function($rootScope) {
return function(scope, element, attrs) {
if (scope.$last){
//set your variables or do you job
}
};
})
You can set one flag you can set it value true/false.
for example(I am taking your example so you can understand it batter):-
$scope.loading = false;
$scope.sampleClick = function(type) {
var param = new Object();
param.type = type;
//side bar listing
Data.post('url/testurl', param).then(function(data){
$scope.all = '';
$scope.all = angular.fromJson(data);
console.log("Contents is trying to load.");
$scope.loading = true;
$scope.$on('$viewContentLoaded',function(event, viewConfig){
$scope.loading = false;
console.log("Contents did load.");
$rootScope.setVariable = 1;
});
}, function (error) {
$rootScope.setVariable = 1;
});
}
here i have take $scope.loading variable which default value is false, when you click on checkbox then it will be set to true so at that time you can show the loader and when it get the data it will be set to false so it will stops loading.
I hope you understand.
I'm trying to use angular-leaflet-directive with Websocket, though I'm able to integrate successfully, the positions of the markers are not getting updated dynamically. However The positions of map gets updated if I move mouse over the map but doesn't get updated when the lat-lng value changes.
Below is code snippet of module.
$scope.markers = {};
angular.extend($scope, {
bounds : $scope.bounds,
center : {},
kppaths : {},
events: {
markers:{
enable: [ 'move' ]
}
}
});
$stomp.setDebug(function(args) {
$log.info(args);
});
$scope.startWS = function() {
var connectionHeaders = {};
// Connect
$stomp.connect("/kp-ws").then(function(frame){
$log.info("connected to server")
$stomp.send('/app/start', {});
// Subscribe for message
$scope.subscription = $stomp.subscribe('/topic/kp', function(
data, headers, res) {
angular.forEach(data, function(k,v){
$scope.markers[k.markerId].lat = k.lat;
$scope.markers[k.markerId].lng = k.lng;
});
});
});
};
$scope.stopWS = function() {
$stomp.send('/app/stop', {});
$scope.subscription.unsubscribe();
$stomp.disconnect();
};
$scope.$on("leafletDirectiveMarker.move", function(event, args){
$log.info(args.model.lat);
});
} ]);
The html file
<div class="card-block">
<leaflet bounds="bounds" geojson="geojson" lf-center="center"
paths="kppaths" markers="markers" event-broadcast="events" width="100%" height="480px"></leaflet>
</div>
Is I'm missing something, Please let me know or suggest how to fix this issue?
The possible workaround I found is:
leafletData.getMap().then(function (map) {
$timeout(function() {map.invalidateSize()});
});
basically, once the map is invalidated, it updates markers' position. Although not perfect, considering some performance issues, the workaround at least solves the main issue.
Hi I am using angular ui grid, I have filter and grouping in the grid
I am expanding by default all rows using following
$scope.expandAll = function(){
$scope.gridApi.treeBase.expandAllRows();
};
$timeout(function() {
$scope.expandAll();
}, 500);
now if user filter on any column which is not available in data
And then remove or cancel, It does not expand automatically
It shows like above
I need all rows to expand automatically when user clear or cancel filter data
I found there is an event filterChanged, but I don't know how to use that
I am using following plunkr for testing
http://plnkr.co/edit/hhIW9R9aX1JlFe4nodJQ?p=preview
Thanks
Modify your onRegisterApi method to the following
onRegisterApi: function( gridApi ) {
$scope.gridApi = gridApi;
$scope.gridApi.core.on.filterChanged($scope, function() {
var grid = this.grid;
var isfilterclear = true;
angular.forEach(grid.columns, function( col ) {
if(col.filters[0].term){
isfilterclear = false;
}
});
if(isfilterclear) {
$timeout(function() {
$scope.expandAll();
},500);
}
});
}
see plunkr http://plnkr.co/edit/1FWDIe?p=preview
I m using new angular uigrid. But I think documentation is really poor for searching. I did not find necessary infos for filtering. I will use server side filtering . SO I have to get changed filter text for each column. Please help me?
I tried this code. But probably it was for ng grid(old grid)
$scope.$watch('completedgridOptions.filterOptions.filterText', function (newVal, oldVal) {
if (newVal !== oldVal) {
console.log("Filter");
}
}, true);
if you want to check what is what:
$scope.gridApi.core.on.filterChanged($scope, function () {
var grid = this.grid;
$.each(grid.columns, function (index, column) {
switch (column.field) {
case 'externalIdentifier':
$scope.identifier = column.filters[0].term;
break;
case 'name':
$scope.name = column.filters[0].term;
break;
case 'status':
$scope.status = column.filters[0].term;
break;
....
....
....
}
});
//you have to move it by hand, if you are on the third page and filter, it will stay on the third page, even though you will not have any data there
grid.options.paginationCurrentPage = 1;
//use the timeout so that you don't get a db call at every key pressed
if (angular.isDefined($scope.filterTimeout)) {
$timeout.cancel($scope.filterTimeout);
}
$scope.filterTimeout = $timeout(function () {
getPage(); //this will call your data from the db
}, 500);
});
var getPage = function () {
itemsPerPage = paginationOptions.pageSize;
offset = (paginationOptions.pageNumber -1) * paginationOptions.pageSize;
getDataByFilter($scope.name, $scope.identifier, $scope.status, offset, itemsPerPage)
}
I am new using angular as well but try this:
$scope.gridApi.core.on.filterChanged($scope, function () {
var grid = this.grid;
for (var i = 0; i < objGrid.columns.length; i++) {
term = objGrid.columns[i].filter.term;
field = objGrid.columns[i].field;
console.log('Field: ' + field + '\nSearch Term: ' + term);
}
});
$scope.gridOptions.data = $scope.data;//initialiazing grid with data
$scope.gridApi.core.on.filterChanged($scope, function () {
var grid = this.grid;
//do your stuff here
});
Basically I was able to use the filterchanged feature on grid only after the grid gets initialized with data.
So put the snippet as suggested in the thread only after initializing grid with data.
I have used $timeout as below for my convinience.
$timeout(function () {
$scope.getData();//get your data from ajax call or from where ever your data is
$scope.assignDatatoGrid();//assign the data to grid or initialize the grid with data
$scope.$apply();
//this feature is available only after the grid gets populated with data
$scope.gridApi.core.on.filterChanged( $scope, function() {
var grid = this.grid;
});
}, 2000);
It worked for me
Thank you
I have two buttons:
<button id="1">button 1</button>
<br>
<button id="2">button 2</button>
I want to make an alert message to appear only after the two buttons are clicked, this is part of a larger app for which I am using Backbone.js, so far I have this:
var test = {};
_.extend(test, Backbone.Events); //in order to use the backbone events feature
test.on("hello bye", function(){
alert("works!");
});
$("#1").click(function() {
test.trigger("hello");
});
$("#2").click(function() {
test.trigger("bye");
}?);
This presents the message whenever one of the two buttons are clicked, but I need it to work only after the two buttons are clicked. Is there a way to achieve this using the Backbone.Events feature or perhaps using jQuery?
Fiddle: http://jsfiddle.net/ccgRN/
Thanks
Here's an idea using promises: http://jsfiddle.net/LFJGL/1/
Edit: fixed for older browsers:
var test = {};
var promises = [];
_.extend(test, Backbone.Events); //in order to use the backbone events feature
function GetAPromise() {
var p = $.Deferred();
promises.push(p);
return p;
}
var events = "hello bye".split(" ");
_.each(events,function(event) {
var p = GetAPromise();
test.on(event, function() {
p.resolveWith(event);
});
});
$("#1").click(function() {
test.trigger("hello");
});
$("#2").click(function() {
test.trigger("bye");
});
$.when.apply($, promises).done(function() {
alert('triggered');
//might be nice to remove the event triggers here.
});
A minimalist implementation would be to create a couple variables to keep track of what events have been fired.
var helloClicked = false;
var byeClicked = false;
var test = {};
_.extend(test, Backbone.Events);
test.on('hello bye'), function() {
if (helloClicked && byeClicked) {
alert('works!');
}
});
$('#1').click(function() {
helloClicked = true;
test.trigger('hello');
});
$('#2').click(function() {
byeClicked = true;
test.trigger('bye');
});