locked
Bind Data HTML Grid RRS feed

  • Question

  • hi ,

    how to display crm records in html grids. 

    can anybody send sample code

    Friday, 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