How can i hide a subgrid if it empty?
I tried this solution and this but no luck.
Look at the old answer. It seems be exactly what you need.
Based on this and Oleg's answer i resolve my problem.
In my table all rows are expanded so code looks like this for main table:
gridComplete: function(){
var table_name = 'table_18';
var myGrid = $('#'+table_name);
var rowIds = myGrid.getDataIDs();
$.each(rowIds, function (index, rowId){
myGrid.expandSubGridRow(rowId);
});
var subGridCells = $("td.sgexpanded",myGrid[0]);
$.each(subGridCells,function(i,value){
$(value).unbind('click').html('');
});
}
In this code i removed click action for expand/collapse subgrids. So they are always open and there is no posibility to collapse them.
Based on this i remove empty subgrids.
loadComplete: function(){//in subgrid
var table_value = $('#'+subgrid_table_id).getGridParam('records');
if(table_value === 0){
$('#'+subgrid_id).parent().parent().remove();
}
}
Maybe exist more simple and elegant solution, but for me it's works as i expected.
Related
I read all the posts regarding freezing column. But still I am unable solve my problem.
When I called setFrozenColumns my column has frozen but along with another column header is added to the grid. So the column headers one more than the columns. How to resolve this. Here is my over view of code.
makeJqueryGridInstance(grid, gridSettings);
window.prepareSortableColumns(grid);
makefrozenColumns(grid);
function makeFrozenColumn( grid )
{
var colmodel = grid.jqGrid('getGridParam', 'colModel');
if (colmodel[0].name === 'cb')
{
grid.jqGrid('setColProp', colmodel[0].name, { frozen: true });
grid.jqGrid('setFrozenColumns');
fixPositionsOfFrozenDivs.call(grid[0]);
}
}
function prepareSortableColumns(grid)
{
var gridSettings = grid.data('settings');
var gridId = gridSettings.gridId;
var columnHeaders = $("#" + "gview_" + gridId.replace("#", "")).find(".ui-jqgrid-htable > thead > tr > th");
var colModel = grid[0].p.colModel;
$.each(columnHeaders, function (index, columnHeader)
{
if (colModel[index].sortable == false)
{
$(columnHeader).find("div").removeClass("ui-jqgrid-sortable");
}
});
}
For the first time, it is working fine and the column has frozen.
But second time when the call made to prepareSortableColumns(grid), the columnHeader having one more than colModel (I debugged through devTools). So I am getting error for that particular columnHeader sortable is undefined.
Can anybody help me with this. Thanks in advance.
The code of prepareSortableColumns seems be wrong. Its not oriented on dives added in case of usage of frozen columns (see the answer for more details and use Developer Tools to examine the structure of the grids). You can try to use grid[0].grid.headers array instead of selecting columnHeaders in the way like you do this.
Additionally it's in general wrong to remove ui-jqgrid-sortable class. The meaning of the class will be frequently misunderstood because of the name. Non-sortable columns have to have the class too. What you need to do instead is to set CSS style cursor: default on the headers. See the old answer for the corresponding code example.
I have a two level jqGrid (grid/subgrid) implementation that works very fine.
Now I have a requirement that push me to implement a third level subgrid in only some of the second level rows.
Is there any way to exclude the opening of the third level if any condition on the row does not permit it?
Thanks very much
EDIT as per #Oleg answer
I have implemented the more complex logic example as in the referenced answer, that is
loadComplete: function() {
var grid = $("#list");
var subGridCells = $("td.sgcollapsed",grid[0]);
$.each(subGridCells,function(i,value){
[...]
var rowData = grid.getRowData( ??? );
});
}
Can I use any field to retrieve the rowData in the each loop?
If I understand your question correctly you can do the same like I described in the answer, but do this on the second level of subgrids. To hide "+" icon in some rows you need just execute .unbind("click").html(""); on "td.sgcollapsed" elements of the second level subgrids.
UPDATED: The demo demonstrate how you can get rowid and use getLocalRow (alternatively getRowData) to hide selective subgrid icons ("+" icons). I used the following loadComplete code in the demo:
loadComplete: function () {
var $grid = $(this);
$.each($grid.find(">tbody>tr.jqgrow>td.sgcollapsed"), function () {
var $tdSubgridButton = $(this),
rowid = $tdSubgridButton.closest("tr.jqgrow").attr("id"),
rowData = $grid.jqGrid("getLocalRow", rowid);
if (rowData.amount > 250 ) {
$tdSubgridButton.unbind("click").html("");
}
});
}
I'm using jqGrid and I can't have 2 subgrids at the same time, if the second one is clicked, the previous one should be closed.
And I can't find an event to prevent this...
I need something like:
$("#list2").jqGrid({
multiSubGrids: false
});
Maybe It's something I'm missing...
Thanks in advance!
I have found this way... it work, but I don't know if its the best one:
// this will save the rowId of the previous subGrid
var previousRowId = 0;
$("#list2").jqGrid({
// all your default mapping here..
...
subGridRowExpanded: function (subgrid_id, row_id) {
if (previousRowId != 0) {
$(this).collapseSubGridRow(previousRowId);
}
...
// all your subgrid code here
...
// this will save the actual row_id,
// so the next time a subgrid is going to be expanded,
// it will close the previous one
previousRowId = row_id;
});
Hope it helps someone else!
From here Subgrid/Events:
with subGridRowExpanded: function(subgrid_id, row_id) { ... } you can catch the event.
and with
$("#list2 tr:has(.sgexpanded)").each(function () {
num = $(this).attr('id');
$(this).collapseSubGridRow(num);
});
you can collapse all expanded subgridrow.
I tried solution suggested by Luis and it didn't work
This one works like a charm:
http://guriddo.net/?topic=how-do-i-only-have-only-1-subgrid-expanded-at-any-time/#post-115123
subGridBeforeExpand: function(divid, rowid) {
// #grid is the id of the grid
var expanded = jQuery("td.sgexpanded", "#grid")[0];
if(expanded) {
setTimeout(function(){
$(expanded).trigger("click");
}, 100);
}
},
I am using a custom formatter to create hyperlinks in one of the columns of my grid.
In my code, there are cases when I need to disable the selected row. The row disabling works as I want it to, but the hyperlink for that row is not disabled. I can not select the row and all the other column values are displayed as grey colored to indicate that the row is disabled. The only column whose content does not change color is the one having links.
Any ideas on how to disable links?
This is my loadComplete function:
loadComplete: function (data) {
var ids =jQuery("#list").jqGrid('getDataIDs');
for(var i=0;i < ids.length;i++){
var rowId = ids[i];
var mod = jQuery("#list").jqGrid('getCell',ids[i],'mod');
if(mod=='y'){
jQuery("#jqg_list_"+rowId).attr("disabled", true);
$("#list").jqGrid('setRowData',ids[i],false, {weightfont:'bold',color:'silver'});
var iCol = getColumnIndexByName.call(this, 'adate');
$(this).jqGrid('doInEachRow', function (row, rowId, localRowData) {
$(row.cells[iCol]).children("a").click(function (e) {
e.preventDefault();
// any your code here
alert("No Good");
return false;
});
});
}
}
}
I want the links disabled in all the rows where the value of the column mod=y
You can try to use onClick callback of dynamicLink formatter described here, here and here. It gives you maximum flexibility. Inside of onClick callback you can test something like $(e.target).closest("tr.jqgrow").hasClass("not-editable-row") and just do nothing in the case.
I want to take advantage of the sortableRows property of the jqGrid. How do I detect when a row has been moved. I have studied the documentation and looked for examples but haven't found much. I do believe it is something like
jQuery("#grid").sortableRows({connectWith:'#gird',
ondrop: function(){ alert("row moved") }});
but that does not work. I can move the rows, but don't seemed to have trapped the event. Is there something wrong with my syntax or my approach in general.
Basically, I need to know that the rows have been rearranged so I can be sure they get saved with their new order.
Thanks
jqGrid uses the ui-sortable plugin to sort rows: http://jqueryui.com/demos/sortable/.
In
jQuery("#grid").sortableRows( options )
"options" is the passed to the sortable plugin.
options = { update : function(e,ui){} }
is what you want.
Attach the sortstop event handler to your grid:
jQuery("#grid").bind('sortstop', function(event, ui) { alert("row moved") });
I did a quick test and that worked for me.
jQuery('#'+grid_id).jqGrid('sortableRows', {
update: function (event, ui) {
var newOrder = $('#'+grid_id).jqGrid("getDataIDs");
//do whatever you want with new roworder
//please keep in mind this will give only page visible rows
}
});