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 charset=utf-8 />
<title>Kendo UI Baseline</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
  
<!--Kendo UI Styles-->
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.blueopal.min.css" rel="stylesheet"/>
​
</head>
<body>
  
​
  
<!--Scripts-->
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.web.min.js"></script>
<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
  <script>
    var datavalue = [];
    datavalue.push({TypeValue: "---" });
    datavalue.push({ TypeValue: "New" });
    datavalue.push({ TypeValue: "Important" });
    datavalue.push({ TypeValue: "Remark" });
    datavalue.push({ TypeValue: "Complaint" });
          
    var dropDownDataSource = new kendo.data.DataSource({
        data: datavalue,
        schema: {
            model: {
                fields: {
                    TypeValue: { type: "string" }
                        }
                    }
                }
    });    
  </script>
  <script id="popup_editor" type="text/x-kendo-template">
            <p>Custom editor template</p>
            
            <div class="k-edit-label">
                <label for="Date">Date</label>
            </div>
            <!-- datepicker editor for field: "Date" -->
            <input type="text" 
                name="Date" 
                data-type="date" 
                data-bind="value:BirthDate" 
                data-role="datepicker" />
                
            <div class="k-edit-label">
                <label for="Type">Type</label>
            </div>
            <!-- drop down list editor for field: "Type" -->
            <input name="TypeValue" 
                data-bind="value:TypeValue" 
                data-value-field="TypeValue" 
                data-text-field="TypeValue" 
                data-source="dropDownDataSource" 
                data-role="dropdownlist" />
                
            <div class="k-edit-label">
                <label for="NoteBy" style="color: red;">NoteBy</label>
            </div>
            <!-- textbox editor for field: "NoteBy" -->
                  <input type="text" class="k-input k-textbox" name="NoteBy" data-bind="value:NoteBy"/>
                  
            <div class="k-edit-label">
                <label for="Description">Description</label>
            </div>
                  <input type="text" class="k-input k-textbox" name="Description" data-bind="value:Description"/>
            
        </script>
​
​
                <div id="NoteGrid" style="height: 380px"></div>
​
​
            <script>
    $(document).ready(function() {
      
        $("#NoteGrid").kendoGrid({ // create Grid from div HTML element Kendo
            dataSource: {
                data: [],
                    schema: {
                        model: {
                            fields: {
                                Date: { type: "date" },
                                TypeValue: { type: "string"},
                                NoteBy: { type: "string" },
                                Description: { type: "string" }
                                    }
                                }
                            }
                        },
            selectable: "row",
            scrollable: true,
            navigatable: true,
            sortable: true,
            resizable: true,
            groupable: false,
            filterable: true,
            columnMenu: true,
            columns: [
            {
                field: "Date",
                title: "Date",
                width: 80
            },
            {
                field: "TypeValue",
                title: "Type",
                width: 60
            },
            {
                field: "NoteBy",
                title: "Note By",
                width: 80
            },
            {
                field: "Description",
                title: "Description",
                width: 100
            },
            {
                command: [
                { name: "edit",
                    text: { update: "Save" }
                }],
                hidden: true
            }
            ],
            toolbar: ["create"],
            edit: function (e) {
//                $("#editor").kendoEditor();
                e.container.data("kendoWindow").title("Add Note");
                e.container.find('.k-grid-update').css('float', 'right');
                e.container.find('.k-grid-cancel').css('display', 'none');
            },
            editable: {
                mode: "popup",
                template: kendo.template($("#popup_editor").html())
            },
            save: function (e) {
                var grid = $("#NoteGrid").data("kendoGrid");
                grid.refresh();  
            },
            detailInit: function (e) {
                var grid = $("#NoteGrid").data("kendoGrid");
                grid.element.find('tbody tr:first').addClass('k-state-selected')
            }
        });
    });
            
            </script>
  
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers