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.
Related
I am using bootstrap calendar inside slickgrid. When calendar popup is opened and use Alt+tab or scope out of slickgrid then calendar gets stuck. I have to reload application to get rid of calendar popup. I want to close calendar pop up as soon as user scopes out of slickgrid. Please suggest way to do it.
Not sure if it's your problem but you can't use just a z-index in SlickGrid that won't work and won't do anything, you need to use position: absolute on your Editor (each editor has a args.position passed to their constructor) that you can use to reposition your editor next to the cell that you clicked, however make sure that you also add a position() method that will be called if it exist and of course you need to add proper code to reposition the DOM element inside that method. Also when you click on a different cell then the previous Editor will call the destroy method, so make sure you remove the Editor properly by adding necessary code in your destroy() method.
All of that position usage can be seen in 1 of the built-in Editor which is the LongText defined in the slick.editors.js on this line
The absolute style is applied here
and the position(cellPosition) method is defined here
If your problem is really that your Editor doesn't get removed from the DOM, then it's because you didn't code the destroy() properly and here is the LongText destroy() method for reference. Also you might want to add an onBlur event that will call your destroy() method after a blur or any other event that you choose.
and here's a print screen of the LongText Editor that is repositioned over the cell you clicked and you can test it yourself in this Example - Editing
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.
In our page, the grid will be inside an accordian. So i would like to eliminate the caption layer and implement the hiddengrid:true functionality on clicking on the accordian instead of clicking on the caption layer icon(in specific on opening of accordian). How can I achieve this? Any suggestions , thanks in advance.
The main intention is to have the functionality like in the documentation of hiddengrid option
If set to true the grid is initially is hidden. The data is not loaded (no request is sent) and only the caption layer is shown. When the show/hide button is clicked for the first time to show grid, the request is sent to the server
You can use jQuery.slideUp, jQuery.slideDown or jQuery.slideToggle to implement the behavior close to hiddengrid:true.
To implement this you can place grid inside of a div like below
<div id="overGrid">
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
</div>
and use
$("#overGrid").slideToggle("fast");
if you need to toggle the grid.
The demo demonstrate this.
UPDATED: Probably you have some remote datatype in the grid ("json" or "xml") and want don't load the grid contain at the beginning? In the case you need just use datatype: "local" initially and use setGridParam to change the datatype to "json" (or "xml") inside of "select" callback of tab. After changing the datatype you should call trigger("reloadGrd") to load the data (or to refresh the data) from the server.
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 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();
});