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.
}
...
..
});
Related
editable:true,edittype: "select",
editoptions: {
dataUrl : '/test.do?cd=abc',
cacheUrlData: true,
buildSelect : function(data) {
var data = ($.parseJSON(data)).list;
var s='<select>';
for(d of data){
s += '<option value=' + d.comCd + '>' + d.comNm + '</option>';
}
s += '</select>';
return s;
},
},
When I checked the data after saving,
it contained d.comNm, which is text, not d.comCd, which is the value of the option.
var gridData = grid.jqGrid('getRowData');
console.log(gridData);
It is jqgrid 5.2.1 version, and it is an old project using java 1.7.
Can someone please help me?
Expected this
Result
I have no problem with it appearing on the grid.
The biggest problem is that the value is not stored in the data (getRowData).
As far as understand you want to display in grid the value, but when inline edit if on, you display select with value=> text on it, but when saved to save and display the value.
To do this the trick is to define custom formatter only, which return the cellvalue. For that field in colModel do
colModel : [
....
{
name: 'name1',
editable:true,
edittype: "select",
editoptions : {...},
formatter : function(cellval) {
return cellval;
}
}
...
]
Is there any way to notify user that were nothing found by his search query? Something like in JIRA comboboxes. >
http://i.stack.imgur.com/rKsGa.png
There is nothing integrated, but you can easily build this yourself.
See this jsFiddle for a demo.
Basically, what's happening is:
Return from your server. if there wasn't something found, a dummy entry with a special id.
Register the Select-Event on the ComboBox.
In the event, check to see if the selected item has your special id, and if yes, cancel the event with e.preventDefault()
Code:
$('input').kendoComboBox({
dataTextField: 'text',
dataValueField: 'id',
dataSource: {
transport: {
read: function(options) {
//instead, specify ajax call!
options.success([{ id: -1, text: 'No Matches...' }]);
}
}
},
placeholder: "Select...",
select: function(e) {
var dataItem = this.dataItem(e.item.index());
if(dataItem.id === -1) {
e.preventDefault();
}
}
});
I have jqGrid table with many columns. Searching in grid is made using filter toolbar. For most of them search is just simple default operator. For one datetime column I want different kind of operators and datepicker selector.
I have added dataInit datepicker initialization to searchoptions, necessary operators to searchoptions.sopt. To show this operators I have set searchOperators to true. So for this column all is ok. I have datepicker with operator selector popup. But for all other columns default operator icon is shown on the left of it. It is annoying as operator is default and user couldn't change it. So is there is some possibility to hide them using jqGrid API? As far as I could see I could hide this only using my custom code:
I need to check my column model and after rendering of grid (may be in loadComplete) for all columns that have empty sopt or sopt.length == 0 to remove operator selector. Or add CSS class that hide it. Not sure which of these solution is better (hide or remove) because removing could broke some logic, and hiding could affect width calculation. Here is sample of what I mean on fiddle
function fixSearchOperators()
{
var columns = jQuery("#grid").jqGrid ('getGridParam', 'colModel');
var gridContainer = $("#grid").parents(".ui-jqgrid");
var filterToolbar = $("tr.ui-search-toolbar", gridContainer);
filterToolbar.find("th").each(function()
{
var index = $(this).index();
if(!(columns[index].searchoptions &&
columns[index].searchoptions.sopt &&
columns[index].searchoptions.sopt.length>1))
{
$(this).find(".ui-search-oper").hide();
}
});
}
Does anybody have some better ideas?
I find the idea to define visibility of searching operations in every column very good idea. +1 from me.
I would only suggest you to change a little the criteria for choosing which columns of searching toolbar will get the searching operations. It seems to me more native to include some new property inside of searchoptions. So that you can write something like
searchoptions: {
searchOperators: true,
sopt: ["gt", "eq"],
dataInit: function(elem) {
$(elem).datepicker();
}
}
I think that some columns, like the columns with stype: "select", could still need to have sopt (at least sopt: ["eq"]), but one don't want to see search operators for such columns. Specifying of visibility of searching operations on the column level would be very practical in such cases.
The modified fiddle demo you can find here. I included in the demo CSS from the fix (see the answer and the corresponding bug report). The full code is below
var dataArr = [
{id:1, name: 'steven', surname: "sanderson", startdate:'06/30/2013'},
{id:2, name: "valery", surname: "vitko", startdate: '07/27/2013'},
{id:3, name: "John", surname: "Smith", startdate: '12/30/2012'}];
function fixSearchOperators() {
var $grid = $("#grid"),
columns = $grid.jqGrid ('getGridParam', 'colModel'),
filterToolbar = $($grid[0].grid.hDiv).find("tr.ui-search-toolbar");
filterToolbar.find("th").each(function(index) {
var $searchOper = $(this).find(".ui-search-oper");
if (!(columns[index].searchoptions && columns[index].searchoptions.searchOperators)) {
$searchOper.hide();
}
});
}
$("#grid").jqGrid({
data: dataArr,
datatype: "local",
gridview: true,
height: 'auto',
hoverrows: false,
colModel: [
{ name: 'id', width: 60, sorttype: "int"},
{ name: 'name', width: 70},
{ name: 'surname', width: 100},
{ name: 'startdate', sorttype: "date", width: 90,
searchoptions: {
searchOperators: true,
sopt: ['gt', 'eq'],
dataInit: function(elem) {
$(elem).datepicker();
}
},
formatoptions: {
srcformat:'m/d/Y',
newformat:'m/d/Y'
}
}
]
});
$("#grid").jqGrid('filterToolbar', {
searchOnEnter: false,
ignoreCase: true,
searchOperators: true
});
fixSearchOperators();
It displays the same result like youth:
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 was trying to enable navigation based on a selected row. So, the user select a row from jQgrid, and when press the show (is there a show button for the grid, I saw edit, add etc), it needs to go to a new page based on the url (part of the row).
$(document).ready(function () {
function getLink() {
// var rowid = $("#customer_list").jqGrid('getGridParam', 'selrow');
var rowid = $("#customer_list").getGridParam('selrow');
var MyCellData = $("#customer_list").jqGrid('getCell', rowid, 'dataUrl');
return MyCellData;
}
$("#customer_list").jqGrid({
url:'mytestList',
editurl:'jq_edit_test',
datatype: "json",
colNames:['Call Id','Title','dataUrl'],
colModel:[
{name:'callId', width:80, search:false},
{name:'title', width:200, sortable:false},
{name:'dataUrl',hidden:true}
],
rowNum:10,
sortname:'lastUpdated',
sortorder: 'desc',
pager:'#customer_list_pager',
viewrecords: true,
gridview: true
}).navGrid('#customer_list_pager',
{add:true,edit:true,del:false,search:true,refresh:true},
{closeAfterEdit:true, afterSubmit:afterSubmitEvent}, // edit options
{addCaption:'Create New something', afterSubmit:afterSubmitEvent,
savekey:[true,13]}, // add options
{afterSubmit:afterSubmitEvent} // delete options
);
$("#customer_list").jqGrid('filterToolbar');
});
so, the url is passed for each row as dataUrl. I'm trying to read it and set to the button. When debug through firebug, the rowid was 223 (there were only 12 rows in the grid), and the cell value is empty. Currently the button is kept outside the grid, but it may better to be it part of the vavGrid
thanks.
The code like following could solve your problem
$("#customer_list").jqGrid ('navButtonAdd', '#customer_list_pager',
{ caption: ""/*"Show"*/, buttonicon: "ui-icon-extlink", title: "Show Link",
onClickButton: function() {
var grid = $("#customer_list");
var rowid = grid.jqGrid('getGridParam', 'selrow');
window.location = grid.jqGrid('getCell', rowid, 'dataUrl');
}
});
You could just make the show button be part of each row in the grid and use a custom formatter to turn it into a URL.
Based on the example in the wiki, you'll probably need something along the lines of
function myformatter ( cellvalue, options, rowObject )
{
return "Show";
}