afterSaveCell: function (rowid, name, val, iRow, iCol) {
var grid = $("#" + subgrid_table_id);
if (parseFloat(val) > 0) {
//alert(val + ' ' + rowid);
//$(this.rows[rowid]).attr("aria-selected", true);
//$(this.rows[rowid]).addClass("ui-state-highlight");
grid.jqGrid('setSelection', rowid, false);
grid.jqGrid('setCell', rowid, 'Review', "True");
}
}
It should mark the row checked if editable cell value is greater than zero. Which it does first time but when I try to edit same cell it doesn't keep checkbox checked
You can try to resetSelection, before to do a set
Related
I have kendo child grid. It's having some row. Each row having some cells. If i change the value of a cell other than first row,i have to get the corresponding first row cell value. That means if i change the second row second column value in child grid i have to get the first row second column value in that grid.
I have written change event of each cell in child grid. On change of any cell value this event will fire. In this event i want to achieve the above functionality. Screen shot is attached.
Code for change of cell is
$('<input maxlength="9" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoNumericTextBox({
format: "0.####",
decimals: 0,
min: 0,
spinners: false,
change: function (e) {
//Here i want to get the first row of this cell value
}
}).off("keydown");
You have two ways to do that. You can get the value from the cell text or from the dataItem, which I prefer.
In your editor function try this:
function(container, options) {
var $container = $(container),
tdIndex = $container.index(),
$correspondingCell = $container.closest("tbody").find("tr:first td:eq(" + tdIndex + ")"),
dataItem = grid.dataItem($correspondingCell.parent()),
correspondingColumnName = options.field;
// Get from cell's text
console.log("From Cell", $correspondingCell.text());
// Get from dataItem
console.log("From DataItem", dataItem[correspondingColumnName]);
$('<input maxlength="9" data-bind="value:' + options.field + '"/>')
.appendTo($container)
.kendoNumericTextBox({
format: "0.####",
decimals: 0,
min: 0,
spinners: false,
change: function (e) {
// Now this is the corresponding cell's value from first row
console.log("First row's corresponding cell value", this);
}.bind(dataItem[correspondingColumnName]) // <- bind the dataItem's property to the change event
}).off("keydown");
}
Demo
I want to implement draggable rows feature in jqGrid and it's working also using option
$('#MyGrid').jqGrid('gridDnD', {
connectWith: '#MyGrid2'});
Now, my client want to show "Drag here" text in target grid row at the position where the row will be dragged from existing to new one, how can I show this text while dragging row from source to target? Any help is appreciated...
I find your question interesting. So I modified the old demo from the answer and created the demo which demonstrates a possible implementation. The grid during dropping looks like on the picture below:
It uses the following code
$("#grid1").jqGrid("gridDnD", {
connectWith: "#grid2",
drop_opts: {
activeClass: "",
hoverClass: ""
},
onstart: function (ev, ui) {
ui.helper.addClass("ui-widget ui-widget-content")
.css({
"font-size": "11px",
"font-weight": "normal"
});
},
onstop: function (ev, ui) {
$("#dragHelper").hide();
},
droppos: "afterSelected", // "beforeSelected"
beforedrop: function (e, ui, getdata, $source, $target) {
var names = $target.jqGrid("getCol", "name2");
if ($.inArray(getdata.name2, names) >= 0) {
// prevent data for dropping
ui.helper.dropped = false;
alert("The row \"" + getdata.name2 + "\" is already in the destination grid");
}
$("#dragHelper").hide();
$("#grid2").jqGrid("setSelection", this.id, true, e);
},
ondrop: function (ev, ui, getdata) {
var selRow = $("#grid2").jqGrid("getGridParam", "selrow"),
$tr = $("#" + $.jgrid.jqID(selRow));
if ($tr.length > 0) {
$("#grid2").jqGrid("setSelection", $("#grid2")[0].rows[$tr[0].rowIndex + 1].id, true);
}
}
});
// make every row of the destination grid droppable and select row on over
$("#grid2 tr.jqgrow").droppable({
hoverClass: "ui-state-hover",
over: function (e, ui) {
$("#grid2").jqGrid("setSelection", this.id, true, e);
$("#dragHelper").show().position({my: "right center", at: "left bottom", of: $(this)});
}
});
I reserve some place for the tooltip "Drag here ↣" on the left of the grid and marked the row under the moved row additionally to make the position of the dropped row mostly clear. I used free jqGrid which have support of "afterSelected" and "beforeSelected" position of addRowData originally suggested in the answer. So I used droppos: "afterSelected". The dropped rows will be inserted after the selected row.
function linkFormatter(row, cell, value, columnDef, dataContext) {
var cell = "";
cell += '<input type="checkbox" id="cb' + dataContext['id'] + '" name="cb' + dataContext['id'] + '" value="' + dataContext['id'] + '" ' + (dataContext['Reviewer'] == 'Unassigned' ? 'class="unassignedLoan"' : "") + '> ';
cell += '' + value + '';
return cell;
};
I have this formatter function with a dataView. The checkbox the formatter creates gets reset when the user scrolls that row out of view and clicks on a different cell. I think the virtual scrolling is re rendering that cell with the formatter so it loses the values of the checkbox. Does anyone have a suggestion to get around this problem?
Thanks
On scrolling or sorting, the grid DOM is created again. So the initial values get reset.
You have to save the values (e.g. id's of the checkboxes checked) in an array and set it again on scroll and sort event.
Do it like this...
grid.onScroll.subscribe(function(e) {
grid.invalidate();
grid.render();
var $canvas = $(grid.getCanvasNode()), $allRows = $canvas
.find('.slick-row');
$($allRows).each(function() {
if(this row's checkbox is in selectedRowId){
set checkbox property to checked;
}
});
});
grid.onSort.subscribe(function(e) {
grid.invalidate();
grid.render();
var $canvas = $(grid.getCanvasNode()), $allRows = $canvas
.find('.slick-row');
$($allRows).each(function() {
if(this row's checkbox is in selectedRowId){
set checkbox property to checked;
}
});
});
my question refers to http://goo.gl/f0Boc
The code works fine for me, but now I want to enable/disable the "Edit-Button" when the value in a cell is "Yes" or "No".
In this example is written:
// you can use getCell or getRowData to examine the contain of
// the selected row to decide whether the row is editable or not
I need an explanation how I could change the code so that the code runs with jqGrid('getCell',rowid,'cellContent')?
What I need is if cellContent is "Yes" then disable "Edit-Button".
Thanks in advance for your efforts,
best regards
Stephan
<script type="text/javascript">
$(function(){
$("#list").jqGrid({
url:'example.php',
datatype: 'xml',
mtype: 'GET',
colNames:['User ID','Name', 'Firstname','CDS-ID','E-mail','Password', 'Registration
Date','Account Activated', 'Account Activation Date', 'Role'],
colModel :[
{name:'idUser_registration', index:'idUser_registration', width:55,
editable:true, editoptions{readonly:true},search:true},
...
{name:'account_activated', index:'account_activated', width:150, align:'right',
edittype:'checkbox',editoptions: { value:"Yes:No" }, editable:true,
search:true},
... ],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'idUser_registration',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'My grid',
editurl: 'example2.php',
beforeSelectRow: function(rowid) {
var selRowId = $(this).getGridParam('selrow'),
celValue = $(this).getCell('getCell', selRowId, 'list_account_activated'),
tr = $("#"+rowid);
// you can use getCell or getRowData to examine the contain of
// the selected row to decide whether the row is editable or not
if (selRowId !== rowid && !tr.hasClass('not-editable-row')) {
// eneble the "Edit" button in the navigator
$("#edit_" + this.id).removeClass('ui-state-disabled');
$("#del_" + this.id).removeClass('ui-state-disabled');
}
else {
// unselect previous selected row
// disable the "Edit" and "Del" button in the navigator
$("#edit_" + this.id).addClass('ui-state-disabled');
$("#del_" + this.id).addClass('ui-state-disabled');
}
return true; // allow selection or unselection
},
loadComplete: function() {
// just one example how to mark some rows as non-editable is to add
// some class like 'not-editable-row' which we test in beforeSelectRow
$("tr.jqgrow:even",this).addClass('not-editable-row');
}
}).jqGrid('navGrid','#pager',
{}, //options
{closeAfterEdit:true,mtype:'GET',editCaption: "Activate
Account",height:400,reloadAfterSubmit:true },
{reloadAfterSubmit:false}, // del options
{} // search options
);
$("#edit_").click(function() {
var gr = jQuery("#list").jqGrid('getGridParam','selrow');
if( gr != null ) jQuery("#list").jqGrid('editGridRow',gr,{});
});
$("#del_").click(function(){
var gr = jQuery("#list").jqGrid('getGridParam','selrow');
if( gr != null ) jQuery("#list").jqGrid('delGridRow',gr,{mtype:'GET',reloadAfterSubmit:true});
});
});
</script>
I modified the referenced demo for you. The main part of the code is the following
onSelectRow: function (rowid) {
var thisId = $.jgrid.jqID(this.id),
isCompleted = $(this).jqGrid("getCell", rowid, "isCompleted");
// you can use getCell or getRowData to examine the contain of
// the selected row to decide whether the row is editable or not
if (isCompleted !== "Yes") {
// eneble the "Edit" button in the navigator
$("#edit_" + thisId).removeClass('ui-state-disabled');
$("#del_" + thisId).removeClass('ui-state-disabled');
} else {
// unselect previous selected row
// disable the "Edit" and "Del" button in the navigator
$("#edit_" + thisId).addClass('ui-state-disabled');
$("#del_" + thisId).addClass('ui-state-disabled');
}
}
You can see new demo here.
I have read some post but I'm still can't follow due to i'm new in jqgrid.
I have a jqgrid which have 5 columns, but 1 column is empty for the beginning.
After do some update it would be filled.
I want JQgrid change the font color for this row, so if it is filled this row will be change the font color to blue.
jQuery("#list").jqGrid({
....
colModel :[
{name:'prob_id', index:'prob_id', hidden:true, width:10},
{name:'Model',index:'Model',width:100,editable:true,search:true,stype:'text',searchoption:{sopt:['cn']}},
{name:'Serial', index:'Serial',width:80,editable:true,search:true,stype:'text',searchoptions:{sopt:['cn']}},
{name:'Lotno', index:'Lotno', width:50, editable:true,
search:true,
stype:'text',
searchoption:{sopt:['cn']}},
{name:'Detail', index:'Detail', hidden:true,width:70,formatter:myformat}
],
....
function myformat ( cellvalue, options, rowObject )
{
if (!empty(cellvalue)){
return '<font color="blue">' + cellvalue + '</font>';//or use classes
} else{
return '<font color="black">' + cellvalue + '</font>';//or use classes
}
}
I would like to change the font color for all rows that have a value for the Detail Field
but I get an error:
empty is not defined
UPDATE
try this way :
I'm decided to move the condition to :
function myformat ( cellvalue, options, rowObject )
{
if (cellvalue == "closed"){
return '<font color="blue">' + cellvalue + '</font>';//or use classes
} else{
return '<font color="black">' + cellvalue + '</font>';//or use classes
}
}
and it works, but it seems just one column which turn to blue, I want entire row which have condition CLOSED.
Try afterInsertRow and setRowData like in the code given below
afterInsertRow: function(rowid, rowData, rowelem) {
var detail= rowData['Detail'];
if(detail=="Closed"){
$(this).jqGrid('setRowData', rowid, false, { color: '#000' });
}else {
$(this).jqGrid('setRowData', rowid, false, { color: '#FF0000' });
}
},
Remove gridView:true (afterInsertRow wont work if gridView is true)