I have inplemented a JQGrid alog with a subgrid.
I have a requirement of hiding only the subgrid headers(the outer main grid headers should still be visible).
I tried using the following code $(".ui-jqgrid-hdiv", "#gbox_" + subgrid_id).hide() on subGridRowExpanded , which did not solve the problem.
Any help on this will be deeply appreciated.
Try to hide the header in the gridComplete function from the main grid:
gridComplete: function() {
var rowIds = $("#grid").getDataIDs();
$.each(rowIds, function (index, rowId) {
var subgridNameBasedOnRowId = "somesubgrid_" + rowId; //the name of my subgrid
$(".ui-jqgrid-hdiv", "#gbox_" + subgridNameBasedOnRowId).hide();
});
}
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("");
}
});
}
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.
In my asp.net MVC 3 application am using Jqgrid as my grid. It contains a checkbox and i managed the event as below
$("#list").find('input[type=checkbox]').live('change', function () {
if ($(this).is(':checked')) {
var _row = $(this).parent().parent();
}
});
i got the row using $(this).parent().parent() i want to get the id of the _row . How can i get the id? Is there any method please share
This should do the trick:
$('#list').find('input[type=checkbox]').live('change', function () {
if ($(this).is(':checked')) {
var row = $(this).parent().parent();
var rowId = row.attr('id');
}
});
If you are using default value of idPrefix option of jqGrid (which is empty string) otherwise the id will prepend with value of this option.
On select row you can get the id of selected row. In fact when you check a checkbox you also select a row so:
onSelectRow: function(id){
yourId = $("#yourGrid").jqGrid('getGridParam', 'selrow');
alert("The id of checked row is: "+yourId);
}
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.
i have table with 4 rows and when i click on any row then a new is getting added just after row where i clicked. here i am giving my code just to show how i achieve it with jquery.
my jquery by which i adding a new row just after the row where i clicked.
$(document).ready(function () {
$("table#Table1 tr").click(function () {
var $tr = $(this).closest('tr');
var myRow = ($tr.index() + (++counter));
$(this).after("<tr ><td>" + myRow + ") </td><td><img src='Images/closelabel.png' id='imgExpandCollapse' alt='ABC' style='cursor:pointer'/></td><td>Name : New one</td><td>Desig : CEO</td></tr>");
});
});
the problem is that i am adding new row with jquery but click event is not getting attach with new. so please guide me for the best approach to attach click event with new row.
You want to use .live(..) to bind the event. This will allow dynamically generated DOM elements to use the same event.
$("table#Table1 tr").live( 'click', function () {
var $tr = $(this).closest('tr');
var myRow = ($tr.index() + (++counter));
$(this).after("<tr ><td>" + myRow + ") </td><td><img src='Images/closelabel.png' id='imgExpandCollapse' alt='ABC' style='cursor:pointer'/></td><td>Name : New one</td><td>Desig : CEO</td></tr>");
});
Try $.fn.delegate
http://api.jquery.com/delegate/
Try changing -
$("table#Table1 tr").click(function () {
to
$('table#Table1 tr').live('click', function() {
That should ensure jQuery binds the click event to all table rows, including those that are created dynamically.
Working demo - http://jsfiddle.net/w5Atk/