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.
Related
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 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.
I am testing example at this url : http://trirand.com/blog/jqgrid/jqgrid.html . Right now Detail Grid is loading with default id at the page load.
Requested functionality:
I want Detail button in each row when clicked should load the Detail Grid. Anyone please tell me how. I am also struggling with that.
You can use custom formatter or instert the <botton type='button' ....> (or <input type='button' ...>) with respect of 'setRowData' inside of loadComplete or gridComplete event handler. You can find an example if you look at jqGrid demo and choose "Row Editing" / "Custom Edit". The binding of onClick event you can do either as in "Row Editing" / "Custom Edit" example or in unobtrusive way (see an example from here not exactly for the same problem, but I hope you will understand what I mean) using jQuery.click or jQuery.bind. By the way instead of the button you can consider to use link (<a> or showLink).
Inside of "click" handle you can force loading of the detail grid exactly like you do this typically inside of onSelectRow.
UPDATED: Look here to see how one can place static texts as links in the jqGrid:
It could be needed to fill empty string '' in the "Details" column in the JSON respond from the server. In some cases depends from the data format and the jsonReader used it could be not required.
In case of master/detail scenario you can display (set url or postData and trigger gridReload) detail grid on the place where "clicked the row ..." texts are displayed in the demo example.