Is there a way to disable the pagination/pager buttons while data is asynchronously loaded by the data service? I have a temporary solution including jquery which goes like this
$(".ng-table-pager button").attr("disabled", true);
and then on data loaded i turn it back to false but I find it's a poor solution so I will be thankful if someone would nudge me to the right direction.
You have to create one Boolean variable in your controller, for example -
var isLoading = false;
Then set it's value true before calling your API (service) and false after finish calling your API from your controller.
Now in your view you have to do something like this:
div ng-disabled="isloading"> !--your pagination/pager buttons --> /div>
I hope you are clear with the idea.
Related
I am trying to apply an enhancement on below code line. If anyone knows solution, please help me!
loaderMask = new CQ.Ext.LoadMask(CQ.Ext.getBody(), { msg:"Loading... Please wait"})
loaderMask.show();
This loader mask is fixed in the page position and I like to fix it on the user screen while user scrolls up or down on the page.
Thankyou!
That would be:
scrollPanel.getScrollable().on('scrollstart', function(){
scrollPanel.mask({message: 'scrolling'});
});
scrollPanel.getScrollable().on('scrollend', function(){
scrollPanel.unmask();
});
But it sounds more like, you are loading data and while loading you want to mask the container. If so you might want to listen to the beforeLoad and load event of the store and mask and unmask while it is loading.
The alternative is to use databinding to the store.loading.
If you want to know more about that, please setup a fiddle (fiddle.sencha.com).
I have a complicated setup. My application is driven by a set of "rules" which dictate what the user interface is. The UI is rendered by looping through the rules and creating the individual dropdowns. Initially, everything renders properly. However, once a user makes a change to the UI, other rules may be affected. In my application, an api call is made, which then returns a modified set of rules. In the attached plunker, I've simplified things such that only the new set of rules is applied, which causes the page to re-render. The problem is that my users would like to be able to tab between all of the entries on the page and make changes. However, once the page is re-rendered, the currently selected page element is now gone nothing has the focus. I've tried to put the focus back on the proper element by tracking a common Id, but to no avail.
Using either of these doesn't seem to work.
var el = document.getElementById(focusId);
el.focus();
angular.element(el).focus();
I've also tried using the autofocus attribute on the dropdown that I want to have focus, but that didn't work either. I'm using angularjs 1.2. Any ideas are appreciated.
http://plnkr.co/edit/ND9PKqULIOlixWR4XChN?p=preview
If you want to assign auto focus dynamically to a element on the DOM from angular you can use this:
var myEl = angular.element(document.querySelector('select'));
myEl.attr('autofocus',"attr val");
You can also pass in an id like: angular.element(document.querySelector('#focusId'));
You can look here for a prior answer which may be of some more help!
-Cheers!
Problem here is, you are trying to focus the element before the blur event completes. So you need to execute the focus code after blur event. Async execution of your focus code would solve the problem. You can use either setTimeout or $timeout.
setTimeout(function(){
angular.element('#'+focusId).focus();
/* //or
var el = document.getElementById(focusId);
el.focus();
*/
});
or
$timeout(function(){
angular.element('#'+focusId).focus();
/* //or
var el = document.getElementById(focusId);
el.focus();
*/
});
dont forgot to inject $timeout to your controller if you are using second code. Hope this helps :)
scope.$watch('[apps, date]', function() {
...
...
...
}
Now I know that the above works, but what I need is it to display nothing unless an app is selected first and THEN after that when an app or a date is changed, the code must re-run.
Perhaps this isn't possible.
Any help would be greatly appreciated. :)
**Context:
What happens is I get a UI grid returned with no data(as no app has been selected) until I eventually select an app.
If your intent is to watch a group or a collection you just have to scroll down this page:
https://docs.angularjs.org/api/ng/type/$rootScope.Scope
Search for example: $watchGroup inside the page
I found one weird issue while working in angular js
I am getting data using ajax call. I am binding data to $scope object but view is not getting updated after data bind
following is my code
$scope.getPlanDetail = function (){
$rootScope.planBody.checkUpdate= false;
$http.post('http://MyServerURL',JSON.stringify($rootScope.planBody)).
success(function(response){
$scope.dataVal = response;//Able to view data in console;
console.log($scope.dataVal)//data json shown in log window
localStorage.setItem("tempDataVal", JSON.stringify(response));//able to set data in localStorage;
}
}
getPlanDetail() function is getting called on btn click using ng-click
Same functionality I have done in other case(using get method.) where code is working properly. The only diff I found is that current AJAX call is taking to much of time because of too much of server side processing and its post method I am not sure whether this(using post method) is causing issue in binding
On same view(.html) I added dummy button ng-click event. After ajax success call I click on button and view is loaded because of data use from localStorage variable.
$scope.dummyClick= function(){
console.log($scope.dataVal);//giving Undefined
$scope.dataVal = JSON.parse(localStorage.getItem("tempDataVal"));// this time view binded properly.
}
I didn't understand why data is not bind to view in success method. Does the $scope time out after some time if server takes too much time to respond?
Thanks in Advance.
If you are changing the model inside an ajax call then you need to notify the angular js that you have some changes.
$scope.$apply(); after the below line will fix your issue. This line will update the scope.
$scope.dataVal = response;
Thanks,
Santyy
I have a data store and a grid. I add filters in the store and they work properly as I see the results in my grid. But once I disable all my filters aka clear them from my store I want to view all my rows in the grid without reloading them from a web service which is a kind of heavy task. All data is already fetched from the service and there is no need to reaload it again.
How can I do this? Is there some function in the store?
There already was a similar question with correct answer. In short, you need to call filter method without params after setting remoteFilter to false:
store.remoteFilter = false;
store.clearFilter();
store.remoteFilter = true;
store.filter();
Here is a jsfiddle: http://jsfiddle.net/8Gmtd/
I suspect that your grid's view is not refreshed. Try this:
mygrid.getView().refresh()