Answered by:
Bind Data HTML Grid

Question
-
hi ,
how to display crm records in html grids.
can anybody send sample codeFriday, November 29, 2013 6:55 AM
Answers
-
Hi,
You would need to have form a oData query and a image gif file for refresh purpose if required which you can use in this example.
<html> <head> <meta http-equiv="X-UA-Compatible" content="IE=8" /> <title>Document List</title> <style type="text/css" id="customstyle"> body { font-family: Segoe UI, Tahoma, Arial; font-size: 11px; text-decoration: none; padding: 0px; margin: 0px; color: #000000; } table { border-bottom: #a1a5aa 1px solid; border-left: #a1a5aa 1px solid; border-top: #a1a5aa 1px solid; border-right: #a1a5aa 1px solid; background-color: White; } th { background-color: rgb(246, 248, 250); /*#F6F8FA;*/ background-image: url("/_imgs/theme/Outlook14Silver/GridColumnGradient.png?ver=1386570482"); border: #a1a5aa; outline: invert , none, medium; font-weight: normal; text-align: left; } th, td { border-bottom: 1px solid #a1a5aa; vertical-align: top; text-decoration: none; overflow: hidden; text-overflow: ellipse; white-space: nowrap; } td.col, th.col { width: 250px !important; min-width: 250px; } th.colRefresh { width: 100%; background-image: url("/imgs/refresh.png"); background-; } a { color: #3b3b3b; text-decoration: none; } a:hover { text-decoration: underline; } h3 { font-size: 24px; font-weight: lighter; text-indent: 10; margin-right: 10px; padding-right: 10px; margin-left: 6px; padding-left: 6px; text-decoration: none; color: #999; padding-top: 0px; font-family: "Segoe UI" , "Segoe UI Light" , "Segoe UI Semibold" , "Segoe UI Symbol" , "Segoe Semibold"; } </style> </head> <body> <script type="text/javascript" src="../../ClientGlobalContext.js.aspx"></script> <script type="text/javascript" src="../SDK.REST.js"></script> <script type="text/javascript" src="../json2.js"></script> <script type="text/jscript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript"> var dataGrid; //The tbody element of the recordsTable var dataRetrieved; //The span displaying the number of record records retrieved. var recordID; var totalCount = 0; document.onreadystatechange = function () { if (document.readyState == "complete") { //debugger; recordID = parent.window.Xrm.Page.data.entity.getId(); // sampleid "799HSA8F-22JS-K925-927Y-76326H6487YG" dataGrid = document.getElementById("dataGrid"); dataRetrieved = document.getElementById("dataRetrieved"); retrieveMyData(); } } function retrieveMyData() { cleardataGrid(); // Add your oData Query here var options = "?$select=new_field1,new_field2,new_field3&$filter=YourEntityId eq guid'" + recordID + "'"; retrieveMultipleRecords("EntityName", options, retrieveMyDataCallBack, function (error) { alert(error.message); }, MyDataRetrieveComplete); } function retrieveMultipleRecords(type, options, successCallback, errorCallback, OnComplete) { var serverURL = Xrm.Page.context.getClientUrl() + "/XRMServices/2011/OrganizationData.svc/"; var req = new XMLHttpRequest(); req.open("GET", serverURL + type + "Set" + options, false); req.setRequestHeader("Accept", "application/json"); req.setRequestHeader("Content-Type", "application/json; charset=utf-8"); req.onreadystatechange = function () { if (this.readyState == 4 /* complete */) { if (this.status == 200) { this.onreadystatechange = null; var returned = JSON.parse(this.responseText, SDK.REST._dateReviver).d; successCallback(returned.results); if (returned.__next != null) { var queryOptions = returned.__next.substring((serverURL + type + "Set").length); retrieveMultipleRecords(type, queryOptions, successCallback, errorCallback, OnComplete); } else { OnComplete(); } } else { errorCallback(SDK.REST._errorHandler(this)); } } }; req.send(); } function retrieveMyDataCallBack(retrievedRecords) { var totalrecordCount = totalCount + retrievedRecords.length; for (var i = 0; i < retrievedRecords.length; i++) { var variable1 = retrievedRecords[i]; //do you validations here //Add the records to the cells in the grid var row = document.createElement("tr"); row.setAttribute("style", "'background:#fff;' id='fileNameTd'><td style='height:20px; line-height:20px; border-bottom:1px solid #dbdee1; padding- left:10px;'"); var Cell1 = document.createElement("td"); Cell1.setAttribute("class", "col"); Cell1.setAttribute("style", "height: 23px; font-weight: normal; text-align: left; padding-left: 10px!important; line-height: 20px; text-align: left;' valign='top'"); setElementText(Cell1, retrievedRecords[i].new_field1); row.appendChild(Cell1); var Cell2 = document.createElement("td"); Cell2.setAttribute("class", "col"); Cell2.setAttribute("style", "height: 23px; font-weight: normal; text-align: left; padding-left: 10px!important; line-height: 20px; text-align: left;' valign='top'"); setElementText(Cell2, retrievedRecords[i].new_field2); row.appendChild(Cell2); var Cell3 = document.createElement("td"); Cell3.setAttribute("class", "col"); Cell3.setAttribute("style", "height: 23px; font-weight: normal; text-align: left; padding-left: 10px!important; line-height: 20px; text-align: left;' valign='top'"); setElementText(Cell3, retrievedRecords[i].new_field3); row.appendChild(Cell3); var emptyCell = document.createElement("td"); emptyCell.setAttribute("class", "col"); emptyCell.setAttribute("style", "height: 23px; font-weight: normal; text-align: left; padding-left: 10px!important; line-height: 20px; text-align: left;' valign='top'"); var emptyCellval = " "; setElementText(emptyCell, emptyCellval); row.appendChild(emptyCell); dataGrid.appendChild(row); } } } function MyDataRetrieveComplete() { } function cleardataGrid() { totalCount = 0; for (var i = dataGrid.rows.length - 1; i >= 0; i--) { dataGrid.deleteRow(i); } } function setElementText(element, text) { if (typeof (element.innerText) != "undefined") { element.innerText = text; } else { element.textContent = text; } } function queryString(search_for) { var query = window.location.search.substring(1); var parms = query.split('&'); for (var i = 0; i < parms.length; i++) { var pos = parms[i].indexOf('='); if (pos > 0 && search_for == parms[i].substring(0, pos)) { return parms[i].substring(pos + 1); ; } } return ""; } </script> <div id="tableContainer" style='margin: -7px 0 0 -7px; padding: 0; height: 100%; width: 100%'> <table id="recordsTable" summary="This table displays the records retrieved." border='0' width='101%' cellpadding='0' cellspacing='0' style='font: normal 11px Segoe UI, Tahoma, Arial; border-bottom: 0px;'> <thead> <tr> <th style='background: #f5f7f9; height: 23px; font-weight: normal; text-align: left; padding-left: 10px!important; border-bottom: 1px solid #a5acb5; border-top: 1px solid #a5acb5; border-left: 1px solid #a5acb5; border-right: 1px solid #a5acb5; line-height: 20px; text-align: left;' valign='top'> Column 1 Name </th> <th style='background: #f5f7f9; height: 23px; font-weight: normal; text-align: left; padding-left: 10px!important; border-bottom: 1px solid #a5acb5; border-top: 1px solid #a5acb5; border-right: 1px solid #a5acb5; line-height: 20px; text-align: left;' valign='top'> Column 2 Name </th> <th style='background: #f5f7f9; height: 23px; font-weight: normal; text-align: left; padding-left: 10px!important; border-bottom: 1px solid #a5acb5; border-top: 1px solid #a5acb5; border-right: 1px solid #a5acb5; line-height: 20px; text-align: left;' valign='top'> Column 3 Name </th> <th style='background: #f5f7f9; height: 23px; font-weight: normal; text-align: left; padding-left: 10px!important; border-bottom: 1px solid #a5acb5; border-top: 1px solid #a5acb5; border-right: 1px solid #a5acb5; line-height: 20px; text-align: left;' valign='top'> <img style="float: right" onclick="location.reload(true);" alt="Refresh" src="/_imgs/grid/grid_refresh.gif" width="16" height="16" /> </th> </tr> </thead> <tbody id="dataGrid"> </tbody> </table> </div> </body> </html>
I hope this resolves your query.
Thanks
Anubhav Bajpai
- Marked as answer by kMAT1 Tuesday, December 3, 2013 6:50 AM
Friday, November 29, 2013 8:18 AM