jQWidgets Forums
Forum Replies Created
-
Author
-
February 19, 2016 at 10:34 am in reply to: jqxLoader and it is not appearing jqxLoader and it is not appearing #81595
jqx loader isnt appearing actually i am generating grid but till data to be shown in grid i want to make the loader running . data is to fetched from a web service.
here i am sharing code .
<title>UCRM All Enquiries</title>
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.glacier.css” type=”text/css” />
<script type=”text/javascript” src=”jqwidgets/jquery-1.11.3.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script src=”func3.js” type=”text/javascript”></script>
<script src=”grid.js” type=”text/javascript”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtabs.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxnotification.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcalendar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtooltip.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxradiobutton.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdatatable.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxnotification.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxloader.js”></script><script type=”text/javascript” src=”jqwidgets/jqxcombobox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.export.js”></script>
<style type=”text/css”>
.auto-style1 {
text-align: right;
font-family: Arial;
font-size: medium;
}
.colorField {
background-color:#eeeeee;
}
</style><link href=”ucrmStyle.css” rel=”stylesheet” />
</head><body style=”background-color:#EEEEEE”>
<div id=”jqxLoader”>
</div>
<div id=”content”>
<script type=”text/javascript”>function creategrid(data1)
{var data = new Array();
var size;
var jdata=JSON.parse(data1);
size= Object.keys(jdata).length;
console.log(size);
var caseid={};
var pax={};
var cname={};
var ptitle={};
var pcost={};
var camount={};
var i_taylor={};
var pcd={};
var principle={};
var ulocation={};
var agent={};var i=0;
var sel=0
while (i<size)
{console.log(parseJsonDate(jdata[i].Case_createddate));
if ($(“#r_type”).text()==”Custom”)
{
if(jdata[i].IS_taylor==1)
{
if ($(“#c_type”).text()==”Application”)
{
if(jdata[i].App_id==(“200″+jdata[i].Cust_id))
{
caseid[sel]=jdata[i].Case_id;
pax[sel]=getApplicantvisaprice(jdata[i].Case_id);
cname[sel]=jdata[i].Cust_name;
ptitle[sel]=jdata[i].Pkg_title;
pcost[sel]=jdata[i].Pkg_price;
camount[sel]=jdata[i].Case_Amount;
i_taylor[sel]=jdata[i].IS_taylor;
pcd[sel]= $.jqx.dataFormat.formatdate(parseJsonDate(jdata[i].Case_createddate), ‘dd-MM-yyyy’);
principle[sel]=inputstatus(jdata[i].Prin_title);
ulocation[sel]=inputstatus(jdata[i].User_location);
agent[sel]=jdata[i].Case_createdby;
sel++;}
}
else if ($(“#c_type”).text()==”Enquiry”)
{
if(jdata[i].App_id==(“100″+jdata[i].Cust_id))
{
caseid[sel]=jdata[i].Case_id;
pax[sel]=getApplicantvisaprice(jdata[i].Case_id);
cname[sel]=jdata[i].Cust_name;
ptitle[sel]=jdata[i].Pkg_title;
pcost[sel]=jdata[i].Pkg_price;
camount[sel]=jdata[i].Case_Amount;
i_taylor[sel]=jdata[i].IS_taylor;
pcd[sel]= $.jqx.dataFormat.formatdate(parseJsonDate(jdata[i].Case_createddate), ‘dd-MM-yyyy’);
principle[sel]=inputstatus(jdata[i].Prin_title);
ulocation[sel]=inputstatus(jdata[i].User_location);
agent[sel]=jdata[i].Case_createdby;
sel++;}
}
}
}
else if ($(“#r_type”).text()==”General”)
{
if(jdata[i].IS_taylor==0)
{
if ($(“#c_type”).text()==”Application”)
{
if(jdata[i].App_id==(“200″+jdata[i].Cust_id))
{
caseid[sel]=jdata[i].Case_id;
pax[sel]=getApplicantvisaprice(jdata[i].Case_id);
cname[sel]=jdata[i].Cust_name;
ptitle[sel]=jdata[i].Pkg_title;
pcost[sel]=jdata[i].Pkg_price;
camount[sel]=jdata[i].Case_Amount;
i_taylor[sel]=jdata[i].IS_taylor;
pcd[sel]= $.jqx.dataFormat.formatdate(parseJsonDate(jdata[i].Case_createddate), ‘dd-MM-yyyy’);
principle[sel]=inputstatus(jdata[i].Prin_title);
ulocation[sel]=inputstatus(jdata[i].User_location);
agent[sel]=jdata[i].Case_createdby;
sel++;}
}
else if ($(“#c_type”).text()==”Enquiry”)
{
if(jdata[i].App_id==(“100″+jdata[i].Cust_id))
{
caseid[sel]=jdata[i].Case_id;
pax[sel]=getApplicantvisaprice(jdata[i].Case_id);
cname[sel]=jdata[i].Cust_name;
ptitle[sel]=jdata[i].Pkg_title;
pcost[sel]=jdata[i].Pkg_price;
camount[sel]=jdata[i].Case_Amount;
i_taylor[sel]=jdata[i].IS_taylor;
pcd[sel]= $.jqx.dataFormat.formatdate(parseJsonDate(jdata[i].Case_createddate), ‘dd-MM-yyyy’);
principle[sel]=inputstatus(jdata[i].Prin_title);
ulocation[sel]=inputstatus(jdata[i].User_location);
agent[sel]=jdata[i].Case_createdby;
sel++;}
}
}
}
i++;
}
var k = 0;
while (k<sel) {
var row = {};
row[“sr_no”] = k+1;
row[“case_id”] = caseid[k];
row[“Cust_name”] = cname[k];
row[“pax”] = pax[k];
row[“Pkg_title”] = ptitle[k];
row[“pkg_cost”] = pcost[k];
row[“camount”] = camount[k];
row[“IS_taylor”] = i_taylor[k];
row[“Case_createddate”]=pcd[k];
row[“principle”]=principle[k];
row[“ulocation”]=ulocation[k];
row[“agent”]=agent[k];data[k] = row;
k++;
}var source =
{
localData: data,
dataType: “array”
};var dataAdapter = new $.jqx.dataAdapter(source,{
loadComplete: function () { $(‘#jqxLoader’).jqxLoader(‘close’); }});
var cellsrenderer2 = function (row, column, value) {
return ‘<div style=”text-align: left;font-weight:bold;margin-top: 5px;margin-left: 8px;”>’ + value + ‘</div>’;
}
var cellsrenderer = function (row, column, value) {return ‘<div style=”text-align: left;margin-top: 5px; margin-left: 8px;”>’ + value + ‘</div>’;
}
var columnsrenderer = function (value) {
return ‘<div style=”text-align: left;font-weight:bold; margin-top: 5px; margin-left: 8px;”>’ + value + ‘</div>’;
}
var bgr = function (row, column, value, data) {
if ((row%2)==1) {
return “colorField”;
}
}$(“#dataTable”).jqxDataTable(
{
width: “99.90%”,
height: 700 ,
source: dataAdapter,
pageable: false,
// pageSize: 10,
rowDetails: false,
filterable: true,
filterMode: ‘advanced’,
aggregatesHeight: 25,
showAggregates: true,
sortable: false,
ready: function () {
// expand the first details.
$(“#dataTable”).jqxDataTable();
},columns: [
{ text: ‘SR #’, datafield: ‘sr_no’,renderer: columnsrenderer, cellsrenderer: cellsrenderer,cellclassname: bgr,width:130, aggregates: [{
‘Total’:
function (aggregatedValue, currentValue, column, record) {return currentValue;
}
}],
aggregatesRenderer: function (aggregates, column, element) {
var renderString = “<div style=’margin: 4px; text-align: center; height: 100%;’>”;
renderString += “RECORDS: “+ aggregates.Total + “</div>”;
return renderString;
}},
{ text: ‘CASE ID’, datafield: ‘case_id’,renderer: columnsrenderer, cellsrenderer: cellsrenderer2,cellclassname: bgr },
{ text: ‘CUSTOMER NAME’, datafield: ‘Cust_name’,renderer: columnsrenderer, cellsrenderer: cellsrenderer,cellclassname: bgr},
{ text: ‘PAX’, datafield: ‘pax’,renderer: columnsrenderer, cellsrenderer: cellsrenderer,cellclassname: bgr},
{ text: ‘PACKAGE TITLE’, datafield: ‘Pkg_title’,renderer: columnsrenderer, cellsrenderer: cellsrenderer,cellclassname: bgr},
// { text: ‘PACKAGE COST’, datafield: ‘pkg_cost’,renderer: columnsrenderer, cellsrenderer: cellsrenderer ,cellclassname: bgr,cellsformat: ‘d’},
{ text: ‘CASE AMOUNT’, datafield: ‘camount’,renderer: columnsrenderer, cellsrenderer: cellsrenderer,cellclassname: bgr ,cellsformat: ‘d’, aggregates: [{
‘Total’:
function (aggregatedValue, currentValue, column, record) {
var total = currentValue;
return aggregatedValue + total;
}
}],aggregatesRenderer: function (aggregates, column, element) {
var renderString = “<div style=’margin: 4px; text-align: center; height: 100%;’>”;
renderString += “TOTAL: “+ aggregates.Total + “</div>”;
return renderString;
}},
{ text: ‘PRINCIPLE’, datafield: ‘principle’,renderer: columnsrenderer, cellsrenderer: cellsrenderer,cellclassname: bgr},
{ text: ‘LOCATION’, datafield: ‘ulocation’,renderer: columnsrenderer, cellsrenderer: cellsrenderer,cellclassname: bgr},
{ text: ‘AGENT’, datafield: ‘agent’,renderer: columnsrenderer, cellsrenderer: cellsrenderer,cellclassname: bgr},
{ text: ‘CREATE DATE’, datafield: ‘Case_createddate’,renderer: columnsrenderer, cellsrenderer: cellsrenderer,cellclassname: bgr}
]
});
$(‘#jqxLoader’).jqxLoader(‘close’);
$(“#grid”).show();
$(“#dataTable”).show();
}
$(document).ready(function () {$(“#csvExport”).click(function () {
$(“#dataTable”).jqxDataTable(‘exportData’, ‘csv’);
});
$(“#dashboard”).on(‘click’, function () {window.location=’http://221.120.222.66:8004/dashboard.html’;
});
$(“#screenLock”).hide();
// Create a jqxDateTimeInput
$(“#fromdate”).jqxDateTimeInput({ width: ‘130px’, height: ’25px’ });
$(“#todate”).jqxDateTimeInput({ width: ‘130px’, height: ’25px’ });$(“#jqxLoader”).jqxLoader({ theme: ‘energyblue’,width: 100, height: 60, imagePosition: ‘top’});
$(“#csvExport”).jqxButton();
var source = [
“Custom”,
“General”
];
// Create a jqxDropDownList
$(“#r_type”).jqxDropDownList({ source: source, selectedIndex: 1, width: ‘130’, height: ’25’});var source_case = [
“Application”,
“Enquiry” ];
// Create a jqxDropDownList
$(“#c_type”).jqxDropDownList({ source: source_case, selectedIndex: 1, width: ‘130’, height: ’25’});$(“#search”).jqxButton();
$(“#search”).on(‘click’, function () {
$(‘#jqxLoader’).jqxLoader(‘open’);
var fdate = $(“#fromdate”).jqxDateTimeInput(‘getDate’);
var frm_date = $.jqx.dataFormat.formatdate(fdate, ‘yyyy-MM-dd’);var tdate = $(“#todate”).jqxDateTimeInput(‘getDate’);
var to_date = $.jqx.dataFormat.formatdate(tdate, ‘yyyy-MM-dd’);var data1=get_data(frm_date,to_date);
if(data1==false)
{
var url = “default.html”;
$(location).attr(‘href’,url);
}
else
{
creategrid(data1);
}});
});
</script>
<div id=”digBox” class=”diagBox” ></div>
<div id=”screenLock” style=”width:100%; height:100%; top:0px; left:0px; position:absolute; background-color:black; opacity:0.4; z-index:9″></div>
<div id=”formHeader” class=”FormHeader”>
<span id=”infoLbl” class=”infoLables”> REPORTS</span>
<br/>
<input id=”dashboard” type=”button” class=”enqTabButton” value=”DASHBOARD” style=”left: 21px; top: 36px; position: absolute” />
</div>
<br/>
<br/>
<br/>
<br/><div id=”controls” style=”background-color:#D2D7D3″>
<div>
<table style=”width: 100%”>
<tr>
<td style=”width: 264px”></td>
<td style=”text-align:left;width: 98px;” class=”lables”>SELECT :</td>
<td style=”width: 255px;”>
<div id=’r_type’>
</div>
</td>
<td></td>
<td style=”width: 85px;” class=”lables”>FROM DATE :</td>
<td><div id=’fromdate’></div></td>
</tr>
<tr>
<td style=”width: 264px”></td>
<td style=”text-align:left” class=”lables”>SEARCH TYPE :</td>
<td>
<div id=’c_type’>
</div></td>
<td></td>
<td class=”lables”>TO DATE :</td>
<td><div id=’todate’></div></td></tr>
<tr>
<td style=”width: 264px”></td>
<td style=”float:right”></td>
<td>
<div id=”search” style=”width: 59px;”>SEARCH</div>
</td>
</tr>
</table>
</div></div>
<div id=”result”>
<div id=”dataTable”></div>
<br/>
<input type=”button” value=”Export to CSV” id=’csvExport’ />
</div></div>
</body>
</html>
Above is the image in which i maded the sections i just want scroll in records area . dont want the menubar or tool bar to b move down on scroll only the record area to b moved . I hope u got it and pagination to b removed when there is a scroll . how can i make it possible.
-
AuthorPosts