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.
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?
Often I need to edit a single record in a database without the need to display the grid at all. I can hide the grid using CSS or jQuery. What I couldn't figure out is to directly go to the edit form from another webpage while hiding the grid.
I know it's kind of defeating the purpose of having a grid, but it's one of those cases where only a single record should be view and modified by the users similar to the Access single record mode. Is it even possible?
In general you can just hide so named "gbox" created over the grid and then call editGridRow method with the options which you like to have. As the result you will have the form which close to what you want. I am sure that you have to make some other small problems, but the first look can be like you want. Moreover you can scroll over the rows during editing.
The demo demonstrate what I mean. It displays the following form
The demo uses the following code
$("#list").jqGrid({
...
loadComplete: function (data) {
$(this).jqGrid("editGridRow", data.rows[0].id, {
modal: true,
overlay: 0, // create no overlay
onClose: function () {
return false; // don't allow to close the form
}
});
}
}).closest(".ui-jqgrid").hide();
This is one of the reasons I like to use my own custom edit forms, instead of the one built into jqGrid. Then you can just open it like you would from the jqGrid handler (with appropriate parameters of course), no grid required.
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.
I need to implement a sought of onRendered() event that would ensure all of the grid is rendered before I do something, which is to .hide() it. My gaol is to have a .hide() and .show() button attached to the div the grid resides in, with the default status set at hidden. The problem is that at the point in which my script executes the initial .hide(), the grid is not fully created yet by the grid.js script. I would rather not do any delay loop. Much rather have a callback.
Any help would be appreciated
Thanks
Pat
This should work without a callback. I have a SlickGrid app where I show and hide the grid in response to UI events. The grid exists as soon as it is instantiated (with new Slick.Grid) and can be manipulated with the .hide()and .show() methods.
I did find one catch though...
If you create the div tag with display: none (so it is initially hidden) the grid columns do not initialise properly. To workaround this I create the div tag with visibility: hidden and remove this style before using the .hide()and .show() methods.
My code looks roughly like this:
<div id="mygrid" style="visibility: hidden"></div>
$grid = $("#mygrid")
grid = new Slick.Grid($grid, gridData, gridColumns, gridOptions);
// Hide grid by default, remembering to remove the visibility style
$grid.hide();
$grid.css("visibility", "visible");
// You can now show and hide the grid using normal jQuery methods
$grid.show();
$grid.hide();
Hope this helps.
The slick grid has implemented an event onRendered event github source. We can subscribe to this event and make the appropriate use of it.