I have table that loads relatively un-aesthetically to say the least.
I am looking for way to have the a loading animation over the div that holds the table, as that is the problem, before it loads but I am not sure if jqgrid has the appropriate events. I am looking for something like pre-load or pre-init, and then on-ready un-block or end the animation.
If you are using AJAX to fill the grid, you can use $(yourgrid).ajaxStart(handler) to attach an event while loading data and $(yourgrid).ajaxStop(handler) to hide it. JQGrid have an option to set to not display loading message, loadui.
Related
I have a web page with 9 drop downs and a kendo grid.I am making the ajax call for all drop downs.When I load the page the values in the drop downs gets loaded vary slow with some default values.During the loading period of drop downs I want to show the cursor for kendo grid to be wait.Cursor as a wait is coming but disappearing very soon .I want to show the cursor to be wait until all the drop down gets loaded so that user cannot make any selection in any of the drop down.
Here is my JavaScript code:
function ShowLoadingCursor() {
$("body").css("cursor", "wait");
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
}
function HideLoadingCursor() {
$('.popup').hide();
overlay.appendTo(document.body).remove();
$("body").css("cursor", "auto");
}
$(document).ready(function () {
ShowLoadingCursor();
});
$(window).load(function () {
HideLoadingCursor();
});
I am using MVC approach.I have uncountable number of web pages.It is impossible to implement the code in all pages.So I am writing the above code in Layout.cshtml page.I can't hard code any drop down id or grid id.Only thing is in all pages i want to display the cursor to be wait until all drop down gets loaded.Any help will be appreciated.
Your central problem is you a not working with the display model as designed. The idea behind doing AJAX/MVC/JSON web technology, is that each part of the page makes its own call to the server, and individually, the parts report ready when they get done rendering their responses. That way, if part of the page takes a long time to get, the user can interact with the rest of the page in the intervening time. The paradigm you are using was designed to do the opposite of what you are trying to do. My advice to you is to thoroughly examine this requirement. You should find a way to not do this.
When the page is loaded change the cursor's style to wait.
Tap into the DataBound event of the Last DropDownList that is loaded. This will fire when the ddl is finished loading it's data.
//kendo dropdowncode
.Events(events => events.DataBound("onDataBound").
function onDataBound()
{
//remove wait cursor and replace with default mouse cursor
}
EDIT:
You can place the JS functions that will handle the change of the cursor in the _Layout.cshtml page, any view that uses that shared layout will have access to those functions.
As far as your Kendo Grids are concerned, you will have to register the event manually for each grid. Your JS functions will be in shared layout so you don't have to worry about adding them again. One other suggestion would be to not to use AJAX to fill the dropdowns, and "pre populate" them before the view renders. I'm not sure of any other way of doing this.
I have a jqGrid in my page and I want to know when does the resize event occur. Will it occur when I refresh the page? If not, what event occurs when the page containing the grid is refreshed. I would like to capture the event to alter it's width when the page is refreshed.
A page refresh causes a postback, so jQuery/jqGrid events aren't really going to detect a refresh so much as the page loading.
Depending on your goals, I would suggest either the jQuery .ready() method or the jqGrid gridComplete() method to handle grid resizing any time someone opens or refreshes the page.
Which one you use will likely depend on whether the actual data that the grid receives is going to influence how large you want to set the grid.
If the data doesn't matter and you just are concerned about the size of the browser window, I would use .ready() and pre-populate your grid configuration with the appropriate size.
If the data does matter, you'll probably want to use the gridComplete method on your jqGrid.
If you want to be able to adapt your grid size when the user resizes the browser, see this answer: Resize jqGrid when browser is resized?
Does jqgrid supports fade in,fade out, I want to make it fade in fade out when the grid display and reload, is there anyone knows how to make it?
you need to hide it's content or the whole grid?, there is no fade in/out in jqgrid but you can use jquery effect function to create this effect
you can set fadeOut in onBeforeRequest, and fadeIn in loadComplete
onBeforeRequest : function(){
// is used for the whole grid
$(this).closest('#gbox_'+this.id).fadeOut('slow');
/*--------- OR ----------*/
//will fade out only the table inside
$(this).fadeOut('slow');
},
loadComplete : function(){
$(this).closest('#gbox_'+this.id).fadeIn('slow');
/*--------- OR ----------*/
$(this).fadeIn('slow');
}
If you're going for a visual effect, Liviu's answer is a good one. If you're trying to block user interaction with the grid while it's loading data, what I like to do on my grids is use the BlockUI plugin http://jquery.malsup.com/block/#element
My pattern is to block the grid before an ajax call, and then unblock it on the ajax call's success method .
If you are wanting to inform your users that the grid is loading...(I'm completely assuming this might be at the core of what you are looking for??)...as an alternative to a fadeIn/fadeOut...
I find that the "grid loading" message is not the greatest way to inform users that the grid is loading. For example, if the grid has many rows, the message may not appear in the view area and the user may be looking at old data in the grid (while it's loading) and not realize it...especially if the server processes the ajax slow or the query is slow for whatever reason. Here's a little something I do:
Add this event to your jqgrid setup:
beforeRequest: function(){
$('#grid tr').addClass('gridLoadingClass');
$('#grid span').css('color','lightgray');
$('#grid a').css('color','lightgray');
},
And add a class like this somewhere in your CSS:
.gridLoadingClass {color:lightgray;}
Your grid's contents will now "gray out" while loading.
I have a custom entity which has an entry in the sitemap. When I load the entity in the main window, it opens the grid view on the right - standard behaviour so far.
I now want to change some thins in the DOM of the grid body. Therefor I should execute a Javascript while loading the grid. But I have not found any way to do this yet. I sthis possible?
My second way was to but the grid into an Iframe and then do the task on load. This works, but I loose all the buttons from the entity.
Thank you
The best (and probably only) way I can think of to attach javascript to the load of the homepage grid is to add your functionality to a CustomRule for an EnableRule for any object in the custom homepage grid ribbon, which will execute at the time the ribbon loads.
Only caveats: you probably will have to do some validation to make sure the grid is in the right readyState before changing anything, and you'll need to make sure to return true if you actually want that ribbon object to be enabled.
I am having huge data, to display this I am using grid with paging enabled,
and loading the first page data.
How i can load the next page data in the back ground ??
so that when the user clicks next button I will show the data which is preloaded.
Any work around.
Thanks in advance,
kkchaitu
The simpliest solution could be a loading whole set of data to the store and use Paginating Toolbar for filtering purpose, however you refering that amount of data is "huge" - this could make solution uneffective...
or
Have 3 set of data ready (before - empty at start, actual, and after) and overwrite onload events:
after loading - display and load next, (or previous),
before load check is next (or previous) is avaible - use it, change what is prevoius, actual, next, prepare what should be loaded after (in background)
keep in mind that Ajax requests are asinchronic and clicking could be faster than loading and this should be predicted in logic... However this is just an idea