it is my page code in this page jqgrid is not displaying output.please why this error will cal you send me the code with explain..
<link rel="stylesheet" href="css/boilerplate.css" />
<link rel="stylesheet" href="css/global.css" />
<link rel="stylesheet" href="css/splash.css" />
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/redmond/jquery-ui.css">
<link rel="stylesheet" href="css/redmond/jquery.ui.theme.css">
<link rel="stylesheet" href="css/ui.jqgrid.css">
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.src.js" type="text/javascript"></script>
<script src="js/grid.locale-en.js" type="text/javascript"></script>
<script src="js/grid-search.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
//Jqgrid Script code here
<script>
var mydata =[
{id:"LST 0456",employe:"praveesha",role:"employee",department:"developer",joinedate:"june12th",gender:"female",description:"fdggf",gender:"female",description:"fdggf",joinedate:"june12th"},
{id:"LST 0457",employe:"naveena",role:"employee",department:"developer",joinedate:"june12th",gender:"female",description:"fdggf",gender:"female",description:"fdggf",joinedate:"june12th"},
{id:"LST 0458",employe:"anil",role:"employee",department:"developer",joinedate:"june12th",gender:"male",description:"fdggf",gender:"female",description:"fdggf",joinedate:"june12th"}]
$(document).ready(function() {
setupGrid();
option();
attachDeleteButton();
});
//Build radio button
function radioelem(value, options) {
var receivedradio = '<input type="radio" name="receivednaradio" value="Female"';
var breakline = '/>Female<br>';
var naradio = ' <input type="radio" name="receivednaradio" value="Male"';
var endnaradio = '/>Male<br>';
if (value == 'Male') {
var radiohtml = receivedradio + 'checked="checked"' + breakline + naradio + endnaradio;
return radiohtml;
}
else if (value == 'Female') {
var radiohtml = receivedradio + breakline + naradio + ' checked="checked"' + endnaradio;
return radiohtml;
}
else {
return receivedradio + breakline + naradio + endnaradio;
}
};
function radiovalue(elem, operation, value) {
if (operation === 'get') {
return $(elem).val();
} else if (operation === 'set') {
if ($(elem).is(':checked') === false) {
$(elem).filter('[value=' + value + ']').attr('checked', true);
}
}
};
function dataSentOK(){
jQuery("#navgrid4").jqGrid().trigger("reloadGrid");
}
function option() {
$(this).find("table.group td.operators>select.selectopts")
.append("<option value='xx'>xxx</option>");
}
function setupGrid(){
jQuery("#navgrid4").jqGrid({
url:'editing.php?q=1',
data:mydata,
postData: sopt,
datatype:"local",
colNames:['Id','EmployeeName','gender','Role','Department','JoineDate','Description','gender','description','joinedate'],
colModel:[
{name:'id',index:'id', width:55, editable:false,editrules:{required:true},searchoptions:{sopt: ['eq', 'ne']}},
{name:'employe',index:'employe', width:90,editable:true,formoptions:{rowpos:2,elmprefix:" "},editrules:{required:true}},
{name:'gender',index:'gender', width:55,editable: true, formatter: 'dynamicText', width: 150, edittype: 'custom', editoptions: { custom_element: radioelem, custom_value: radiovalue},formoptions:{rowpos:4,elmprefix:" "}},
{name:'role',index:'role', width:100,editable:true,edittype:"select",
editoptions:{dataUrl:'test.txt', defaultValue:'Intime'},
formoptions:{rowpos:3,elmprefix:" " }},
{name:'department',index:'department', width:80, align:"right",editable:true,edittype:"select",
editoptions:{dataUrl:'test.txt', defaultValue:'Intime'},
formoptions:{rowpos:5,elmprefix:" " }},
{name:'joinedate',index:'joinedate', width:80,
editable:true,
editoptions:{size:12,
dataInit:function(el){
$(el).datepicker({dateFormat:'yy-mm-dd '});
},
defaultValue: function(){
var currentTime = new Date();
var month = parseInt(currentTime.getMonth() + 1);
month = month <= 9 ? "0"+month : month;
var day = currentTime.getDate();
day = day <= 9 ? "0"+day : day;
var year = currentTime.getFullYear();
return year+"-"+month + "-"+day;
}
},
formoptions:{ rowpos:6,elmsuffix:" yyyy-mm-dd", elmprefix:" "},
editrules:{required:true}
},
{name:'description',index:'description', width:55, editable:true,editrules:{required:true},formoptions:{rowpos:7,elmprefix:" "}},
{name:'gender',index:'gender', width:55,editable: true, formatter: 'dynamicText', width: 150, edittype: 'custom', editoptions: { custom_element: radioelem, custom_value: radiovalue},formoptions:{rowpos:8,elmprefix:" "}},
{name:'description',index:'description', width:55, editable:true,editrules:{required:true},formoptions:{rowpos:9,elmprefix:" "}},
{name:'joinedate',index:'joinedate', width:80,
editable:true,
editoptions:{size:12,
dataInit:function(el){
$(el).datepicker({dateFormat:'yy-mm-dd '});
},
defaultValue: function(){
var currentTime = new Date();
var month = parseInt(currentTime.getMonth() + 1);
month = month <= 9 ? "0"+month : month;
var day = currentTime.getDate();
day = day <= 9 ? "0"+day : day;
var year = currentTime.getFullYear();
return year+"-"+month + "-"+day;
}
},
formoptions:{ rowpos:10,elmsuffix:" yyyy-mm-dd", elmprefix:" "},
editrules:{required:true}
},
],
rowNum:10,
rowList:[10,20,30],
pager: '#pagernav4',
sortname: 'employe',
mtype: 'GET',
viewrecords: true,
sortorder: "desc",
caption:"Navigator Example",
editurl:"someurl.php",
multiselect:true,
height:350,
width:600
});
jQuery("#navgrid4").jqGrid('navGrid','#pagernav4',{view:true,add:true,search:true, multipleSearch: true,edit:true},
{jqModal:true,checkOnUpdate:true,savekey: [true,13], navkeys: [true,38,40], checkOnSubmit : true, reloadAfterSubmit:false, closeOnEscape:true,bottominfo:"Fields marked with (*) are required"}
);
}
//body part code
<section> <!--SLODER SECTION STARTS HERE-->
<div class="content"> <!--CONTENT STARTS HERE-->
<div class="content-left"> <!--CONTENT-LEFT STARTS HERE-->
<div id="sub-content-left">
<ul id="sub-contentul">
<li id="empmgmt"><a href="#" id="empmgmt">Employee Management</a></li>
<li id="rolemgmt"><a href="#">Role Management</a></li>
<li id="deptmgmt"><a href="#">Department Management</a></li>
<li id="holidays"><a href="#">Holidays</a></li>
<li id="updates"><a href="#">Updates</a></li>
<li id="reports"><a href="#">Reports</a></li>
<li id="attendence"><a href="#">Attendence</a></li>
</ul>
</div>
<div id="sub-content-right">
<div id="empmgmt-div">
<div class="centreDiv">
<!-- jqGrid will be injected into this DIV-->
<div>
<table id="navgrid4"></table>
<div id="pagernav4"></div>
</div>
</div>
</div>
<div id="rolemgmt-div">
<p>Role Management</p>
</div>
<div id="deptmgmt-div">
<p>Department Management</p>
</div>
<div id="holidays-div">
<p>Holidays</p>
</div>
<div id="updates-div">
<p>Updates</p>
</div>
<div id="reports-div">
<p>Reports</p>
</div>
<div id="attendence-div">
<p>Attendence</p>
</div>
</div>
</div> <!--CONTENT-LEFT ENDS HERE-->
<div class="content-right"> <!--CONTENT-RIGHT STARTS HERE-->
<div class="bday-box">
<p class="bday-name">Birthdays List</p>
</div>
<div class="scroll-box">
<p class="bday-name">Scrolling Updates</p>
</div>
<div class="calender-box">
<p class="bday-name">Calender Box</p>
</div>
</div> <!--CONTENT-RIGHT ENDS HERE-->
</div> <!--CONTENT ENDS HERE-->
</section> <!--SLIDER SECTION ENDS HERE-->
