Jqwidgets - jqxgrid not showing load icon - jqxgrid

I am using the nested grid and each inner grid fetches data on expanding . I had put "async: false" for the row source but after making asyn as false i am not getting loading icon inside grid .Earlier when i was not applying async as false the loading icon was coming perfectly .
Please provide some help or suggestion .

If your Ajax call is with async set to false, the Loading icon will never be shown because when the Ajax call is completed, the Grid's initialization code will be called i.e you will not have Asynchronous operation.

Related

Angular UI Grid - reload data not working

I am using ui-grid. The left panel has search filters and a search button which populates data into grid in right panel (initially grid renders without data). Application has two separate controller one for search panel and another for grid.
Now i am using shared service to pass data from searchController to gridController but data in grid is not displaying. I can see gridOptions.data is set by that function.
console.log( $scope.gridOptions.data)//length is 2 here.
If i tried to call http.get directly from grid controller and bind data in success object, grid populates properly.
I tried different methods to refresh/reload (see below) the grid but no results.
$scope.gridApi.core.refresh();
Any suggestion.
You have to assign data to $scope.gridOptions.data in your grid controller.
I assume, you are getting that data from your shared service.
Also ensure, search button generates an event which fetches data from shared service, and assigns it.

Display loading image and hide it

In my application, when the user clicks on item’s name within one custom element (navigator-element), the item is loaded as another custom element (main-element). This loading can take time depending on the size of the item, as there may be many nested items within it. To let the user know that loading is in process, I want to show a spinner.
Here is how I am currently attempting to achieve this:
In main-element, I have one div which contains the spinner image, and has a hidden?="{{!loading}}" attribute.
When the user clicks an item’s name in the navigator-element, the variable bool loading is turned to true, and when loading is done and all nested custom elements have been attached, the application turns loading to false.
However, the spinner div never gets displayed, even though the loading does change to true and then to false, correctly. It seems that Polymer is suppressing intermediate UI changes until all are complete
If I include a button, clicking on which toggles the value of loading, the change are displayed correctly.
I also removed all unresolved attributes from everywhere in my application to see if it matters, however it made no difference.
What must I do to display spinner div, when a long duration process is underway?
Most likely you can fix this by just waiting one animation frame between setting loading = true, and doing the more expensive operation. If you do it all at once the browser won't render anything new until all your work is done because you are blocking the ui thread.

"Out of stack space " while using jquery dialog in a jqgrid

I'm having a jqgrid and on the loadComplete of the grid i am calling a function that creates a new div with some custom classes and appends that div to one of the columns where i am displaying the custom image button created in the div.
Now, on the click of the image button i am displaying a modal dialog form. On my modal dialog form i am getting some value by making a ajax call for the selected record .Also there are two buttons ( save and cancel) on the dialog. When .dialog("close") method is called after save or on close, i am getting a error "SCRIPT28: Out of stack space " and Strangely the save also works fine.
Can anybody assist on that.
Thanks in advance.

jQuery mobile Trigger create doesn't completely work with element added through DOM

I have to add istantly some items without reload the page. After adding these elements I call
$('#one').trigger('create');
But not everything changes as it should (screenshot: http://www.ianaz.com/9a7c50414.html )
The background stays grey, the icon at the right is not added and the text becomes link.
It does not transform everything in a list "button". The third component in the screenshot is as should be.
Do I have to call another method?
Thanks
Just before you call create,try to call listview("refresh") on the list.For eg. if list is the id of the listview,following code should be used:
$("#list").listview("refresh");

Initialize content of a jQuery remote tab on initial page load

I'm using the jQuery tabs library to create a set of remote (i.e., ajax loaded) tabs.
However, to avoid the initial page load being empty until the ajax request finishes, I'd like to include the content for the initial tab with the initial page download.
I've got this generally working by providing a div in the initial page load that matches the title of the tab, but even though this content appears immediately, as soon as I initialize the tabs it does the ajax request IN ADDITION which is both wasteful and causes a flicker. My basic question is how can I get jQuery tabs to NOT do an ajax request for the initially selected tab, and get this content as part of the initial page load, while still loading the other tabs dynamically.
The complication is that I can't hard code the ids/hrefs for which tab is the "initial" one since the initial tab will change based on available content.
I'm sure there is some kind of hacky way to do this with javascript rewriting the URLs of tabs dynamically before I initialize the tabs but I'm looking for a cleaner solution.
Any ideas?
Are you using a specific tab control to do this? It's pretty dependent on how your tabs are implemented...
If you want the data to be included without a delayed load, you will have to include it server side.
Give me some more details and I'll see what I can do!
The best way to do it is using server side implementation to add the starting text. In the JQuery documentation the default text it is not loaded through AJAX.
I'm not sure exactly what you are doing but if that is not your case, then a simple boolean "hack" could be used like this:
var initial=true;
Then, in your tabs code:
$('.selector').tabs({
select: function(event, ui) { if(initial) { initial=false; return false; }
});
This will prevent to execute the ajax call the very first time.
There's an option called "spinner" which holds the text, gif-animation or whatever to be displayed.
$( ".selector" ).tabs( { spinner: 'Retrieving data...' } );

Resources