Open an AutoComplete Custom Editor on a Cell Click in Spreadsheet

Environment

Product

Progress® Kendo UI® Spreadsheet for jQuery

Progress® Kendo UI® AutoComplete for jQuery

Description

How can I:

1. Register a custom editor for a cell within the Spreadsheet so that the editor is activated when the user clicks the respective cell?
2. The cell does not show custom icons?
3. The editor deactivates when the user clicks any element outside the popup of the editor?

Solution

The following example demonstrates how to implement the desired scenario.

<div id="spreadsheet" style="width: 100%;"></div>

<div data-visible='true' data-role='window' data-modal='true' data-resizable='false' data-title='Select color' id='editWindow' style='display:none'>
  <input id='autocomplete' style='width: 100%;' data-bind='value: value' />
  <div style='margin-top: 1em; text-align: right; display:none'>
    <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>

<script>
  kendo.spreadsheet.registerEditor("color", function(){
    var context, dlg, picker, model;

    function create() {
      if (!dlg) {
        model = kendo.observable({
          value: "",
          ok: function() {
            model.value = $(dlg.element).find("input").val();
            context.callback(model.value);
            dlg.close();
          },
          cancel: function() {
            dlg.close();
          }
        });
        var el = $("#editWindow");
        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();
      }
    }
  });
  $(function() {
    $("#autocomplete").kendoAutoComplete({
      dataSource: ["red","blue","yellow", "purple", "orange", "green", "gray", "black", "brown"],
      filter: "startswith",
      highlightFirst: true,
      select: function(e){
        $(this.element).val(e.item.text());
        $(this.element).closest("div[data-role=window]").find("button:first").click();
      }
    });

    $("#spreadsheet").kendoSpreadsheet({
      select: function(e) {
        var selectedRange = e.range;

        if (selectedRange.values().length === 1 &&
            selectedRange.editor() === 'color') {
          var sender = e.sender;

          setTimeout(function() {
            sender._view.openCustomEditor();

            $('.k-overlay').on('click', function() {
              $("div[data-role=window]").find("button:first").click();
            });
          }, 0);
        }
      },
      columns: 5,
      rows: 10,
      sheetsbar: false,
      toolbar: true,
      sheets: [{
        columns: [{
          width: 100
        },{
          width: 100
        }],
        rows: [{
          cells: [
            { value: "Select color:", bold: true },
            { background: "#fef0cd", editor: "color" }
          ]
        }]
      }]
    });
  });
</script>

<style type="text/css">
  .k-spreadsheet-action-bar {
    display:none !important;
  }

  .k-spreadsheet-editor-button {
    visibility: hidden;
  }
</style>

See Also

• API Reference of the Spreadsheet
• API Reference of the AutoComplete