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.
Related
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.
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 completely new to ASP.NET MVC, so the question might sound silly.
I have a view that should display a part of the data from it's model at a time. And there are buttons that should trigger which part of the data gets shown.
So far, I have encapsulated each part of the data into a div and added buttons. I have also added a function that returns CSS style for a given id (basically, it returns display:visible or display:none).
I assume that I'll be able to wire up event handlers for buttons. But I am completely stuck at redrawing/updating of div elements. I mean I don't understand how should I cause divs to update their style.
Could you please help me to show/hide div elements and buttons dynamically?
That should be standard javascript (or in your case jquery). It is unrelated to MVC3. Once you have the view built that includes all your divs with content, you call $('#div_id').show() or $('#div_id').hide() to show or hide. You can also use many other methods that have related animations, but that should get you started.
http://docs.jquery.com/Tutorials:Basic_Show_and_Hide
Like this:
$('buttonClass/IDhere').click(function (){
$('theDivYouWantToShowClass/IDhere').toggle();
});