How do I set the delete button in just a few lines?
My list is returned by json and some records do not need the delete button.
How do I remove it from PHP?
Thks.
EDITED
I SOLVED
loadComplete: function () {
var rowIds = jQuery(grid_selector).jqGrid('getDataIDs');
for (i = 0; i <= rowIds.length; i++) {//iterate over each row
rowData = jQuery(grid_selector).jqGrid('getRowData', rowIds[i]);
if (rowData['id'] == true) {
$("#jDeleteButton_"+rowIds[i]).hide();
}
}
}
You can use free jqGrid, it's the fork of jqGrid, which I develop. I supports isDisplayButtons callback of formatter: "actions", which you can use to inform jqGrid about the rows, which can be deleted. See the demo created for the answer.
Related
I have a grid setup using form editing. I want the the user to be able to edit only some of the rows. As a start, I figured the easiest way to do this was to have a column (probably hidden) in my server query and XML that denotes the Access or Role the user has. So essentially the grid now has a column "Access Role" with 'Y' or 'N' for each row. (where Y = user can edit, N = View/readonly)
I've tried a couple things to implement this. The best I've come up with is using the rowattr function, but my use is flawed since it hides the row in the grid (I don't want it hidden, just readonly):
function (rd) {
console.log('Row = '+rd.WWBPITM_SURROGATE_ID);
if (rd.ACCROLE === "N") {
console.log('RowAttr '+rd.ACCROLE);
return {"style": "display:none"};
}
This might be a start, but I'm not sure where to go from here and I'm not sure if I'm barking up the wrong tree with using rowattr.
I also tried using setCell in a loadComplete function, like this:
function GridComplete() {
var grid = $('#list1');
var rowids = grid.getDataIDs();
var columnModels = grid.getGridParam().colModel;
console.log('Check ACCROLE');
// check each visible row
for (var i = 0; i < rowids.length; i++) {
var rowid = rowids[i];
var data = grid.getRowData(rowid);
console.log('ACCROLE for '+rowid+' is '+data.ACCROLE);
if (data.ACCROLE == 'N') { // view only
// check each column
//console.log(data);
for (var j = 0; j < columnModels.length; j++) {
var model = columnModels[j];
if (model.editable) {
console.log('Is Editable? '+model.editable);
//grid.setCell(rowid, model.name, '', 'not-editable-cell', {editable: false, edithidden: true});
grid.setCell(rowid, model.name, '', 'not-editable-cell', {editoptions: { readonly: 'readonly', disabled: 'disabled' }});
}
}
}
}
}
But the editoptions don't seem to do anything with this.
Any ideas how to do this?
OK thanks for explaining about Form editing. Here's an example of how to prevent edits on certain records for jqGrid with form editing:
Start with this example of jqGrid form edit: http://www.ok-soft-gmbh.com/jqGrid/MulticolumnEdit.htm
Use the beforeInitData event to check your data before the edit form is displayed. Note that this is bound to the pager object.
Use getGridParam and getCell methods to get the current value you want. In my example I grabbed the client name
Add your own business logic for checking (I don't allow edits on 'test2')
Return false to prevent the edit form from popping up.
This example only handles edit, not insert or delete.
Replace $grid.jqGrid("navGrid", "#pager",...) from the example with this:
$grid.jqGrid("navGrid", "#pager", {view: true},
// Events for edit
{
beforeInitData: function (formid) {
var selectedRow = jQuery("#list").jqGrid('getGridParam','selrow'); //get selected rows
var selectedClient = $("#list").jqGrid('getCell', selectedRow, 'name');
if(selectedClient == 'test2')
{
alert('You are not allowed to edit records for client "' + selectedClient + '"');
return false;
}
}
},
// Events for add
{
beforeShowForm: function (formid) {
}
}
);
You didn't provide much information about how you're updating rows (there are various methods as described in JQGrid web page demos, but I took a guess as to a possible solution. I started with the example on the bottom of this page (trirand's web site wiki for inline_editing) http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing and made a few changes.
Added a new data column securityGroup, and put in data like 'A', 'B', 'C'
Displayed the new data column in the grid
The example used the onSelectRow event to start editing a row if you clicked on a new row. I updated this callback to check the value of row['securityGroup'], and only start .editRow if it's in securityGroupA
JSFiddle at http://jsfiddle.net/brianwoelfel/52rrunar/
Here's the callback:
onSelectRow: function(id){
var row = $(this).getLocalRow(id);
if(id && id!==lastsel2){
jQuery('#rowed5').restoreRow(lastsel2);
if(row['securityGroup'] == 'A') {
jQuery('#rowed5').editRow(id,true);
}
lastsel2=id;
}
},
If this method won't work for you, please provide more information about how you're currently doing edits with jqGrid. This example obviously is very trivial and doesn't even post to PHP or mysql or anything.
In case it will be helpful for others, here is how I am implementing Read Only rows in Form Editing mode, based on a column which designates what level of access the user has to each row:
In editoptions, use the beforeShowForm event, like so:
beforeShowForm: function (formid) {
console.log('Checking for READONLY '+formid.name);
var selectedRow = jQuery("#list1").jqGrid('getGridParam','selrow'); //get selected rows
var selRole = $("#list1").jqGrid('getCell', selectedRow, 'ACCROLE');
if(selRole == 'N' || selRole == 'S' || selRole == 'R')
{
//$("<div>Sorry, you do not have access to edit this record.</div>").dialog({title: "Access Denied"});
formid.find("input,select,textarea")
.prop("readonly", "readonly")
.addClass("ui-state-disabled")
.closest(".DataTD")
.prev(".CaptionTD")
.prop("disabled", true)
.addClass("ui-state-disabled");
formid.parent().find('#sData').hide();
var title=$(".ui-jqdialog-title","#edithd"+"list1").html();
title+=' - READONLY VIEW';
$(".ui-jqdialog-title","#edithd"+"list1").html(title);
formid.prepend('<span style="color: Red; font-size: 1em; font-weight: bold;">You viewing READONLY data.</span>');
}
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.
I am new to jqGrid, and having trouble with achieving a couple of tasks. Any guidance will be a huge help.
I need to have dynamically populated drop down list.
$("#HEALTH_PLAN_CATEGORY_VALUE_ID").change(function () { $.getJSON('/Ajax/GetCountyForHealthPlan', { id: $(this).val() }, function (counties) { var ddlSelectedCounty = $("#COUNTY_GSA_LOOKUP_ID");
// clear all previous options $("#COUNTY_GSA_LOOKUP_ID > option").remove();
// populate the products for (i = 0; i < counties.length; i++) {
ddlSelectedCounty.append($("<option />").val(counties[i].Value).text(counties[i].Text)); }
});
});
Thanks a lot.
If you need to fill options in the select list of edit form for some column dynamically you should use dataUrl to get the data from the server and buildSelect to convert the server response to <select><option value='val'>Text</option>...</select>. See "UPDATED" part of the answer for an example.
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.