for a treegrid i want to enable the add button only if a record is selected. if that is not possible on clicking the add button i would like to see if the rowid selected is not null.
Any ideas i tried the beforeshowform i could not figure out how to skip adding the form.
beforeShowForm: function(formid) {
var rowid = jQuery("#treegrid").getGridParam('selrow');
if(rowid == null ) {
return[false,"Please select a row."];
} else {
return[true,""];
}
}
Please help!
In the old answer I created the demo. In the demo I made the first row 'not-editable-row' so the "Add" and "Edit" buttons from the navigation bar will be disabled on the row selection. If one selects the second row the "Add" and "Edit" buttons will be enabled. If one unselect the row, so no rows are selected the "Add" and "Edit" buttons will be disabled one more time.
You can use the same idea in case of the treegrid.
Related
Using this I can display a menu by right clicking a cell:
// right click context menu
grid.onContextMenu.subscribe(function (e) {
e.preventDefault();
var cell = grid.getCellFromEvent(e);
//grid.setSelectedRows(cell.row);
$("#contextMenu")
.data("row", cell.row)
.css("top", e.pageY)
.css("left", e.pageX)
.show();
$("body").one("click", function () {
$("#contextMenu").hide();
});
});
However I would like the row to be selected, both as visual confirmation that the correct row has been right-clicked, and because some of the menu items use the selected row for their functions.
This:
grid.setSelectedRows(cell.row);
doesn't work. What is the correct way?
It might be as simple as the fact that setSelectedRows takes an array of row indexes.
Try
grid.setSelectedRows([cell.row]);
I've got a Kendo grid with detail template. When I open the detail template, I want the respective row to be selected. By default, the detail expands but the row isn't selected.
.Events(e => e.Change("onChange").DetailExpand("jsFunction"))
I know there's a DetailExpand event that fires when the detail is expanded, I just don't know how to make it select the row to which it refers. I have tried:
function jsFunction() {
this.dataItem(this.select()); <--- breaks here because there's no row selected
}
How can I make it select the row?
Nothing is easier:
function jsFunction(e) {
e.sender.select(e.masterRow);
}
Grettings.
I'm using ng-grid in which checkboxes are enabled.
showSelectionCheckbox: true
Below is plunker created for the same
http://plnkr.co/edit/rtkDYvDygRn38VU9Cmsk?p=preview
In this plunker, click on select all checkbox present in header.
Then click on the button below which will refresh the table content.
After clicking on the button, you can see that data got refreshed, but select all checkbox present in header is still selected.
How to uncheck that checkbox?
You should try this. It worked for me.
var allChecked = $("input.ngSelectionHeader:checkbox").prop('checked');
if (allChecked) {
$("input.ngSelectionHeader:checkbox").click();
}
else {
$scope.gridOptions.selectAll(false);
}
I am trying to bring up a fancybox widget using a custom button in jqgrid. To do this, I would need to grab the Id of the selected row. I am currently trying this to do it. And it is not working. The custom button shows, it responds to the click event, but I cannot get the selected id. Can anyone help me out? Thanks!!!
jQuery("#list").jqGrid('navGrid','#pagernav',
{edit:true,add:false,del:false,search:false},
{
height:280,
reloadAfterSubmit:true,
closeAfterEdit:true,
editCaption: "Edit Sample",
bSubmit: "Submit",
bCancel: "Cancel",
bClose: "Close",
checkOnSubmit:true,
saveData: "Data has been changed! Save changes?",
bYes : "Yes",
bNo : "No",
bExit : "Cancel"
}
).jqGrid('navButtonAdd','#pagernav',{
caption:"Add",
buttonicon:"ui-icon-add",
onClickButton: function(lastsel){
alert("Adding Row to id" + lastsel);
},
position:"last"
});
Look the answer. It shows how to get 'selrow' parameter of jqGrid which you need. In case of multiselect scenario (multiselect: true) you should use 'selarrrow' parameter instead.
The only parameter of navButtonAdd is the event object from the click event (see jqGrid code). Because the click is on your custom button it bring you very little information. You can use the event only for example to implement different actions if the button was clicked in combination with Ctrl or Shift or some other keys pressed. In all standard scenarios you have to use 'selrow' or 'selarrrow' parameters.
You should be careful, because the custom button can be clicked even if no rows are selected. In the case the value of 'selrow' parameter is null (the value of 'selarrrow' is empty array []).
You can consider to implement hide/show or enable/disable some navigator buttons based on whether or which row is selected. See this and this demos from this and this old answers.
I have a column field type having values (editable, readonly). all the rows will have one of these values populated.
I want to enable/disable toolbaroption edit only if column value is editable for selected row.
how can i achieve that in jqgrid.
If I understand you correct you want to enable/disable "Edit" or "Delete" buttons of the navigator based of the selected row. So that you will have
if no rows is selected or the selected row is non-editable or the standard navigator toolbar
if the row is editable.
The criteria whether the column "editable" or "readonly" seems me wrong because it is criteria column on the column and not on the row, but you can implement easy your own custom criteria.
The implementation could be
var myGrid = jQuery("#list");
myGrid.jqGrid({
/* definition of jqGrid */
beforeSelectRow: function(rowid) {
var selRowId = $(this).getGridParam('selrow'),
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');
// disable "Edit" and "Delete" button at the beginning
$("#edit_" + myGrid[0].id).addClass('ui-state-disabled');
$("#del_" + myGrid[0].id).addClass('ui-state-disabled');
To enable/disable the "Edit" and "Del" buttons we add/remove the 'ui-state-disabled' class on the buttons of the navigator toolbar. In the code above I mark all rows with even numbers as "non-editable". In your case you can use any other criteria which has more sense.
You can see the demo live here.