TableToGrid initially ugly. Then it formats correctly. How to get hide table until everything is ready - jqgrid-asp.net

I like using jqGrid and TableToGrid especially. Getting Json data is nice as well, and I use that functionality in a couple of views in my asp.net MVC4 application, however, the one page where I have jqGrid TableToGrid. The only thing is, when you first load the page or when you refresh a page with a table to grid page on it, The table looks ugly, and then it stabilizes. Is there a way I can hide the table or show a loading screen until the thing is fully ready to view...
I know regular jqGrid has a loading text option, but that is only when your table is being loaded via ajax...
You can put a load dialog over the grid... But I have my loading dialog pop up on document.ready and the ugly looking grid is still there initially. Maybe there is a way I can hide the table earlier than $(document).ready ?

Maybe you can put your entire grid into a div with visibility:hidden or display:none and just show that div with jquery in document.ready.
[Update]
You may show div in jqgrid's gridComplete event. According to their documentation "This fires after all the data is loaded into the grid and all other processes are complete. Also the event fires independent from the datatype parameter and after sorting paging and etc."
Check their wiki for more info http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events

Related

Loading content from server without postback

I have a div and inside that I need to show a slide of divs. On the page load there would be only 3 div slides but when all three divs are displayed on the next button press I want to load some more divs (actually I have data on a sql database, I need to get them and print on the page a slide divs) on each next button press. (Asp.net)
How do I achieve this? what's the best way? Ajax, javascript, jquery. Show me a way.
Thank you.
There could be many possiblities but you can use asp.net update panel avialable in ASP.net ajax control toolkit, it will be easy for you to integrate and you need to do very small work at your end.
The other option is using jQuery ajax it could reletively more efficent and gives you more control but it will require good javascript/ jQuery skills. This tutorial is good starting point for using jQuery ajax with asp.net.

Using jQuery Validator on dialog displayed with BlockUI

I'm still learning jQuery, and I've come up against something I'm not sure how to proceed with.
I have a form, within it is a div which is hidden (using "display: none") at load time. This div is later displayed via the BlockUI plugin as a modal dialog for the editing of certain input elements. I'm trying to get the validation plugin to check that the fields I have denoted as required are actually filled in by the end user.
I have used the validation plugin elsewhere in my app without any problems, but this is the first time I'm using it to validate inputs that are hidden at load time. The validations aren't being executed (i.e. empty text inputs that are marked as required aren't flagged as such, and .valid() returns true).
I stepped through the validation logic with Firebug and discovered that none of the input elements within the dialog div are present within $(this.currentForm). If I keep the dialog div visible and remove the $.blockUI call, then the validation works as expected.
So I think I know what the problem is now -- my inputs aren't in the DOM, because they were originally not visible, so the validation plugin doesn't know they exist. I'm not sure how to fix this. Can anyone offer a suggestion? Thanks!
EDIT: The call to $.blockUI() is removing the dialog div from the DOM. Looks like I'll have to find another way to display the dialog.
EDIT: the code is proprietary so I can't post it.
Validation plug-in link
BlockUI plug-in link

ASP.NET MVC Render Ajax / Standard View

I am a little confused and making it alot more complicated than this needs to be! Here is what I have...
A view which displays a drop down of US States. When the user chooses a state it loads a list of data from a database and returns the results (populates the View Model) and the View renders the information.
What I wanted to do was have have the dropdown trigger an Ajax event which performs the data load, but also wanted it to depreciate if the user didn't have Javascript enabled. How would I go about rendering the view with AND without javascript / ajax?
Hope that makes sense. Thanks for your help.
You can't re-populate a drop-down without jscript. You can do a page-reload with a new drop-down though, although the logic to determine which to use is javascript unfortunately. (Not to mention triggering the re-load of the page on click)
No Javascript support though? That seems kind of out of date, most people run javascript-enabled browsers these days. As for paranoia freaks with javascript turned off, a <noscript> block to tell them to get over it may be appropriate.
To do this with ajax, read this article about cascade dropdowns by Stephen Walther.
To do this without ajax, you could put your first dropdown in a form with a button visible only when javascript is disabled (hide this with javascript for that) wich gets to some action (in another window, maybe) wich returns the second dropdown populated according to the element selected on the first (on the first window, if you have 2 - you could know this url using a viewstate variable).

triggering javascript events using asp.net

I'm writing an asp.net web app. and i've hit a bit of a brick wall.
basically i have 2 pages, the main page with a text box in and a popup that contains a treeview.
My problem is this. when i select a treeview item i want the program to perform some database transactions using asp.net and then pass the value retrieved from the database into a javascript function that passes the data back from the popup page to the parent page. My problem is that i cannot find any way of calling a javascript function from asp.net. I've tried assigning attributes to controls on page load, but this does not work as when the page loads the data has not been retrieved from the database.
Have a look at the ClientScriptManager class. You can register scripts from code-behind that will run when the HTML page loads. Those scripts can call other javascript functions on the page.
There are many tutorials and examples on the Web. Here's one I found that may help but there are many more.
How to use the client script manager
You hit the nail on the head when you said "I've tried assigning attributes to controls on page load, but this does not work as when the page loads the data has not been retrieved from the database." You just need to discover when you're pulling the data from the database, and then assign the values after that. Without looking at your code, there's no way to know for sure, but Page_PreRender is probably a good bet to assign your values...it's probably after you're pulling information from the db...it's pretty much the last place that you can make things happen before the html is generated for the client.
You can invoke a function resided in the Main Page and call that function in the Main Page from the Child Page which is your pop up window.
Please refer to these links for references
http://chiragrdarji.wordpress.com/2007/03/10/call-parent-windows-javascript-function-from-child-window-or-passing-data-from-child-window-to-parent-window-in-javascript/
http://www.webmasterworld.com/forum91/2957.htm
http://hspinfo.wordpress.com/2008/01/12/call-parent-windows-javascript-function-from-child-window/
This one helps with retrieving popups from values using javascript
http://www.eggheadcafe.com/articles/20060117.asp
This one shows how to fire a postback using javascript, and manage it in the codebehind.
http://weblogs.asp.net/mnolton/archive/2003/06/04/8260.aspx
If you put them together, and use Control.ClientID to find the actual "html name" of your asp.net controls, you'll be able to set that up in no time.
Might not be the prettiest way to do it in town, and incidentally make little baby Jesus cry, but anyway, it works.
[edit]Oh. I just saw that it seems I answered the question the other way around, or "how to trigger codebehind from Javascript". I think the method I suggest may help you, if you use it right.
The javascript of the popup should pass the information to the parent window, and the parent window function should call a postback when it receives the information.
The javascript of the popup window should be only registered on a postback with the correct information retrieved, so that when the postback occurs on the popup because of the selection of the right information, the window closes and passes the information to the parent page.
The parent page, triggering postback, does the thingies you need it to, and the app resumes "normally" from there on, doing whatever you need it to, outside of the popup page.

I've built a ascx control and I would like to be able to keep adding them using Javascript instead of having to do a full call back

I've built a ascx control and I would like to be able to keep adding new instances of it using JavaScript instead of having to do a AJAX callback. Is this possible? I am basically building a web form for a query control and should clause X be filled in, I want to generate a control for the next clause below. I would like to learn how to do this without doing a callback.
Thanks
ASCX are server side user controls and, to my knowledge, can only be loaded by a server event. This can be accomplished through a full page postback or using UpdatePanels and ASP.net AJAX.
If you don't want to use these options and stick with a full JavaScript solution, you're looking at probably doing DOM manipulation and dynamically adding straight HTML.
If the ASCX controls don't change their appearance and all you're doing is showing and hiding them, one last alternative could be to load all of them into DIV tags that have their display style set to none. Then when the user clicks on a checkbox or whatever, you can use JavaScript to show that DIV tag containing the next control. This is how many JavaScript tab setups work.

Resources