Remove From My Forums
Bind Data HTML Grid

Question
0

Sign in to vote

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
Answered by:

Bind Data HTML Grid

Question

Answers
