New to Kendo UI for jQuery? Download free 30-day trial

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? 1. The cell does not show custom icons? 1. 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

In this article