Sunday, October 28, 2012

Binding html editable Table to Rest Service result



Binding html editable Table to Rest Service result

<html>
<head>
    <title>Dynamic Tables in HTML</title>
    <script type="text/javascript" src="Scripts/SDK.REST"></script>
    <script type="text/javascript" src="../ClientGlobalContext.js.aspx"></script>
    <script type="text/javascript" src="Scripts/json2"></script>
    <script type="text/javascript">
        var recordsGrid;
        document.onreadystatechange = function () {
            if (document.readyState == "complete") {
                recordsGrid = document.getElementById("recordsGrid");
                retrieveRecords();
            }
        };

        function retrieveRecords() {
            debugger;
            SDK.REST.retrieveMultipleRecords("new_businesstier", "$select=new_name,new_businesstierId,new_MinValue,new_Percent", results, errorHandler, oncomplete)
        }
        function results(result) {
            debugger;
            for (var i = 0; i < result.length; i++) {
                var aResult = result[i];
                var row = document.createElement("tr");
                var cell1 = document.createElement("td");
                // setElementText(cell1, (aResult.hpcrm_name == null) ? "" : aResult.hpcrm_name);
                cell1.innerText = aResult.hpcrm_name;
                row.appendChild(cell1);
                var cell2 = document.createElement("td");
                //setElementText(cell2, (aResult.hpcrm_Percent == null) ? "" : aResult.hpcrm_Percent);
                //cell2.innerText = aResult.hpcrm_Percent;
                cell2.innerHTML = "<INPUT onchange=\"javascript:changeContent('cell2" + i + "');\" id=\"cell2" + i + "\" type=text value=\"" + aResult.hpcrm_Percent + "\">";
                //cell2.firstChild.focus();
                //alert(cell2.innerText);
                row.appendChild(cell2);
                recordsGrid.appendChild(row);
            }
        }
        function oncomplete() {
            //OnComplete handler
        }
        function changeContent(tablecell) {
            debugger;
   var cell = document.getElementById(tablecell);
            alert(cell.value);
        }
        function submitNewName(textfield) {
            alert(textfield.value);
            textfield.parentNode.innerHTML = textfield.value;
        }
        function errorHandler(error) {
            writeMessage(error.message);
        }


        function changeimg() {
       
            alert("hi");
        }

    </script>
</head>
<body>
    <div align="center">
        <select id="listimg" onchange="changeimg()">
            <option value="image1">Percent</option>
            <option value="image2">Number</option>
        </select>
    </div>
    <div id="tableContainer">
        <table id="recordsTable" rules="groups" summary="This table displays the records retrieved.">
            <tbody id="recordsGrid" />
        </table>
    </div>
</body>
</html>
 

No comments:

Post a Comment