I have a jqgrid in which i have a column of buttons. I want to delete row from this button. My question is i want to make confirm message pop up when i click on the button. I appreciate if i can customize the dialog box. So how i can do this?
I have tried bootstrap pop up and query but i think i did something wrong.
So is there any way to make pop up in JQgrid?
This is my column.
{
name: "action",
align: "center",
sortable: false,
title: false,
fixed: true,
search: false,
formatter: function (cellvalue, options, rowObject) {
var links = "<a title='' href='/Admin/Workflow/Delete?id=" + rowObject.templateId + "'>" + "Delete" + "</a>";
return links;
}
}
Related
I have a grid and I'm using PHP and JSON. I'm using ondblClickRow to do inline editing. The thing that I need is: when I double click in a field, I want the content of this field will be select. I'm sorry to ask about this, but I didn't find this... when I search it on Google I just find examples of select row and this issues.
I recommend you to look this answer and another one. Probably modification of the code from the last answer to the web browser which you use will get your the solution of your problem.
If you want a single cell to be focused after inline edit mode is enabled, try this:
ondblClickRow: function (rowId, rowIndex, columnIndex) {
var grid = $('#mygrid');
grid.editRow(rowId, true, function() {
var colModel = grid.getGridParam('colMode');
var colName = colModel[colIndex].name;
var input = $('#' + rowId + '_' + colName);
input.get(0).focus();
});
}
}
Found the code here:
http://www.trirand.com/blog/?page_id=393/help/setting-focus-on-a-cell-after-entering-edit-mode/
If you have specific columns in a grid when you click on it should select its contents, then in your colmodel add this code to each column:
{
name: 'TEXT_BOX',
index: 'TEXT_BOX',
label: 'Notes',
width: 100,
align: 'left',
sortable: false,
hidden: false,
dataEvents: [ { type: 'click', data: { i: 7 }, fn: function(e) { e.target.select(); } }]
}
dataEvents will select the text in the input field when you click on it.
// Text will get Selected of cell when inline editing
$('#gridTableObj').jqGrid({
....
..
afterEditCell : function(rowid, cellname, value, iRow, iCol){
$('#'+rowid+'_'+cellname).select(); // with this the edited cell value will be selected.
}
...
..
});
Is it possible to have a hyperlink in the edit options of a grid column? The grid displays plain text when it is bound. But when it is in edit/add mode, this text needs to be converted into a hyperlink (which opens a popup). I couldn't find an option to have a hyperlink in the editoptions. I was able to do it as a button but I need a link. Is there a way of doing this? I have the following code -
colModel: [
{ name: 'Person', index: 'PersonName', width: 70, editable: true, edittype: 'button',
editoptions: {
value: 'Select',
dataEvents: [{
type: 'click',
fn: function (elem) {
var left = (screen.width / 2) - (700 / 2);
var top = (screen.height / 2) - (550 / 2);
var popup = window.open("popup.htm", "popup", "resizable=1,copyhistory=0,menubar=0,width=700,height=550,left='+left+',top='+top");
popup.focus();
}
}]
}
},
May be you should check out the custom edittype, in which you need to define your own functions custom_element and custom_value to build your form element.
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#edittype
I have a jqgrid that has main rows and a footer row (with userdata loaded) and then a formatter that alters the data in the cells to be linkable. The cells in the main body can be clicked and the onCellSelect event will capture the click. However, clicking on data in the footer row does not seem to fire off the onCellSelect event. How do I capture a select/click event in the footer row? Below is the script for the jqgrid.
$('#jqgSummaryResults').jqGrid({
datatype: 'json',
mtype: 'GET',
url: 'some action',
postData: { 'criteria': function () {
some function}},
rowNum: 100,
rowList: [],
pager: '#jqgpSummaryResults',
viewrecords: true,
sortorder: 'asc',
sortname: 'DateField',
width: 1250,
height: 350,
shrinkToFit: true,
gridview: true,
footerrow: true,
userDataOnFooter: true,
onCellSelect: function (rowid, iCol, cellcontent, e) {
var selectedDate = rowid;
savedMailDueDateString = rowid;
var selectedColumn = iCol;
...
},
loadComplete: function (data) {
...
},
colNames: ['DateField',
'Total Jobs',
...
'% Not Mailed'],
colModel: [
{ name: 'DateField', index: 'DateField', align: 'left' },
{ name: 'TotalJobs', index: 'TotalJobs', align: 'left', formatter: hyperlinkColumnFormatter },
...
{ name: 'PercentNotMailed', index: 'PercentNotMailed', align: 'left', formatter: hyperlinkColumnFormatter },
]
}).navGrid('#jqgpSummaryResults', {
excel: false,
edit: false,
add: false,
del: false,
search: false,
refresh: false
});
Thanks for the assistance.
While I didn't see any way to have jqGrid respond to select (doesn't even seem that that footer is selectable) or a click. The footer row is specified by a ui-jqgrid-sdiv class. You could attach a click event handler as below.
$('.ui-jqgrid-sdiv').click(function() {alert('Bong')});
Edit: In response to Gill Bates question to add a footer event but only on a single cell the selector would be:
$('.ui-jqgrid-sdiv').find('td[aria-describedby="GridName_ColumnName"]').click(function() { alert("Bong");});
GridName_ColumnName is the format for all the footer td aria-describedby, and you can see the exact name via firebug element inspector (or any of it's equivalents).
jqGrid registers click event on main <table> of the grid, but it calls onCellSelect not always. First of all (see here) it tests some additional conditions and then returns (ignore click event) if the conditions failed. For example if one clicks on grouping headers of the grid the callback onCellSelect will not be processed.
The problem with footer row because it exists outside of the grid. The main <table> element are placed inside of div.ui-jqgrid-bdiv, but the footer is inside of another table which is inside of div.ui-jqgrid-sdiv. One can examine the HTML structure of jqGrid using Developer Tools of Internet Explorer, Google Chrome, Firebug or other. One will see about the following
The main <table> element (<table id="list"> in the picture above and which get the class "ui-jqgrid-btable") and another table element with the footer (which get the class "ui-jqgrid-ftable") are separate.
So the fist answer of Mark on your question was correct. If one has multiple grids on the page one could specify footer of specific grid using
var $grid = $('#jqgSummaryResults'); // one specific grid
.... // here the grid will be created
$grid.closest(".ui-jqgrid-view").find(".ui-jqgrid-sdiv").click(function() {
// do in case of the footer is clicked.
var $td = $(e.target).closest("td"),
iCol = $.jgrid.getCellIndex($td); // or just $td[0].cellIndex,
colModel = $grid.jqGrid("getGridParam", "colModel");
// $td - represents the clicked cell
// iCol - index of column in footer of the clicked cell
// colModel[iCol].name - is the name of column of the clicked cell
});
P.S. In the old answer are described many other elements of the grid. The descriptions are not full, but it could be probably helpful.
Here little implementation of this problem, i'm new in jquery and jqgrid, but i had same problem and thanks two posts above of #Oleg and #Mark, Im implemented something like that:
//Raport1Grid - name of my jqgrid
//endusers, adminusers,decretusers - name of my rows in colModel
//Raport1Grid_endusers - GridName_ColumnName
var endUsers = $("[aria-describedby='Raport1Grid_endusers']").click(function(){
//remove previous style of selection
$('.ui-jqgrid-ftable').find('.selecteClass').removeClass('selecteClass');
//set selection style to cell
$(endUsers).addClass('selecteClass');
});
//Also can get value of selectedCell
var qwer = $("[aria-describedby='Raport1Grid_endusers']").text();
alert(qwer);
Demo here
http://jsfiddle.net/Tobmai/5ju3py83/
I'm having a hard time trying to set the value of a select box in the edit form. For example I have my colModel set up like this.
colModel:[
{name:'communication_id', key: true, index:'communication_id', width:30},
{name:'communication_type_id', index:'communication_type_id', width:30},
{name:'communication_type_select',index:'communication_type_select',hidden:true,width:150, editable:true,edittype:'select',formatter:'select',editrules: {edithidden:true},
formoptions:{label:'Communication Type'},
editoptions:{dataUrl:"working_data_url",
buildSelect: function(json){
var response = $.parseJSON(json);
var s = '<select>';
$.each(response.results,function(i,com){
s += ('<option value="' + com.communication_type_id + '">'+ com.communication_type_desc + '</option>');
});
return s + "</select>";
},dataInit: function(elem){
alert(temp);
//alert($('#com_table_communication_type_id').val());
//$(elem).val($('#com_table_communication_type_id').val());
}}},
{name:'communication_send_dt', index:'communication_send_dt', width:150, sortable:true, sorttype: 'date',
firstsortorder: 'desc', datefmt:'m/d/Y', editable:true},
editoptions: {recreateForm:true},
rowNum:10,
width:'100%',
rowList:[10,20,30],
pager: '#com_pager',
sortname: 'communication_send_dt',
viewrecords: true,
sortorder: "desc",
loadonce:true,
caption: "Communication",
jsonReader: {
repeatitems : false,
root: "results"
},
height: '100%',
onSelectRow: function(communication_id){
var comtype = $(this).getRowData(communication_id);
var temp = comtype['communication_type_id'];
}
});
grid.jqGrid('navGrid','#com_pager',{edit:true,add:false,del:false});
When I click the edit button it loads the select options correctly, but I am having trouble with which one is selected. I want the value from communication_type_id to load into communication_type_select and I have tried different things to get that too happen. Basically if the id in communication_type_id is 2, then I want the select box in the edit form to be set to 2 as well when the edit form loads. Any help on this?
Update 1: I got it mostly working now by using beforeShowForm, but now I am running into a weird thing. When I have an alert in the beforeShowForm everything works, but when its commented out, it does not work! Thanks for your help #Oleg!
grid.jqGrid('navGrid','#com_pager',{edit:true,add:false,del:false},
{closeOnEscape:true, recreateForm:true,beforeShowForm: function(formid){
//alert("com type id = "+comidvar + " response id = "+comrespvar + " com form type id = "+comfrmtypevar);
$("#communication_type_select", formid).attr("value",comidvar);
$("#form_response_select", formid).attr("value",comrespvar);
$("#form_type_select", formid).attr("value", comfrmtypevar);
}},
If I understand you correct you should use ajaxSelectOptions option of jqGrid with data property. You can define some additional option like communication_type_id in the data which value you can returns by the usage of $("#list").jqGrid('getGridParam', 'selrow') and then getCell to get the value from communication_type_id column. See the answer for details.
I am using the jqgrid, and prettyphoto in my application.
I have a column to show the image preview. on clicking that image is the image will be displayed in the popup box.
grid code is..
.....
{name: 'imagePath', index: 'imagePath', width: 80, align: 'center',
formatter :anchorFmatter, edittype: 'text', hidden: false, editable: true,
editrules: {required: false}, editoptions: {size: 30}}
....
function anchorFmatter(cellValue, options, rowObject)
{
if(cellValue === null ){
return "<a></a>";
}else {
jQuery("a[rel='image']").prettyPhoto({
animation_speed:'normal',
show_title:false,
allow_resize:true,
default_width:640,
default_height:385,
theme:'light_rounded',
autoplay:false
});
return "<a href='" + cellValue + "' rel='image'><img src='" + cellValue +
"' width='100' height='35'></a>";
}
}
all images in the grid are coming in popup, but the last image is coming in new browser page.
may get any help.
Thanks in advance
Inside of custom formatter the grid contain exist still as string and not yet placed on the page. So you should remove the calls jQuery("a[rel='image']").prettyPhoto from the formutter function. Instead of that you can call the jQuery("a[rel='image']").prettyPhoto inside of loadComplete event handler. Additionally you should use gridview:true option if you not already use it. It will improve the grid performance.