Sample Table ofHTML with JqGrid
<html>
<head>
<script src="ClientGlobalContext.js.aspx" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="/WebResources/ apy_/grid.locale_en.js" type="text/javascript"></script>
<script src="/WebResources/ apy_/jquery.jqgrid.min.js" type="text/javascript"></script>
<link href="/WebResources/ apy_bootstrap.css" rel="stylesheet" type="text/css">
<link href="/WebResources/ apy_/ui.jqgrid.css" rel="stylesheet" type="text/css">
<link href="/WebResources/ apy_/jquery_ui.css" rel="stylesheet" type="text/css">
<style>
.ui-jqgrid tr.jqgrow td {
white-space: normal !important;
height: auto;
width: 1000px;
vertical-align: text-top;
padding-top: 2px;
font-size: 14;
}
.ui-jqgrid .ui-jqgrid-htable th div {
table-layout height: auto;
height: 22px;
white-space: normal !important;
font-size: 14;
}
</style>
<script type="text/javascript">
var getQueryString = function (field) {
var href = decodeURIComponent(window.location.href);
var reg = new RegExp('[?&]' + field + '=([^&#]*)', 'i');
var string = reg.exec(href);
return string ? string[1] : null;
};
function setClientApiContext(xrm, formContext) {
// Optionally set Xrm and formContext as global variables on the page.
window.Xrm = xrm;
window._formContext = formContext;
$(function () {
/* var snrUrl = window._formContext._globalContext.getClientUrl() + "/api/data/v8.2/quotes?$select=createdon,_ apy_pickupzonemapping_value,_ apy_dropoffzonemapping_value, apy_formtype,_ apy_dropoffcountry_value, apy_dropoffzipcode, apy_finalbasepriceadjusted, apy_manualadjustmentstring, apy_ldmloadingmeters,_ apy_markupbyweightbandsshowsuggested_value,_ apy_pickupcountry_value, apy_pickupzipcode, apy_volumem3, apy_weightkg,statecode&$filter= apy_formtype eq " + window._formContext.getAttribute(" apy_formtype").getValue() + " and _customerid_value eq " + window._formContext.getAttribute("customerid").getValue()[0].id.replace("{", "").replace("}", "") + " and apy_parentquote eq null &$orderby=createdon desc";
$.ajax({
type: "GET",
url: snrUrl,
contentType: "application/json; charset=utf-8",
beforeSend: function (XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("OData-MaxVersion", "4.0");
XMLHttpRequest.setRequestHeader("OData-Version", "4.0");
XMLHttpRequest.setRequestHeader("Accept", "application/json");
XMLHttpRequest.setRequestHeader("Prefer", "odata.include-annotations=\"*\"");
},
async: false,
dataType: "json",
scrollBarOffset: 0,
autowidth: false,
forceFit: true,
shrinkToFit: false,
success: successCallBack,
error: errorCallBack
});*/
var orderFetchXML = null;
var customerId = window._formContext.getAttribute("customerid").getValue();
var originatingCompany = window._formContext.getAttribute(" apy_originatingcompany").getValue();
var formType = window._formContext.getAttribute(" apy_formtype").getValue();
if (customerId != null) {
if (formType == 2) {
orderFetchXML = "<fetch version='1.0' output-format='xml-platform' mapping='logical' distinct='false'>" +
" <entity name='quote'>" +
" <attribute name='statecode' />" +
" <attribute name='name' />" +
" <attribute name='statecode' />" +
" <attribute name='createdon' />" +
" <attribute name=' apy_pickupcountry' />" +
" <attribute name=' apy_finalbasepriceadjusted' />" +
" <attribute name=' apy_dropoffcountry' />" +
" <attribute name=' apy_manualadjustmentstring' />" +
" <attribute name=' apy_pickupzonemapping' />" +
" <attribute name=' apy_dropoffzonemapping' />" +
" <attribute name='quoteid' />" +
" <attribute name=' apy_multirequest' />" +
" <attribute name=' apy_ismultipleordersrequired' />" +
" <attribute name=' apy_ismultispot' />" +
" <attribute name=' apy_formtype' />" +
" <attribute name=' apy_pickupzipcode' />" +
" <attribute name=' apy_dropoffzipcode' />" +
" <attribute name=' apy_ldmloadingmeters' />" +
" <attribute name=' apy_weightkg' />" +
" <attribute name=' apy_volumem3' />" +
" <order attribute=' apy_pickupcountry' descending='false' />" +
" <filter type='and'>" +
" <condition attribute=' apy_formtype' operator='eq' value='2' />" +
" <condition attribute=' apy_parentquote' operator='null' />" +
" <condition attribute='customerid' operator='eq' value='" + customerId[0].id + "' />" +
" </filter>" +
" </entity>" +
"</fetch>";
}
else {
if (customerId != null && originatingCompany != null) {
orderFetchXML = "<fetch version='1.0' output-format='xml-platform' mapping='logical' distinct='false'>" +
" <entity name='quote'>" +
" <attribute name='statecode' />" +
" <attribute name='name' />" +
" <attribute name='statecode' />" +
" <attribute name='createdon' />" +
" <attribute name=' apy_pickupcountry' />" +
" <attribute name=' apy_finalbasepriceadjusted' />" +
" <attribute name=' apy_dropoffcountry' />" +
" <attribute name=' apy_manualadjustmentstring' />" +
" <attribute name=' apy_pickupzonemapping' />" +
" <attribute name=' apy_dropoffzonemapping' />" +
" <attribute name='quoteid' />" +
" <attribute name=' apy_multirequest' />" +
" <attribute name=' apy_ismultipleordersrequired' />" +
" <attribute name=' apy_ismultispot' />" +
" <attribute name=' apy_formtype' />" +
" <attribute name=' apy_pickupzipcode' />" +
" <attribute name=' apy_dropoffzipcode' />" +
" <attribute name=' apy_ldmloadingmeters' />" +
" <attribute name=' apy_weightkg' />" +
" <attribute name=' apy_volumem3' />" +
" <order attribute='createdon' descending='true' />" +
" <filter type='and'>" +
" <condition attribute=' apy_formtype' operator='ne' value='2' />" +
" <condition attribute='customerid' operator='eq' value='" + customerId[0].id + "' />" +
" <filter type='or'>" +
" <filter type='and'>" +
" <condition attribute=' apy_parentquote' operator='not-null' />" +
" <condition attribute=' apy_ismultipleordersrequired' operator='eq' value='1' />" +
" </filter>" +
" <filter type='and'>" +
" <condition attribute=' apy_parentquote' operator='null' />" +
" <condition attribute=' apy_ismultipleordersrequired' operator='eq' value='0' />" +
" </filter>" +
" </filter>" +
" <condition attribute=' apy_originatingcompany' operator='eq' value='" + originatingCompany[0].id + "' />" +
" </filter>" +
" </entity>" +
"</fetch>";
}
}
if (orderFetchXML != null) {
var encodedFetchXML = encodeURIComponent(orderFetchXML);
var req = new XMLHttpRequest();
req.open("GET", window._formContext._globalContext.getClientUrl() + "/api/data/v8.2/quotes?fetchXml=" + encodedFetchXML, false);
req.setRequestHeader("OData-MaxVersion", "4.0");
req.setRequestHeader("OData-Version", "4.0");
req.setRequestHeader("Accept", "application/json");
req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
req.setRequestHeader("Prefer", "odata.include-annotations=\"*\"");
req.onreadystatechange = function () {
if (this.readyState === 4) {
req.onreadystatechange = null;
if (this.status === 200) {
//debugger;
var results = JSON.parse(this.response);
if (results.value.length > 0) {
successCallBack(results);
}
} else {
Xrm.Utility.alertDialog(this.statusText);
}
}
};
req.send();
}
}
});
function successCallBack(result) {
var resultJSON = [];
result.value.forEach(function (eachRow) {
//debugger;
var JSONObj = {};
JSONObj._ apy_pickupcountry_value = eachRow["_ apy_pickupcountry_value@OData.Community.Display.V1.FormattedValue"] == undefined ? "" : eachRow["_ apy_pickupcountry_value@OData.Community.Display.V1.FormattedValue"];
JSONObj._ apy_pickupzonemapping_value = eachRow["_ apy_pickupzonemapping_value@OData.Community.Display.V1.FormattedValue"] == undefined ? "" : eachRow["_ apy_pickupzonemapping_value@OData.Community.Display.V1.FormattedValue"];
JSONObj. apy_pickupzipcode = eachRow. apy_pickupzipcode;
JSONObj._ apy_dropoffcountry_value = eachRow["_ apy_dropoffcountry_value@OData.Community.Display.V1.FormattedValue"] == undefined ? "" : eachRow["_ apy_dropoffcountry_value@OData.Community.Display.V1.FormattedValue"];
JSONObj._ apy_dropoffzonemapping_value = eachRow["_ apy_dropoffzonemapping_value@OData.Community.Display.V1.FormattedValue"] == undefined ? "" : eachRow["_ apy_dropoffzonemapping_value@OData.Community.Display.V1.FormattedValue"];
JSONObj. apy_dropoffzipcode = eachRow. apy_dropoffzipcode;
JSONObj. apy_finalbasepriceadjusted = eachRow[" apy_finalbasepriceadjusted@OData.Community.Display.V1.FormattedValue"] == undefined ? "" : eachRow[" apy_finalbasepriceadjusted@OData.Community.Display.V1.FormattedValue"];
JSONObj. apy_manualadjustmentstring = eachRow. apy_manualadjustmentstring;
JSONObj.statecode = eachRow["statecode@OData.Community.Display.V1.FormattedValue"] == undefined ? "" : eachRow["statecode@OData.Community.Display.V1.FormattedValue"];
JSONObj. apy_ldmloadingmeters = eachRow. apy_ldmloadingmeters;
JSONObj. apy_volumem3 = eachRow. apy_volumem3;
JSONObj. apy_weightkg = eachRow. apy_weightkg;
JSONObj.name = eachRow.name;
JSONObj.createdon = eachRow["createdon@OData.Community.Display.V1.FormattedValue"] == undefined ? "" : eachRow["createdon@OData.Community.Display.V1.FormattedValue"];
resultJSON.push(JSONObj);
});
var grid = $("#JQGridLoad").jqGrid({ //set your grid id
data: resultJSON, //insert data from the data object we created above
datatype: 'local',
contentType: 'application/json; charset=utf-8',
//Pass Coloumn Name Below
colNames: ['Quote Name', 'Pick Up Country', 'Pick Up Zone Mapping', 'Pick Up ZipCode', 'Drop Off Country', 'Drop Off Zone Mapping', 'Drop Off ZipCode', 'Final Rate', 'Mark-up %', 'Status', 'LDM', 'Volume', 'Weight(Kg)', 'Created On'], //define column names
colModel: [
{ name: 'name', index: 'name', key: true, width: 140 },
{ name: '_ apy_pickupcountry_value', index: '_ apy_pickupcountry_value', key: true, width: 120 },
{ name: '_ apy_pickupzonemapping_value', index: '_ apy_pickupzonemapping_value', key: true, width: 180 },
{ name: ' apy_pickupzipcode', index: ' apy_pickupzipcode', key: true, width: 120 },
{ name: '_ apy_dropoffcountry_value', index: '_ apy_dropoffcountry_value', key: true, width: 120 },
{ name: '_ apy_dropoffzonemapping_value', index: '_ apy_dropoffzonemapping_value', key: true, width: 180 },
{ name: ' apy_dropoffzipcode', index: ' apy_dropoffzipcode', key: true, width: 140 },
{ name: ' apy_finalbasepriceadjusted', index: ' apy_finalbasepriceadjusted', key: true, width: 80 },
{ name: ' apy_manualadjustmentstring', index: ' apy_manualadjustmentstring', key: true, width: 80 },
{ name: 'statecode', index: 'statecode', key: true, width: 60 },
{ name: ' apy_ldmloadingmeters', index: ' apy_ldmloadingmeters', key: true, width: 60 },
{ name: ' apy_volumem3', index: ' apy_volumem3', key: true, width: 80 },
{ name: ' apy_weightkg', index: ' apy_weightkg', key: true, width: 100 },
{ name: 'createdon', index: 'createdon', key: true, width: 140 }], //define column models
celledit: false,
viewrecords: true,
gridview: true
});
jQuery("#JQGridLoad").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false });
grid.jqGrid('filterToolbar');
//jQuery("#JQGridLoad").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: "" });
}
$(function ($) {
$('.ui-jqgrid .ui-jqgrid-bdiv').css('overflow-x', 'hidden');
});
function errorCallBack(result) {
alert(result.data);
}
////// getAccountServices();
// Add script logic here that uses xrm or the formContext.
}
</script>
<meta>
<meta>
<meta>
<meta>
<meta>
<meta>
<meta>
<meta>
<meta>
<meta>
<meta>
<meta>
<meta>
<meta>
<meta>
<meta>
<meta>
<meta>
<meta>
<meta>
<meta>
</head>
<body style="overflow-wrap: break-word;" onfocusout="parent.setEmailRange();">
<table id="JQGridLoad"></table>
<div id="pager2" style="font-family: undefined;"></div>
</body>
</html>
Comments
Post a Comment