All Components

Grid / Working Offline

Information

This example demonstrates the offline support of the Kendo DataSource.

  1. 1. Use the switch to go in offline mode.
  2. 2. Create, update or destroy grid items.
  3. 3. Use the switch to go in online mode. The data source will sync all changes made while offline.

Online

Console

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>Working Offline</title> 
  <meta charset="utf-8"> 
  <link href="../content/shared/styles/examples-offline.css" rel="stylesheet"> 
  <link href="../../styles/kendo.common.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.rtl.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.default.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet"> 
  <script src="../../js/jquery.min.js"></script> 
  <script src="../../js/kendo.all.min.js"></script> 
  <script src="../content/shared/js/console.js"></script> 
  <script>
        
    </script> 
 </head> 
 <body> 
  <a class="offline-button" href="../index.html">Back</a> 
  <div id="example"> 
   <div class="box wide"> 
    <h4>Information</h4> 
    <p>This example demonstrates the offline support of the Kendo DataSource.</p> 
    <ol> 
     <li>1. Use the switch to go in offline mode.</li> 
     <li>2. Create, update or destroy grid items.</li> 
     <li>3. Use the switch to go in online mode. The data source will sync all changes made while offline.</li> 
    </ol> 
   </div> 
   <div class="demo-section k-content wide"> 
    <h4>Online</h4> 
    <div style="padding-bottom: 30px;"> 
     <input id="online" type="checkbox" checked> 
    </div> 
    <div id="grid"></div> 
    <div style="padding-top: 1em;"> 
     <h4>Console</h4> 
     <div class="console"></div> 
    </div> 
   </div> 
   <script>
        var dataSource = new kendo.data.DataSource({
            offlineStorage: "offline-kendo-demo",
            transport: {
                read:  {
                    url: "//demos.telerik.com/kendo-ui/service/products",
                    dataType: "jsonp"
                },
                update: {
                    url: "//demos.telerik.com/kendo-ui/service/products/update",
                    dataType: "jsonp"
                },
                destroy: {
                    url: "//demos.telerik.com/kendo-ui/service/products/destroy",
                    dataType: "jsonp"
                },
                create: {
                    url: "//demos.telerik.com/kendo-ui/service/products/create",
                    dataType: "jsonp"
                },
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)};
                    }
                }
            },
            requestStart: function(e) {
                if (e.type != "read") {
                    kendoConsole.log(kendo.format("Request start ({0})", e.type));
                }
            },
            requestEnd: function(e) {
                if (e.type != "read") {
                    kendoConsole.log(kendo.format("Request end ({0})", e.type));
                }
            },
            batch: true,
            pageSize: 20,
            schema: {
                model: {
                    id: "ProductID",
                    fields: {
                        ProductID: { editable: false, nullable: true },
                        UnitPrice: { type: "number", validation: { min: 1} },
                        Discontinued: { type: "boolean" },
                        UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                    }
                }
            }
        });

        var online = localStorage["kendo-grid-online"] == "true" || localStorage["kendo-grid-online"] === undefined;

        kendoConsole.log("Working " + (online ? "kendo-grid-online" : "offline"));

        if (!online) {
            $("#online").removeAttr("checked");
            dataSource.online(false);
        }

        $("#online").kendoMobileSwitch({
            value: online,
            change: function() {
                online = this.value();

                kendoConsole.log("Working " + (online ? "kendo-grid-online" : "offline"));

                localStorage["kendo-grid-online"] = online;

                dataSource.online(online);
            }
        });

        $("#grid").kendoGrid({
            dataSource: dataSource,
            pageable: {
                refresh: true
            },
            height: 450,
            toolbar: [ "create" ],
            columns: [
                "ProductName",
                { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
                { command: ["edit", "destroy"], title: " ", width: "250px" }
            ],
            editable: "inline"
        });
    </script> 
  </div>   
 </body>
</html>