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

Popular posts from this blog

Basic Plugin Code in D365 using C#

CURD (Create, Update, Retrieve and Delete) Operation in D365 using Power Shell Script

Meta Data Using WebApiRequest