i am using Jgrid. i am injecting the data to the Grid using Xml as we most of us do.
i want the batch update to database, my requirement that when i click on the "Save Change" it generate the Xml of current(updated) grid data.
So, how can i generate the Xml of Jgrid data.
please help.
here is the code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link href="../../Content/css/Style/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../../Content/css/Style/jquery-ui-1.7.2.custom.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../../Content/css/Style/ui.jqgrid.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" media="screen" href="../../Content/css/Style/jqModal.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../../Content/css/Style/datePicker.css" />
<script src="../../Content/js/Jgrid js/jquery.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/grid.locale-en.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/celledit.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/ui.datepicker.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready( function() {
//debugger;
var lastsel3;
jQuery("#test").jqGrid({
url:'/Content/xml/user.xml',
datatype: "xml",
colNames:['Consultant','Project Role', 'Task', 'Start Date','End Date','Deliverables','Complete'],
colModel:[
{name:'id',index:'id', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
{name:'tax',index:'tax', width:80, align:"right",editable:true},
{name:'tax',index:'tax', width:80, align:"right",editable:true},
{name:'invdate',index:'invdate', width:90,editable:true},
{name:'invdate',index:'invdate', width:90,editable:true},
{name:'tax',index:'tax', width:80, align:"right",editable:true},
{name:'note',index:'note', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Complete:"}}
],
onSelectRow: function(id){
if(id && id!==lastsel3){
jQuery('#test').jqGrid('restoreRow',lastsel3);
jQuery('#test').jqGrid('editRow',id,true,pickdates);
lastsel3=id;
}
},
rowNum:10,
rowList:[10,20,30],
pager: '#pcelltbl',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"Cell Edit Example",
forceFit : true,
cellEdit: true,
cellsubmit: 'clientArray',
afterEditCell: function (id,name,val,iRow,iCol){
if(name=='invdate') {
jQuery("#"+iRow+"_invdate","#test").datepicker({dateFormat:"yy-mm-dd"});
}
},
afterSaveCell : function(rowid,name,val,iRow,iCol) {
if(name == 'amount') {
var taxval = jQuery("#celltbl").jqGrid('getCell',rowid,iCol+1);
jQuery("#test").jqGrid('setRowData',rowid,{total:parseFloat(val)+parseFloat(taxval)});
}
if(name == 'tax') {
var amtval = jQuery("#test").jqGrid('getCell',rowid,iCol-1);
jQuery("#test").jqGrid('setRowData',rowid,{total:parseFloat(val)+parseFloat(amtval)});
}
}
});
jQuery("#test").jqGrid('navGrid','#pgwidth',{edit:true,add:true,del:true});
});
</script>
</head>
<body>
<form id="form1">
<div>
<table id="test">
</table>
</div>
</form>
</body>
</html>
Thanks.
To export data to XML you can use jQuery("#test").jqGrid ('getGridParam', 'data') in combination with xmlJsonClass.json2xml from JsonXml.js which included to jqGrid.
I created a working example which demonstrate this way: http://www.ok-soft-gmbh.com/jqGrid/ExportInXml.htm. You can use external button or a button in the jqGrid navigator to make the export. In the example I just display the exported data with respect of alert function. The same data as a file you find here.
Hi Oleg I am using the ths same code but it not produce the correct output.. My code is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<!-- <script type="text/javascript">
debugger;
alert($!retrivexml);
</script>-->
<link href="../../Content/css/Style/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../../Content/css/Style/jquery-ui-1.7.2.custom.css"
type="text/css" media="screen" />
<link rel="stylesheet" href="../../Content/css/Style/ui.jqgrid.css" type="text/css"
media="screen" />
<link rel="stylesheet" type="text/css" media="screen" href="../../Content/css/Style/jqModal.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../../Content/css/Style/datePicker.css" />
<script src="../../Content/js/Jgrid js/jquery.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/grid.locale-en.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/jquery.jqGrid.min.js" type="text/javascript"></script>
<!--<script src="../../Content/js/Jgrid js/celledit.js" type="text/javascript"></script>-->
<script src="../../Content/js/Jgrid js/ui.datepicker.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/json2.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/JsonXml.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/grid.import.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready( function() {
var grid = jQuery("#test");
var MyExportToXml = function (grid) {debugger;
var dataFromGrid = {row: grid.jqGrid ('getGridParam', 'data') };
var xmldata = '<?xml version="1.0" encoding="utf-8" standalone="yes"?>\n<rows>\n' +
xmlJsonClass.json2xml (dataFromGrid, '\t') + '</rows>';
alert(xmldata);
};
var lastsel3;
jQuery("#test").jqGrid({
url:'/Content/xml/user.xml',
//url: $!retrivexml,
datatype: "xml",
colNames:['Consultant','Project Role', 'Task', 'Start Date','End Date','Deliverables','Complete'],
colModel:[
{name:'Consultant',index:'Consultant', width:90, editable: true,edittype:"select",editoptions:{value:"K:Kin;R:Rajesh;R:Renee;S:Sandeep"}},
{name:'Role',index:'Role', width:80, align:"right",editable:true},
{name:'Task',index:'Task', width:80, align:"right",editable:true},
{name:'SDate',index:'SDate', width:90,editable:true},
{name:'EDate',index:'EDate', width:90,editable:true},
{name:'Deliverables',index:'Deliverables', width:200, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"25"}},
{name:'Complete',index:'Complete', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Complete:Incomplete"}}
],
rowNum:10,
//rowList:[10,20,30],
pager: '#pagediv',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"Project Planning",
forceFit : false,
cellEdit: true,
editurl:'clientArray',
cellsubmit: 'clientArray',
afterEditCell: function (id,name,val,iRow,iCol){
if(name=='SDate') {
jQuery("#"+iRow+"_SDate","#test").datepicker({dateFormat:"yy-mm-dd"});
}
if(name=='EDate') {
jQuery("#"+iRow+"_EDate","#test").datepicker({dateFormat:"yy-mm-dd"});
}
},
// afterSaveCell : function(rowid,name,val,iRow,iCol) {
// if(name == 'amount') {
// var taxval = jQuery("#celltbl").jqGrid('getCell',rowid,iCol+1);
// jQuery("#test").jqGrid('setRowData',rowid,{total:parseFloat(val)+parseFloat(taxval)});
// }
//
//
//
// if(name == 'tax') {
// var amtval = jQuery("#test").jqGrid('getCell',rowid,iCol-1);
// jQuery("#test").jqGrid('setRowData',rowid,{total:parseFloat(val)+parseFloat(amtval)});
// }
// }
});
jQuery("#test").jqGrid('navGrid','#pagediv',{edit:false,add:false,del:false});
$("#export").click(function(){
MyExportToXml (grid);
});
jQuery("#bedata").click(function(){
jQuery("#test").jqGrid('navButtonAdd','#pagediv',{caption:"New", buttonicon :'ui-icon-circle-plus',
onClickButton:function(id){
var datarow = {Consultant:"",Role:"",Task:"",SDate:"",EDate:"",
Deliverables:"",Complete:""};
var lastsel2 = id;
//debugger;
var su=jQuery("#test").addRowData(lastsel2, datarow, "last") ;
// if (su) {
// jQuery('#test').editRow(lastsel2,true);
//
//
// }
},
title:"New Button",
position:"last"
});
//jQuery("#test").jqGrid('editGridRow',"new",{height:280,reloadAfterSubmit:false});
});
});
</script>
</head>
<body>
<form id="form1">
<div id="pagediv">
</div>
<table id="test">
</table>
<input type="BUTTON" id="bedata" value="Edit Selected" />
<input type="BUTTON" id="export" value="Export" />
</form>
</body>
Please..correct the code if i m doing some mistake here
Related
I'm using react-codemirror2 in a react project. I want to add features like auto bracket close and auto tag close. There is a npm package called #codemirror/closebrackets but I can't find any documentation to do that.
<ControlledEditor
onBeforeChange={handleChange}
value={value}
className="code-mirror-wrapper"
options={{
linerWrapping: true,
lint: true,
mode: language,
theme: 'material',
lineNumbers: true
}}
/>
This is my react component.
Specify if there is a way to do without additional packages like #codemirror/closebrackets.
You can add autoCloseBrackets: true to your options and it'll work fine. From the doc:
Defines an option autoCloseBrackets that will auto-close brackets and
quotes when typed.
import 'codemirror/addon/edit/closebrackets'
// other parts of the code//
<ControlledEditor
onBeforeChange={handleChange}
value={value}
className="code-mirror-wrapper"
options={{
linerWrapping: true,
lint: true,
mode: language,
theme: 'material',
lineNumbers: true,
autoCloseBrackets: true,
}}
/>
This really works:
<!doctype html>
<html>
<head>
<title>CodeMirror</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
<link rel=stylesheet href="https://CodeMirror.net/doc/docs.css">
<script src="https://CodeMirror.net/addon/hint/anyword-hint.js" id="anyword"></script>
<link rel="stylesheet" href="https://CodeMirror.net/lib/codemirror.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/hint/show-hint.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/dialog/dialog.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/search/matchesonscrollbar.css">
<script src="https://CodeMirror.net/lib/codemirror.js"></script>
<script src="https://CodeMirror.net/addon/edit/closetag.js"></script>
<script src="https://CodeMirror.net/addon/hint/show-hint.js"></script>
<script src="https://CodeMirror.net/addon/hint/sql-hint.js"></script>
<script src="https://CodeMirror.net/addon/mode/loadmode.js"></script>
<script src="https://CodeMirror.net/mode/meta.js"></script>
<script src="https://CodeMirror.net/addon/hint/xml-hint.js"></script>
<script src="https://CodeMirror.net/addon/hint/html-hint.js"></script>
<script src="https://CodeMirror.net/addon/search/jump-to-line.js"></script>
<script src="https://CodeMirror.net/addon/hint/javascript-hint.js"></script>
<script src="https://CodeMirror.net/mode/xml/xml.js"></script>
<script src="https://CodeMirror.net/mode/javascript/javascript.js"></script>
<script src="https://CodeMirror.net/mode/css/css.js"></script>
<script src="https://CodeMirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://CodeMirror.net/addon/dialog/dialog.js"></script>
<script src="https://CodeMirror.net/addon/search/searchcursor.js"></script>
<script src="https://CodeMirror.net/addon/search/jump-to-line.js"></script>
<script src="https://CodeMirror.net/addon/search/search.js"></script>
<script src="https://CodeMirror.net/addon/scroll/annotatescrollbar.js"></script>
<script src="https://CodeMirror.net/addon/search/matchesonscrollbar.js"></script>
</head>
<body>
<div id="editor"></div>
<button onclick="closeBrackets()">Close Brackets</button>
<script>
function closeBrackets() {
myCodeMirror.execCommand("closeBrackets");
}
</script>
<script>
var myCodeMirror = CodeMirror(
document.getElementById('editor'), {
lineNumbers: true,
autoCloseBrackets: true,
});
</script>
</body>
</html>
I'm testing Swup.js
As far as I see it doesn't work with relative links. Like this;
Go page
Screenshoot for link in DOM
For this you need to enter the URL with the full path. But this may be undesirable. Relativity is used quite often, especially in designs with HTML content.
It works when I do as follows.
Go page
This was not the case with Turbolinks. What is the reason of this? Do I need to make any adjustments? Thanks.
My index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SWUP INDEX</title>
<link rel="stylesheet" href="">
<script src="swup.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="1.css">
<script src="1.js" type="text/javascript" charset="utf-8" async defer></script>
</head>
<body>
<div id="swup">
<h1>INDEX</h1>
Go Page
</div>
<script type="text/javascript">
var options = {
LINK_SELECTOR: 'a',
FORM_SELECTOR: 'form[data-swup-form]',
animationSelector: '[class^="a-transition-"]',
cache: true,
pageClassPrefix: '',
scroll: true,
debugMode: true,
preload: true,
support: true,
disableIE: false,
skipPopStateHandling: function(event){
if (event.state && event.state.source == "swup") {
return false;
}
return true;
},
}
var swup = new Swup(options);
</script>
</body>
</html>
My page.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SWUP PAGE</title>
<link rel="stylesheet" href="">
<script src="swup.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="2.css">
<script src="2.js" type="text/javascript" charset="utf-8" async defer></script>
</head>
<body>
<div id="swup">
<h1>PAGE</h1>
Go Index
</div>
<script type="text/javascript">
var options = {
LINK_SELECTOR: 'a',
FORM_SELECTOR: 'form[data-swup-form]',
animationSelector: '[class^="a-transition-"]',
cache: true,
pageClassPrefix: '',
scroll: true,
debugMode: true,
preload: true,
support: true,
disableIE: false,
skipPopStateHandling: function(event){
if (event.state && event.state.source == "swup") {
return false;
}
return true;
},
}
var swup = new Swup(options);
</script>
</body>
</html>
Try to insert that instead of (LINK_SELECTOR: 'a')
linkSelector: 'a[href^="' + window.location.origin +'"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup])',
I am trying an application to fetch records from db and populate dataTable using the returned json.
My app is working good but I want to refresh my table on every 30 seconds and to repopulated added/modified rows from db.
Ajax reload is not working. I need your suggestion to know where I am making mistake?
Here is my code..
Datatable Script
var table;
function submitData(){
alert('Method Called');
table=$('#table').dataTable({
"pagingType" : 'full_numbers',
"scrollY" : "200px",
"dom" : 'TRlfrCtip',
"colVis" : {
"activate" : "mouseover",
"restore" : "Restore"
},
"tableTools" : {
"aButtons" : ["copy","csv","xls","pdf","print"],
"sSwfPath": "http://cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf"
},
"ajax" : {
"url" : '../DataTableExample/FetchRows',
"dataType" : "json",
"type" : "POST",
},
"aoColumns" : [ {
"mData" : "id",
"sTitle" : "S. No"
}, {
"mData" : "name",
"sTitle":"Name"
}, {
"mData" : "age",
"sTitle":"Age"
}, {
"mData" : "designation",
"sTitle":"Designation"
}, {
"mData" : "qualification",
"sTitle": "Qualification"
}, ],
"deferRender": true,
"columnDefs":[
{
"targets" : [0],
"visible" : false,
"searchable" : true
}
]
});
$('#table tbody').on('click','tr',function(){
$(this).toggleClass('selected');
});
setInterval( function () {
table.ajax.reload();
}, 30000 );
}
function hideThings(){
$('#table_length').css("display","none");
}
HTML
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>DataTable Example</title>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/media/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/media/css/jquery.dataTables_themeroller.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/extensions/ColVis/css/dataTables.colVis.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/media/css/dataTables.colvis.jqueryui.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/media/css/dataTables.colVis.min.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/extensions/ColReorder/css/dataTables.colReorder.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/extensions/ColReorder/css/dataTables.colReorder.min.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/extensions/TableTools/css/dataTables.tableTools.min.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/extensions/TableTools/css/dataTables.tableTools.css">
<!-- Custom Javascript File -->
<script type="text/javascript" charset="utf8" src="jsFiles/DataTableSamplejs.js"></script>
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="jqueryFiles/jquery-1.11.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/media/js/jquery.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/extensions/ColReorder/js/dataTables.colReorder.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/extensions/ColReorder/js/dataTables.colReorder.min.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/extensions/ColVis/js/dataTables.colVis.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/extensions/ColVis/js/dataTables.colVis.min.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/extensions/TableTools/js/dataTables.tableTools.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/extensions/TableTools/js/dataTables.tableTools.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/media/js/jquery.dataTables.js"></script>
</head>
<body>
<input id="submit" type="submit" value="Submit" onclick="submitData()"/>
<table id="table" class="display" cellspacing="0" width="100%">
<tbody></tbody>
</table>
<input id="hideButton" type="submit" value="Hide" onclick="hideThings()"/>
</body>
</html>
OK 2 things,
One change
setInterval( function () {
table.ajax.reload();
}, 30000 );
to
setInterval( submitData , 30000 );
and
table=$('#table').dataTable({
"pagingType" : 'full_numbers',
destroy: true, //ADD DESTROY TRUE
.
.
.
..
This is how I do it fetch every 2 seconds
setTimeout(function(){ $('#table').DataTable().ajax.reload(); },2000);
no need to destroy just reload table.
The following code will reload the datatable every 30 second.
Change
setInterval( function () {
table.ajax.reload();
}, 30000 );
To
setInterval( submitData , 30000 );
I got the solution..
I used event delegation to keep track on the column index in which sort performed and I applied it to "order" option dynamically using that variable. And as you guys suggested I changed ajax.reload to call setInterval(submitData,30000) and inside that function I destroyed the table if found. Its working as expected now..
Thank you all for your support :-)
Not necessary to destroy to reload the data. You can reload only the data
function reloadDatatable () {
$('#example').DataTable().ajax.reload();
};
setInterval( reloadDatatable , 1000 );
i have got Above Error when Loading View of Index.
I want Implement JQGrid using jquery grid plugin
i have Include Number of JS file in View and also CSS for JQGrid. rather than i can not Create Grid by using JQGrid plugin so please help me for that and i have use JQGrid 4.6.0 version so please help me
<link href="#Url.Content("~/Content/jqGrid/css/ui.jqgrid.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/jqGrid/css/ui.all.css")" rel="stylesheet" type="text/css" />
<script src="~/Content/jqGrid/js/jquery-1.9.0.min.js"></script>
<link href="~/Content/jqGrid/css/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
<script lang="javascript" type="text/javascript" src="#Url.Content("~/Content/JQGrid/src/jqModal.js")"></script>
<script lang="javascript" type="text/javascript" src="#Url.Content("~/Content/JQGrid/src/jquery.jqGrid.js")"></script>
<script lang="javascript" type="text/javascript" src="#Url.Content("~/Content/JQGrid/src/jqDnR.js")"></script>
<script lang="javascript" type="text/javascript" src="#Url.Content("~/Content/JQGrid/src/i18n/grid.locale-en.js")"></script>
-------------html -------- table for grid ---------
------------- SCript Part -------------
$(document).ready(function (e)
{
$("#student-grid-json").jqGrid({
url: "/Demo/GetStudents",
datatype: "json",
colNames: ["Student ID", "Name", "Course", "Year"],
colModel: [
{ name: "StudentID", index: "StudentID" },
{ name: "Name", index: "Name" },
{ name: "Course", index: "Course" },
{ name: "Year", index: "Year", sorttype: "int" }
],
rowNum: 50,
rowList: [20, 50, 100],
pager: "#pager-json",
sortname: "StudentID",
sortorder: "ASC",
viewrecords: true,
caption: "Student List - Loading via JSON"
});
$("#student-grid-array").navGrid("#pager-json", { edit: false, add: false, del: false, search: false, refresh: false });
});
found the problem.Here is the order for libraries
<link href="#Url.Content("~/Content/jqGrid/css/ui.jqgrid.css")" rel="stylesheet" type="text/css" />
<link href="~/Content/jqGrid/css/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
<link href="#Url.Content("~/Content/jqGrid/css/ui.all.css")" rel="stylesheet" type="text/css" />
<script src="~/Content/jqGrid/js/jquery-1.9.0.min.js"></script>
<script lang="javascript" type="text/javascript" src="#Url.Content("~/Content/JQGrid/src/jquery.jqGrid.js")"></script>
<script lang="javascript" type="text/javascript" src="#Url.Content("~/Content/JQGrid/src/jqModal.js")"></script>
<script lang="javascript" type="text/javascript" src="#Url.Content("~/Content/JQGrid/src/jqDnR.js")"></script>
<script lang="javascript" type="text/javascript" src="#Url.Content("~/Content/JQGrid/src/i18n/grid.locale-en.js")"></script>
This is the correct order.you put the modal before jqgrid.js which was making problem
How to close search popup when click on Find button.
After search the data in jqgrid I click on Find button the Search popup is not closed. The searched data is filtered but popup is not closed.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="<%=request.getContextPath()%>/js/jquery-1.9.1.js" type="text/javascript" ></script>
<script src="<%=request.getContextPath()%>/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/style/colorbox.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<%=request.getContextPath()%>/style/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<%=request.getContextPath()%>/style/ui.jqgrid.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-ui.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-validation.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.colorbox.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/grid.locale-en.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//jqGrid
$("#usersList").jqGrid({
url:'<%=request.getContextPath() %>/Admin/getAllUsersList',
datatype: "json",
colNames:['Edit','Primary Email','Active','First Name','Middle Name','LastName','Mobile Number','Cloud Url', 'Cloud User Name','Cloud Folder'],
colModel:[
{name:'userId',search:false,index:'userId',width:30,sortable: false,formatter: editLink},
{name:'email',index:'user.primaryEmail',width:150},
{name:'isActive',index:'user.isActive',width:80},
{name:'firstName',index:'firstName', width:100},
{name:'middleName',index:'middleName', width:100},
{name:'lastName',index:'lastName', width:100},
{name:'mobileNo',index:'user.mobileNo', width:100},
{name:'cloudUrl',index:'user.cloudUrl', width:200},
{name:'cloudUserName',index:'user.cloudUserName', width:120},
{name:'cloudFolderName',index:'user.cloudFolderName', width:120},
],
rowNum:20,
rowList:[10,20,30,40,50],
rownumbers: true,
pager: '#pagerDiv',
sortname: 'user.primaryEmail',
viewrecords: true,
sortorder: "asc",
autowidth:'true',
});
$('#gridContainer div:not(.ui-jqgrid-titlebar)').width("100%");
$('.ui-jqgrid-bdiv').css('height', window.innerHeight * .65);
$('#load_usersList').width("130");
$("#usersList").jqGrid('navGrid','#pagerDiv',{edit:false,add:false,del:false});
$(".inline").colorbox({inline:true, width:"20%"});
});
function editLink(cellValue, options, rowdata, action)
{
return "<a href='<%=request.getContextPath()%>/Admin/editUser/" + rowdata.userId + "' class='ui-icon ui-icon-pencil' ></a>";
}
</script>
</head>
<body>
<div style="" class="wrapper">
<div style="height:10px; clear:both;"></div>
<div class="ContentHolder">
<div class="bgcolorblack">
<div style="clear:both;"></div>
<div style="padding:10px;">
<div id="gridContainer">
<table id="usersList"></table>
<div id="pagerDiv"></div>
</div>
</div>
</div>
</div>
</div>
The problem is resolved after mention closeAfterSearch:true in jqgrid.
Search popup is closed when click on Find button.
Code:
$("#usersList").jqGrid('navGrid','#pagerDiv',{edit:false,add:false,del:false},{},{},{}, {closeAfterSearch:true});