Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta name="description" content="SOF answer custom editor 12-8-2016."/>
    <title>Binding to local data</title>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>`
    <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
    <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.default.min.css" rel="stylesheet" />
</head>
<body>
​
        <div id="grid"></div>
        
        <!-- popup editor template -->
        <script id="popup_editor" type="text/x-kendo-template">
            <div>   
              <div class="k-edit-label">
                  <label for="FirstName">First Name</label>
              </div>
​
              <input type="text" class="k-input k-textbox" name="FirstName" data-bind="value:FirstName">
            </div>
            
            <div>
              <div class="k-edit-label">
                  <label for="Age">Age</label>
              </div>
​
              <input type="text" name="Age" data-type="number" data-bind="value:Age" data-role="numerictextbox" />
​
            </div>
          
        </script>
        
        <script>
​
            $(document).ready(function() {
                $("#grid").kendoGrid({
                    dataSource: {
                        data: [{FirstName: "John", Age: 20}, {FirstName: "Betty", Age: 30}],
                        schema: {
                            model: {
                                fields: {
                                    FirstName: { type: "string" },
                                    Age: { type: "number" }
                                }
                            }
                        },
                        pageSize: 10
                    },
                    height: 450,
                    scrollable: true,
                    sortable: true,
                    pageable: true,
                    editable: {
                        mode: "popup",
                        template: kendo.template($("#popup_editor").html())
                    },
                    toolbar: ["create"],
                    columns: [
                        {
                            field: "FirstName",
                            width: 100
                        },
                        {
                            field: "Age",
                            width: 100
                        },
                        {
                            command: ["edit", "destroy"],
                            title: "&nbsp;",
                            width: "200px"
                        }
                    ]
                });
            });
        </script>
    </div>
​
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
PoulTurpro
0viewers