Friday, 23 November 2012

IndexedDB Example


 Here is Example for IndexedDB for Insert/View

JS For IndexedDB.js

var dbData;
var IndexedDB = window.window.indexedDB || window.webkitIndexedDB ||
                        window.mozIndexedDB;
var IDBTransactionModes = { "READ_ONLY": "readonly", "READ_WRITE": "readwrite",
                                         "VERSION_CHANGE": "versionchange" };
var v = 1;
var ID = 0;
function Create() {

    var request = IndexedDB.open("TestDB", v);
    // Object Store only created on version change. and
        this event will fire on version change.
    request.onupgradeneeded = function (e) {
        var db = e.target.result;
        if (db.objectStoreNames.contains("tblperson")) {
            var storeReq = db.deleteObjectStore("tblperson");
        }
        var store1 = db.createObjectStore("tblperson", { keyPath: "ID" });
    }

    request.onsuccess = function (e) {
        var db = e.target.result;
        if (v != db.version && db.setVersion) {
            var setVrequest = db.setVersion(v);

            setVrequest.onsuccess = function (e) {
                debugger;
                if (db.objectStoresName.contains("tblperson")) {
                    var storeV = db.createObjectStore("tblperson", { keyPath: "ID" });
                }

                db.createObjectStore("tblperson", { keyPath: "ID" });
                db.close();
            }
        }
        else {

        }
        setVrequest.onerror = function (e) { alert("Error in Set version: " + e); }
    }

    request.onerror = function (e) {
        debugger;
        var db = e.target.result;

    }

}

IndexedDB.onerror = function (e) {
    alert(e)
};


function DeleteDB() {
    var deleteRequest = IndexedDB.deleteDatabase("TestDB");
    deleteRequest.onsuccess = function (e) {
        alert("DB Deleted SuccessFully");
    }
    deleteRequest.onblocked = function (e) {
        alert("blocked");
    }
    deleteRequest.onerror = function (e) { alert("Error in Dekete Database: " + e); }
}

function AddRecord(Name, Desc, City) {
    var request = IndexedDB.open("TestDB", v);
    request.onsuccess = function (e) {
        var db = e.target.result;
        var trans = db.transaction(["tblperson"], IDBTransactionModes.READ_WRITE);
        var store = trans.objectStore("tblperson");
        ID++;
        var data = {
            "ID": ID,
            "Name": Name,
            "Desc": Desc,
            "City": City
        };

        var insert = store.put(data);

        insert.onsuccess = function (e) {
            // alert("data Inserted Successfully");
            db.close();
            ViewRecord();
        }
        insert.onerror = function (e) {
            debugger;
            alert("Error while inserting data, " + e);
        }
    }
    request.onerror = function (e) {
        debugger;
    }
}

function ViewRecord() {

    var request = IndexedDB.open("TestDB", v);

    request.onsuccess = function (e) {
        var db = e.target.result;
        var Data = new Array();
        db.onversionchange = function (evt) {
            alert("versionchange");
        };

        var trans = db.transaction(["tblperson"], IDBTransactionModes.READ_ONLY);
        var store = trans.objectStore("tblperson");

        var keyRange = IDBKeyRange.lowerBound(0);
        var cursorRequest = store.openCursor(keyRange);
        cursorRequest.onsuccess = function (e) {
            var result = e.target.result;
            if (!!result == false) {
                return;
            }
            //debugger;
            Data.push(result.value);
            result.continue();
        };

        viewDataGrid(Data);
        cursorRequest.onerror = function () {
            debugger;
        }
    };

    request.onerror = function (e) {
        debugger;
    };
}




// Kendo UI Grid
function viewDataGrid(dbData) {
    $("#dvData").kendoGrid({
        dataSource: {
            data: dbData
        },
        selectable: true,
        resizable: true,
        reorderable: true,
        height: 400,
        columns: [{ field: "ID", width: "15%", title: "ID" },
                               { field: "Name", width: "30%", title: "Name" },
                               { field: "Desc", width: "25%", title: "Designation" },
                               { field: "City", width: "30%", title: "City"}]
    });


HTML:
<script src="Scripts/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/IndexedDB.js" type="text/javascript"></script>
<script src="Scripts/kendo.web.min.js" type="text/javascript"></script>
<link href="Styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="Styles/kendo.common.min.css" rel="stylesheet" type="text/css" />


<script type="text/javascript">
        $(window).load(Create);
        $(document).ready(function () {
            $("#btnDeleteDB").click(function () {
                DeleteDB();
            });
            $("#btnView").click(function () {
                ViewRecord();
            });
            $("#btnAdd").click(function () {
                AddRecord($("#txtName").val(), $("#txtDesc").val(), $("#txtCity").val());
            });
        });      

 </script>


<div>
<input type="button" id="btnDeleteDB" value="Delete DB" />
</div>
<table>
   <tr>
     <td align="right">
       Name:
      </td>
      <td>
        <input type="text" id="txtName" />
       </td>
   </tr>
        <tr>
            <td align="right">
                Designation
            </td>
            <td>
                <input type="text" id="txtDesc" />
            </td>
        </tr>
        <tr>
            <td align="right">
                City
            </td>
            <td>
                <input type="text" id="txtCity" />
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="button" value="Add" id="btnAdd" />
                <input type="button" value="View" id="btnView" />
            </td>
        </tr>
    </table>
    <br />
    <br />
    <br />
    <div id="dvData">
        <%--For Kendo Grid--%>

    </div>

Here is Link for IndexedDB Supported browser

No comments:

Post a comment