I want to ask how is it possible to fire a click event from a div element containing into an Easy-ui datagrid?.
I have this jsp file:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>User Page</title>
<link rel="stylesheet" type="text/css" href="resources/css/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="resources/css/themes/icon.css">
<link rel="stylesheet" type="text/css" href="resources/css/maintheme.css">
<link rel="stylesheet" type="text/css" href="resources/css/userPage.css">
<script src="resources/javascript/jquery/jquery-1.11.1.min.js"></script>
<script src="resources/javascript/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div class="datagridLayer">
<table id="usersDataGrid" class="easyui-datagrid" style="display:none;">
<thead>
<tr>
<th data-options="field:'userName', width:80, sortable:true">User</th>
<th data-options="field:'enabled', width:100, sortable:true, formatter:enabledLink">Status</th>
<th data-options="field:'role', width:100, sortable:true">Role</th>
<th data-options="field:'deleteUser', width:80, align:'center', formatter:deleteUserFormatter">Delete user</th>
</tr>
</thead>
</table>
</div>
<script src="resources/javascript/adminPageUsersCtrl.js"></script>
Datagrids configuration is being in adminPageUsersCtrl.js :
dataGrid.datagrid({
url:url,
scrollbarSize:0,
width:"100%",
fitColumns : true,
singleSelect : true,
striped:true,
pagination : true,
total: 2000,
pageSize: 10,
loadFilter: function(data) {
var i = 0;
for (i = 0; i < data.rows.length; i++) {
if (data.rows[i].role === "ROLE_ADMIN") {
data.rows[i].role = "Administrator";
} else {
data.rows[i].role = "User";
}
if (data.rows[i].enabled === "true") {
data.rows[i].enabled = "Enabled";
} else {
data.rows[i].enabled = "Disabled";
}
}
return data;
},
onBeforeLoad : function(data){
},
onLoadSuccess : function(data) {
dataGrid.show();
},
onLoadError : function(result) {
// empty grid
dataGrid.datagrid("loadData", {
patents: {totalElements : 0, content : []}
});
//Remove Refresh button from datagrid pagination
$(".pagination-load").closest("td").remove();
},
// highlight previously selected row
rowStyler : function(rowIndex, row) {
// do stuff here
},
onSelectPage: function(pageNumber, pageSize){
dataGrid.panel("refresh", url + "page="+pageNumber+pageSize);
}
});
//this create the link elements under Status datagrid's column
function enabledLink(value,row, index) {
return "<div class='userStatus' id='userStatusField' name='"+ row.userName + "' onClick>" + value + "</div>";
};
//this display the delete icon under delete user column
function deleteUserFormatter(value,row, index) {
return "<img src='resources/img/delete_user.png' id='deleteUser' />";
};
And I would like to fire an event with the traditional jquery way. When a user clicks on an element under Status column, to get the event like this: $("#userStatusField").click(function() { ...
But it is not possible, what's wrong?
There is an issue with in your formatter function:
function enabledLink(value,row, index) {
return "<div class='userStatus' id='userStatusField' name='"+ row.userName + "'>" + value + "</div>";
};
The thing here is that there is a div created for every row with the same id. This is against the html rules for id uniqueness. You can use instead the class attribute
So my suggestion is that you create like this:
function enabledLink(value,row, index) {
return "<div class='userStatus' dataLinkIndex='" + index + "' class='userStatusField' name='"+ row.userName + "'>" + value + "</div>";
};
The dataLinkIndex attribute is a custom attribute that we can later use to retrieve the clicked row.
Then add a jquery event in this way because the row elements are added dynamically to dom:
$(document).on( 'click', '.userStatusField', function(){
//bellow are some tips for manipulating the clicked row
var dataIndex = $(this).attr('dataLinkIndex');
var rows = $('#usersDataGrid').datagrid('getRows');
var rowClicked = rows[dataIndex];
});
Related
<!DOCTYPE html>
<html>
<head>
<script src='jquery-1.11.2.js' type="text/javascript"></script>
<div id='divn'></div>
<script>
function createDomControls(id,appendToId)
{ this.id=id;
this.appendToId=appendToId;
this.divTag=function(divId,className,style,appendToId)
{
//var divId = "div" + Math.floor((Math.random() * 100000) + 1);
$('<div/>', {
id: divId,
style: style,
class:className
}).appendTo('#' + appendToId);
}
this.buttonTag=function(type,id,value,appendToId)
{
$('<input/>',{
type:type,
id:id,
value:value,
onclick:onclick function(){
$('#div1').hide();
}
});
}
}
var domControls=new createDomControls('divm','divn');
var div=domControls.divTag('div1','cls','background:pink;width:500px;height:670px;padding:12px;margin:0px;','divn');
var btn=domControls.buttonTag('button','btn1','+','div1');
</script>
</head>
With jQuery delivered by Google CDN and DataTables delivered by Microsoft CDN I have the following page, where 3 checkboxes allow toggling good, bad, neutral comments about some user (here fullscreen):
My problem is:
With DataTables 1.9.2 this works well: here jsFiddle
With DataTables 1.9.4 this does not work: here jsFiddle and a copy of my simple test case is at the bottom of this question.
The problematic code is probably here:
$.fn.dataTableExt.afnFiltering.push(
function(oSettings, aData, iDataIndex) {
if ('comments_table' == oSettings.nTable.id) {
//console.dir(oSettings);
console.dir(aData);
var nice = aData[3];
if (nice == true)
return $('#good_box').is(':checked');
if (nice == false)
return $('#bad_box').is(':checked');
return $('#neutral_box').is(':checked');
}
return true;
}
);
The console.dir(aData); prints for dataTables 1.9.2 a 4-elements array and I can grab its last element (shown by the red arrow in the above screenshot).
But for DataTables 1.9.4 it only prints a 1-element array for some reason. Why?
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables_themeroller.css">
<link type="text/css" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<style type="text/css">
a img.good {
border: 3px solid #009900;
}
a img.bad {
border: 3px solid #FF3333;
}
a img.neutral {
border: 3px solid #9999FF;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script type="text/javascript">
var ME = "http://gravatar.com/avatar/55b3816622d935e50098bb44c17663bc.png";
$(function() {
$.fn.dataTableExt.afnFiltering.push(
function(oSettings, aData, iDataIndex) {
if ('comments_table' == oSettings.nTable.id) {
//console.dir(oSettings);
console.dir(aData);
var nice = aData[3];
if (nice == true)
return $('#good_box').is(':checked');
if (nice == false)
return $('#bad_box').is(':checked');
return $('#neutral_box').is(':checked');
}
return true;
}
);
$('#good_box,#bad_box,#neutral_box').click(function() {
commentsTable.fnDraw();
});
var commentsTable = $('#comments_table').dataTable({
bJQueryUI: true,
sPaginationType: 'full_numbers',
bProcessing: true,
bDeferRender: true,
aaData: [
{"day":"17.02.2014","about":"A neutral comment about this user","nice":null,"female":false,"author":"OK250354887500","rep_id":960962,"avatar":ME},{"day":"30.11.2013","about":"A positive comment about this user","nice":true,"female":false,"author":"DE10859","avatar":ME},{"day":"23.11.2013","about":"A positive comment about this user","nice":true,"female":false,"author":"OK100836631753","avatar":ME},{"day":"01.04.2013","about":"A positive comment about this user","nice":true,"female":false,"author":"DE8547","avatar":ME},{"day":"29.03.2013","about":"A NEGATIVE comment about this user","nice":false,"female":false,"author":"OK462728443459","rep_id":734122,"avatar":ME},{"day":"26.03.2013","about":"A positive comment about this user","nice":true,"female":true,"author":"DE10472","avatar":ME},{"day":"24.03.2013","about":"A positive comment about this user","nice":true,"female":true,"author":"DE9454","avatar":ME},{"day":"22.03.2013","about":"A NEGATIVE comment about this user","nice":false,"female":false,"author":"DE6294","rep_id":727815,"avatar":ME},{"day":"04.02.2013","about":"A neutral comment about this user","nice":null,"female":false,"author":"VK119456690","rep_id":683816,"avatar":ME}
],
fnInitComplete: function () { this.fnAdjustColumnSizing(); },
aaSorting: [[0, 'desc']],
aoColumns: [
/* 0: day */ { mDataProp: 'day', bSearchable: false, bSortable: true, bVisible: true },
/* 1: about */ { mDataProp: 'about', bSearchable: true, bSortable: false, fnRender: renderAbout },
/* 2: avatar */ { mDataProp: 'avatar', bSearchable: false, bSortable: false, fnRender: renderAvatar },
/* 4: nice */ { mDataProp: 'nice', bSearchable: false, bSortable: false, bVisible: false }
]
});
});
function renderAbout(obj) {
var about = obj.aData['about'];
var rep_id = obj.aData['rep_id'];
if (rep_id) {
return '<i>«' + about + '»</i> delete';
}
return '<i>«' + about + '»</i>';
}
function renderAvatar(obj) {
var avatar = obj.aData['avatar'];
var author = obj.aData['author'];
var nice = obj.aData['nice'];
if (author) {
var cls = 'neutral';
if (nice == true)
cls = 'good';
else if (nice == false)
cls = 'bad';
return '<img class="' + cls + '" height="45" src="' + avatar + '">';
}
return '<img height="45" src="' + avatar + '">';
}
</script>
</head>
<body>
<p>Show:
<label><input type="checkbox" id="good_box" checked>good</label>
<label><input type="checkbox" id="bad_box" checked>bad</label>
<label><input type="checkbox" id="neutral_box" checked>neutral</label>
comments:</p>
<table id="comments_table">
<thead>
<tr>
<th>Date</th>
<th>Comment</th>
<th>Author</th>
<th>Rating</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
I have posted this question at the DataTables forum as well.
The workaround for now is to make the 4th (nice) column searchable too and use the code
var nice = aData[1];
Here is the jsFiddle, which works with 1.9.4
hey hi everyone i am try to insert new record using kendo grid.
it's work fine.
but i want to set hide and show.
when its new then hide second column.
only on this row not other all.
here is my code:-
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<script>
$(document).ready(function () {
var users = [{ UserId: 1, UserName: "Robin", IsAdmin: true }
, { UserId: 2, UserName: "Hood", IsAdmin: false }];
var t = $("#grid").kendoGrid({
dataSource: { data: users, pageSize: 10 }// binding data
,pageable: true
, selectable: "multiple row"
, toolbar: ["create"]
, columns: [
{ field: "UserId" }
, { field: "UserName"},
{ command: "destroy", title: " ", width: "100px" }
],
editable: true,
edit: function(e)
{
if(e.model.isNew())
{
$("td:nth-child(2)").css("display","none");
}
}
});
});
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<input type="button" value="Iterate" onclick="iterate()"/>
<div id="grid"></div>
</body>
</html>
please help if is possible when insert new record hide there second td.
thanks.
Try this,
Below code set in document.ready
$(".k-button,.k-button-icontext,.k-grid-add").click(function(){
var activityGrid = $("#grid").data("kendoGrid");
activityGrid.hideColumn(1);
});
Updated Code:
var cnt = 1;
$(".k-button,.k-button-icontext,.k-grid-add").click(function () {
cnt = 0;
});
var hideFieldName = "UserName";
$(".k-textbox").live("focusin", function (e) {
if (cnt == 0) {
if ($(this).attr("name") == hideFieldName) {
if ($(this).closest('tr').index() == cnt) {
$(this).attr("readonly", "readonly");
}
}
}
});
So, below code worked as per your requirement. But in this case textbox was generated but user can't enter any value.
Let me know if any issue....
the purpose is that after editing the text area in a line, and clicking on another row, the first one should get saved and the row should be restored. The code works till saving the record, but not restoring the edited row after saving.. Please help me to rectify the issue.
<?
if(isset($_GET)){
$startDate = $_GET['start_date'];
$endDate = $_GET['end_date'];
$type = $_GET['type'];
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="../js/jqgrid/css/ui-lightness/jquery-ui-1.9.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../js/jqgrid/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="../js/powertip/jquery.powertip.css" />
<script type="text/javascript" src="../js/jqgrid/js/jquery1.8.3.js"></script>
<script type="text/javascript" src="../js/jqgrid/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="../js/powertip/jquery.powertip-1.1.0.min.js"></script>
<script type="text/javascript">
jQuery.jgrid.no_legacy_api = true;
</script>
<script src="../js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<style>
.ratingDetails{
font-family:Arial;font-size:12px;color:#FFF;padding-left:2px;
}
</style>
</head>
<body>
<table id="rowed2"></table>
<div id="prowed2"></div>
<script>
jQuery(document).ready(function(){
var lastSel;
jQuery("#rowed2").jqGrid({
url:'feedbacks_bookings_rated_pagination.php?start_date=<?=$startDate?>&end_date=<?=$endDate?>&type=<?=$type?>',
datatype: "json",
height:"auto",
colNames:['Booking<br>Id','City','Customer name','Trip dates','Local Office','Rating','Action Taken','Status','Action'],
colModel:[
{name:'booking_id',index:'booking_id', width:45,align:"center",hidden:false,key: true},// key: true - to get the id value in POST
{name:'pick_city',index:'pick_city', width:90,align:"left"},
{name:'actual_name',index:'add_driver_number', width:130,align:"left",sortable:true},
{name:'tripdates',index:'tripdates', width:80,align:"center",sortable:false},
{name:'office_name',index:'office_name', width:150,align:"left",sortable:true},
{name:'rating_status',index:'rating_status', width:70,align:"center",sortable:true,title: false},
{name:'action_taken',index:'action_taken', width:220,align:"left",sortable:false,editable:true,edittype:'textarea',editoptions:{rows:"3",cols:"35"}},
{name:'img_action_status',index:'img_action_status', width:40,align:"center",sortable:true},
{name:'act',index:'act',width:100,align:'center',sortable:false}
],
rowNum:15,
rowList:[15,25,50],
pager: '#prowed2',
sortname: 'driver_name',
viewrecords: true,
sortorder: "asc",
subGrid : true,
subGridUrl: 'feedbacks_bookings_rated_pagination.php?booking=424519',
subGridModel: [{
name:['Booked on','Trip Type/ Amount','Driver Details','Local Office Phone','Essential Feedbacks','Other Feedbacks'],
width: [90,90,130,100,160,200]}
],
onSelectRow:
function(id){
//alert(lastSel+"-hi-"+id);
if(id && id!==lastSel){
if (typeof lastSel !== "undefined") {
jQuery("#rowed2").jqGrid('saveRow',lastSel);
jQuery("#rowed2").jqGrid('restoreRow',lastSel);
//jQuery("#rowed2").trigger("reloadGrid");
}
lastSel = id;
}
jQuery(this).jqGrid('resetSelection');
jQuery(this).editRow(id, true);
},
editurl: "feedbacks_bookings_rated_pagination.php",
caption:"Edit Feedback Details",
});
// icons in pagination frame bottom
jQuery("#rowed2").jqGrid('navGrid','#prowed2',{ add: false, edit: true,save: true, del: false, reload: true});
jQuery.fn.editRow = function(param) {
var rowid = param;
var booking_id = jQuery("#rowed2").jqGrid ('getCell', param, 'booking_id');
jQuery("#rowed2").jqGrid('editRow',rowid, {
keys : true,
oneditfunc: function() {
}
});
};
jQuery.fn.saveRow = function(param) {
var rowid = param;
jQuery("#rowed2").jqGrid('saveRow',rowid, {
successfunc: function(response) {
//obj = eval('(' + response.responseText + ')');
//$.jgrid.info_dialog('Status','<div class="ui-state-successr"><br>'+obj.responseText +'<br></div>', $.jgrid.edit.bClose,{buttonalign:'center'});
return true;
},
url : "feedbacks_bookings_rated_pagination.php",
mtype : "POST",
});
};
jQuery.fn.restoreRow = function(param) {
var rowid = param;
alert("rstore-"+rowid);
jQuery("#rowed2").jqGrid('restoreRow',rowid, {
afterrestorefunc : function( response ) {
alert("aaaa");
obj = eval('(' + response.responseText + ')');
$.jgrid.info_dialog('Status','<div class="ui-state-successr"><br>'+obj.responseText +'<br></div>', $.jgrid.edit.bClose,{buttonalign:'center'});
return true;
}
});
};
})
function closeAction(bkId){
if(confirm("Are you sure to close the action?")){
//Ok button pressed...
$.post('feedbacks_bookings_rated_pagination.php?action=close',{booking_id: bkId},
function(response){
alert(response.responseText);
$("#rowed2").trigger("reloadGrid");
return true;
},
"json"
);
}
}
// Function to display rating crieteria values as a tooltip on mouseover of Rating caption
function showRatingDetailsToolTip(id) {
$('#rating'+id).data('powertiptarget', 'tooltip'+id);
$('#rating'+id).powerTip({placement: 'e',smartPlacement: true,mouseOnToPopup: true});
}
</script>
</body>
</html>
Again.. given below a rectified code.. here also, the previous row not getting back from edit mode on clicking next row. Can you tell me the problem?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="../js/jqgrid/css/ui-lightness/jquery-ui-1.9.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../js/jqgrid/css/ui.jqgrid.css" />
<script type="text/javascript" src="../js/jqgrid/js/jquery1.8.3.js"></script>
<script type="text/javascript" src="../js/jqgrid/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
jQuery.jgrid.no_legacy_api = true;
</script>
<script src="../js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
</head>
<body>
<table id="rowed2"></table>
<div id="prowed2"></div>
<script>
jQuery(document).ready(function(){
var lastSel;
jQuery("#rowed2").jqGrid({
url:'feedbacks_bookings_rated_pagination.php?start_date=<?=$startDate?>&end_date=<?=$endDate?>&type=<?=$type?>',
datatype: "json",
height:"auto",
colNames:['Booking<br>Id','City','Customer name','Trip dates','Local Office','Rating','Action Taken','Status','Action'],
colModel:[
{name:'booking_id',index:'booking_id', width:45,align:"center",hidden:false,key: true},// key: true - to get the id value in POST
{name:'pick_city',index:'pick_city', width:90,align:"left"},
{name:'actual_name',index:'add_driver_number', width:130,align:"left",sortable:true,editable:true,edittype:'text'},
{name:'tripdates',index:'tripdates', width:80,align:"center",sortable:false},
{name:'office_name',index:'office_name', width:150,align:"left",sortable:true},
{name:'rating_status',index:'rating_status', width:70,align:"center",sortable:true,title: false},
{name:'action_taken',index:'action_taken', width:220,align:"left",sortable:false,editable:true,edittype:'textarea',editoptions:{rows:"3",cols:"35"}},
{name:'img_action_status',index:'img_action_status', width:40,align:"center",sortable:true},
{name:'act',index:'act',width:100,align:'center',sortable:false}
],
rowNum:15,
rowList:[15,25,50],
pager: '#prowed2',
sortname: 'booking_id',
viewrecords: true,
sortorder: "asc",
onSelectRow:
function(id){
if(id && id!==lastSel){
if (typeof lastSel !== "undefined") {
jQuery("#rowed2").jqGrid('saveRow',lastSel,{url : "feedbacks_bookings_rated_pagination.php",mtype : "POST"});
jQuery(this).jqGrid('editRow',lastSel, false);
}
lastSel = id;
}
jQuery(this).jqGrid('editRow',id, true);
},
editurl: "feedbacks_bookings_rated_pagination.php",
caption:"Edit Feedback Details",
});
// icons in pagination frame bottom
jQuery("#rowed2").jqGrid('navGrid','#prowed2',{ add: false, edit: false,save: false, del: false, reload: true});
})
</script>
</body>
</html>
=====================
At last I could find the real problem.
It is not with the content of 'action_taken' field, but with the just previous field. In that I put a table inside a hidden DIV under the actual content, used for a tooltip content.
What happens is that after editing the action_taken field in next column and the server response is received, the edited content of 'action_taken' field was set to the content and title of the first TD of this table in previous column. Also, the edited column does not return from edit mode. If I remove the table from previous column, everything works ok. I tried with different id/style class for the table, but no change. What could be the problem? The table structure in previous column causing the issue is given below.
<table id='ratingdata32380' width='189' border='0' cellpadding='0' cellspacing='0' bordercolor='#000000' bgcolor='#4f9de2'>
<tr><td align='left' valign='middle' class='ratingDetails'>Was On Time?</td><td align='center' valign='middle' class='ratingDetails'>aaaa</td></tr>
</table>
The class 'ratingDetails' is nothing but just the font definition.
.ratingDetails{font-family:Arial;font-size:12px;color:#FFF;padding-left:2px;}
Any idea ?
You should decide which behavior should have your grid. You you want save the data from the previously editing row then you should call saveRow. If you want to discard the current changes and to restore the previous one you should call restoreRow. Calling of restoreRow after saveRow like you do currently inside of onSelectRow callback has no sense.
So if I understand correctly what you want to implement you should remove the line with saveRow which is before calling of restoreRow.
I'm trying out very simple search popup on the JqGrid. Please see the code below. There are few issues:
The popup comes up with AND/OR and [+] controls at the very top. See screenshot below: (from FF 4)
You can click on [-] button to remove the very first (and only) filter row. It shouldn't be allowed. First filter row should never be allowed to be removed.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>JQGRID Test</title>
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/redmond/jquery-ui-1.8.1.custom.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css"/>
<script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery.js"></script>
<script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery-ui-1.8.1.custom.min.js"></script>
<script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
$(function() {
createGrid();
});
function createGrid() {
$("#jqgrid-table").jqGrid({
colNames:['First Name', 'Last Name', 'Age', 'IQ', 'Type'],
colModel:[
{name:'firstName',index:'firstName', width:100},
{name:'lastName',index:'lastName', width:100},
{name:'age', index:'age', width:50},
{name:'iq', index:'iq', width:50, stype:'select', searchoptions: {dataUrl:'/api/domains/putcalldomain'}},
{name:'type', index:'type', width: 56}
],
width: 800,
datatype:'local',
pager: '#pager2',
viewrecords: true,
caption:"JSON Example"
});
var searchOptions = {
caption: 'Filter...',
multipleSearch:true,
closeAfterSearch:true,
closeAfterReset:true,
Find: 'Filter'
};
jQuery("#jqgrid-table").jqGrid('navGrid',
'#pager2',
{search:true, edit:false, add:false, del:false, refresh:false},
null, null, null, searchOptions
);
var data = getData();
for(var i =0; i < data.length; i++) {
var r = data[i];
jQuery("#jqgrid-table").addRowData(r.id, r);
}
}
function getData() {
return [
{id:1, firstName: 'John', lastName: 'XXX', age:'30', iq:'200', type: 'Nice'},
{id:2, firstName: 'Ashley', lastName:'YYY', age:'31', iq:'210', type:'Nicer'},
{id:3, firstName:'Smith', lastName:'ZZZ', age:'23', iq:'90', type:'Nicest'}
];
}
</script>
</head>
<body>
<div id='jqgrid-div'>
<table id='jqgrid-table'></table>
<div id="pager2"></div>
</div>
</body>
</html>
I suggest to overwrite the internal reDraw method used by filtering (see my another answer for more description). To do this you should include in the searchOptions which you use the beforeShowSearch event handler with the following implementation:
beforeShowSearch: function($form) {
var searchDialog = $form[0],
oldrReDraw = searchDialog.reDraw, // save the original reDraw method
doWhatWeNeed = function() {
$('input.delete-rule:first',searchDialog).unbind('click');
// set fucus in the last input field
setTimeout(function() {
// set fucus in the last input field
$('input[type="text"]:last',searchDialog).focus();
}, 50);
}
searchDialog.reDraw = function() {
oldrReDraw.call(searchDialog); // call the original reDraw method
doWhatWeNeed();
}
doWhatWeNeed();
}
You can see the corresponding demo here.