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);
}
},
Related
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("");
}
});
}
$('.collapse').each(function() {
var title= $(this).siblings('.accordion-heading').find('a');
$(this).on('show hide', function (e) {
if(!$(this).is(e.target))return;
title.parent().toggleClass('active', 300);
title.parent().hasClass('active') ? $('input.party').prop('value', '') : $('input.party').val(title.siblings('.delete').prop('id'));
var id = title.siblings('.delete').prop('id');
var data = {id: id};
$.post("times.php", data, function(result) {
if(title.parent().hasClass('active')){
$('.times').html('');
} else {
$('.times').html($.parseJSON(result));
}
})
})
})
So I am adding a new accordion-group to my html by adding a new party and I wan't all this to work on the newly added elements as well. I didn't find topics that could help me since it is a bit more specific than any random each function (I think).
This future elements thing is new to me, so I would appreciate some explanations or a good link to a place other that the jquery website which I already checked.
Thank you for your time!
Basically what I want to do this replace $(this).on('show hide', function (e) { with something like $(document).on('show hide', $(this), function (e) {. What I just wrote doesn't work though.
If it is just about the event handler, then you can use event delegation to capture the event on dynamically created elements as well.
There is not reason why you have to use .each here, so just omit it:
$(document.body).on('show hide', '.collapse', function() {
var title = $(this).siblings('.accordion-heading').find('a');
if(!$(this).is(e.target))return;
// rest of the code...
});
this will apply on any new objects matching selector
jQuery(document).on('show hide', '.accordion-heading a', function(event){
...
});
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.
while selecting the checkbox in the jqgrid i need to sum the values of row data in jqgrid and i need to display those data in the footer of the jqgrid.Please help me out how to achieve that.
Thanks in Advance,
Silambarasan,
You can use footerData method. See here and here for details and demo examples.
I got the answer ,i solved that issue.
The Answer is.
footerrow:true,
userDataOnFooter:true,
onSelectRow: function(rowId)
{ handleSelectedRow(rowId); },
function handleSelectedRow(id) {
var jqgcell = jQuery('#list1').getCell(id, 'headerId');
var amount = jQuery('#list1').getCell(id, 'amount');
var cbIsChecked = (jQuery("#jqg_list1_"+jqgcell).attr('checked'));
if(cbIsChecked==true)
{
if(amount!=null)
{
totalAmt = parseInt(totalAmt) + parseInt(amount);
}
}else
{
if(amount!=null)
{
totalAmt = parseInt(totalAmt) - parseInt(amount);
}
}
myGrid.jqGrid('footerData','set',{needbydate:'Total Amount:',amount:totalAmt});
}
The above function is used to get the values of the selected row by clicking the checkbox you will get the value from that by calling the external function like "handleSelectedRow" you pass your row object from that you do your operation and finally update your answer by using the jqGrid function like "myGrid.jqGrid('footerData','set',{needbydate:'Total Amount:',amount:totalAmt}); "
It will update in your footer.
I need to have a nice transition where I remove the first row and append to a table new item.
$.getJSON('/Home/GetRecentPosts/', { count:1 }, function(data) {
$('#recentPosts tr:first').fadeOut(2000);
$('#recentPosts').append($('<tr><td>'+data[0].SchoolName+'</td></tr>').hide().fadeIn(2000));
});
this works the first time i execute getJson only. Please help.
thanks
I've tried to separate each item of functionality you want onto a separate line. If this isn't what you are after, then hopefully it shouldn't be to hard to adjust the below code to suit your needs.
$.getJSON(
'/Home/GetRecentPosts/',
{ count:1 },
removeFirstRowAndAppendNewItem(data)
);
function removeFirstRowAndAppendNewItem(data)
{
console.log("in callback"); // to confirm we have reached here
$('#recentPosts tr:first').fadeOut(2000, function() {
$('#recentPosts tr:first').remove();
newRow = $('<tr><td>'+data[0].SchoolName+'</td></tr>').hide();
$('#recentPosts').append(newRow)
newRow.fadeIn(2000));
});
}
Basically:
Fade out the first row
Remove the first row from the DOM
Create a new element, with styling that hides it
Append the new element to the table
Fade in the new element
(Note: it's possible to combine these steps together)
Try this.
$('#recentPosts tr:visible:first').fadeOut(2000);
Because
$('#recentPosts tr:first').fadeOut(2000);
would have hidden the first element at the first JSON call. Now you are trying again to fadeOut the invisible first element. So you could use a :visible filter to achieve the expected result.
Alternatively, if you wanna remove the element from DOM, try this
$('#recentPosts tr:first').fadeOut(2000, function(){
$(this).remove();
});
Try this:
$.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ......
});