jube-fork/Jube.App/wwwroot/kendo/examples/spreadsheet/custom-editors.html

<!DOCTYPE html>
<html>
<head>
    <title>Custom cell editors</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.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.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 id="spreadsheet" style="width: 100%;"></div>
  <script>
   kendo.spreadsheet.registerEditor("color", function(){
       var context, dlg, colorpicker, model;
       function create() {
           if (!dlg) {
               model = kendo.observable({
                   value: "#000000",
                   ok: function() {
                       context.callback(model.value);
                       dlg.close();
                   },
                   cancel: function() {
                       dlg.close();
                   }
               });
               var el = $("<div data-visible='true' data-role='window' data-modal='true' data-resizable='false' data-title='Select color'>" +
                          "  <div data-role='flatcolorpicker' data-bind='value: value'></div>" +
                          "  <div style='margin-top: 1em; text-align: right'>" +
                          "    <button style='width: 6em' class='k-button' data-bind='click: ok'>OK</button>" +
                          "    <button style='width: 6em' class='k-button' data-bind='click: cancel'>Cancel</button>" +
                          "  </div>" +
                          "</div>");
               kendo.bind(el, model);
               dlg = el.getKendoWindow();
           }
       }
       function open() {
           create();
           dlg.open();
           dlg.center();
           var value = context.range.value();
           if (value != null) {
               model.set("value", value);
           }
       }
       return {
           edit: function(options) {
               context = options;
               open();
           },
           icon: "k-i-background"
       }
   });

   $(function() {
       $("#spreadsheet").kendoSpreadsheet({
           columns: 5,
           rows: 10,
           sheetsbar: false,
           excel: {
               // Required to enable Excel Export in some browsers
               proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
           },
           sheets: [{
               columns: [{
                   width: 100
               },{
                   width: 100
               }],
               rows: [{
                   cells: [
                       { value: "Select date:", bold: true },
                       { format: "MMMM d, yyyy",
                         background: "#fef0cd",
                         validation: {
                             dataType: "date",
                             showButton: true,
                             comparerType: "between",
                             from: 'DATEVALUE("1/1/1900")',
                             to: 'DATEVALUE("1/1/2100")',
                             allowNulls: true,
                             type: "reject",
                             titleTemplate: "Selected Date validation error",
                             messageTemplate: "Selected Date should be between year 1900 and 2100."
                         } }
                   ]
               }, {
                   cells: [
                       { value: "Select item:", bold: true },
                       { background: "#fef0cd",
                         validation: {
                             dataType: "list",
                             showButton: true,
                             comparerType: "list",
                             from: '"Foo item 1,Bar item 2,Baz item 3"',
                             allowNulls: true,
                             type: "reject"
                         } }
                   ]
               }, {
                   cells: [
                       { value: "Select color:", bold: true },
                       { background: "#fef0cd",
                         editor: "color" }
                   ]
               }]
           }]
       });
   });
  </script>
</div>


    
</body>
</html>