Spreadsheet custom editors

[petyosi]

The most requested UV item for the widget - rightfully so. Spreadsheet is all about data entry

http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback/suggestions/10069785-spreadsheet-custom-editors

I think that there is plenty to explore here, but for we can start with date/time pickers -
#1675 and predefined items from a list - #1673

Note: the editors in question will be activated only when the cell enters an edit mode. We should also figure out the formula bar behavior when such cell is entered.

[mishoo]

One question that comes to mind, should we allow free text editing as well?

[gyoshev]

Note: the editors in question will be activated only when the cell enters an edit mode.

By the way, both Google Docs and MS Excel provide editing controls without entering edit mode:

Maybe we should consider allowing this?

[petyosi]

@mishoo, don't know, actually. I can definitely see a case for the opposite behavior (limiting choices to a predefined set). Free text editing + choices sounds like a combobox kind of editor to me. If we support both editors and free form text editing, then we should figure out how to handle formula entry. Or, perhaps this is not an issue at all?

@gyoshev - these look more like custom editor indicators, could we treat them as such? The rendering can handle such things, biggest complication as usual is the frozen panes.

[mishoo]

@Underlog about the formula input, it should probably remain as is — allow free text there.

I couldn't find out in Google Docs how to enable custom editors, other than by data validation. When done like this, it still allows free text input; the popup is just a helper. And the formula bar remains a plain text field. I vote we do the same.

[gyoshev]

@mishoo AFAIK that's the way to enable them in Excel, too. +1 for the GDocs behavior, quite usable.

@Underlog I believe these can be rendered like the filtering indicators, and allow the popups to be populated with the necessary UI (static / virtual list or exotics). This will also cater for the ASP.NET AJAX integration. I'm not sure if we want to reuse existing components outside the popup?

[petyosi]

I like the google docs approach (validation = editor helper), too. The main advantage here is that this will give us persistence out of the box. Don't you think, however, that this is a design decision suitable for a product targeting end users?

[tsvetomir]

As usual we have to leave the option for the developers to come up with their own implementations.

Perhaps an event or a set of events will be sufficient to allow implementing custom "custom editors". Templates don't seem like a good fit for the moment, due to the dynamic nature of the UI virtualization.

[mishoo]

In this case I don't think we can rely on validation alone, we'd have to keep the cell editor in a different property. How about an API like this:

kendo.spreadsheet.registerEditor("foo", {
    edit: function(range, pos, callback) {
        // opens the editor for the given cell.  I'm thinking pos
        // will be useful to position it near the dropdown button
        // (if it's a popup editor) but it could be a dialog as
        // well.  We leave it to users.

        // the editor should invoke callback(value) when a value
        // has been selected
    },
    close: function() {
        // hide the editor
    },
    icon: "iconClass" // for the button
});

and we'll store the editor type in a new property bag, so one can say e.g.

sheet.range("A5").editor("foo");

[mishoo]

Started implementation on branch spread-editors. Currently it has the date picker (can be seen in playground/spreadsheet/sheet.html on cells E5:E8). It's enabled by the showButton option of the validator (checkbox yet to be added in the dialog).

So the date/list ones can be enabled via validation and will be built-in. For user-defined editors, though, what do you guys think about my proposal above? (new editor property bag, and spreadsheet.registerEditor, which is already defined on the branch).

[tsvetomir]

The registerEditor usage seems great to me. Its simple to use and extensible.

[mishoo]

The editors for #1675 and #1673 are in place and can be activated in the validation dialog (and there's a sample in playground/spreadsheet/sheet.html),

Left to do on this issue (please add to the list if I'm missing something):

• the editor property bag, serialization
• document kendo.spreadsheet.registerEditor
• a demo with a custom editor would be nice

[tsvetomir]

I'll also add end-user documentation to the list /cc @dmihaylo

[mishoo]

API documentation here — should I cherry-pick it into kendo-ui-core? Also, I believe the branch is ready to merge, objections? ;-)

[petyosi]

Seems great to me! And a demo would complete the story :)

[mishoo]

Merged.

[mishoo]

@Underlog I added a demo skeleton in spreadsheet/custom-editors.cshtml. It shows the built-in editors, as well as the color picker sample from the doc. Someone else should take it from here if it needs to be a more relevant/real-world scenario, as my imagination is lacking right now... :) (giving good examples turns out to be a hard problem)

[tsvetomir]

I get an error in the "regular" demos:

view.js:731 Uncaught TypeError: this._sheet.activeCellCustomEditor is not a function
kendo.Class.extend.isEditButton @ view.js:731
kendo.Class.extend.objectAt @ view.js:770
kendo.Class.extend.objectAt @ controller.js:745
kendo.Class.extend.onMouseMove @ controller.js:416
kendo.Class.extend.handleEvent @ eventlistener.js:148
kendo.Class.extend.mouse @ eventlistener.js:117
jQuery.event.dispatch @ jquery.js:5226
elemData.handle @ jquery.js:4878

[mishoo]

Could it be because that method is defined in a new file? I did list it in kendo.spreadsheet.js though.

[petyosi]

Well, that should work as expected. The error suggests that the new file is not picked by the build, though. Can you check that the referenced file is rebuilt correctly?

[tsvetomir]

Seems to work fine on staging, so it's my setup. Sorry!

[tsvetomir]

@yordanov do you have any ideas for a prettier demo?
Any notes on styling of the custom editors themselves?

See http://kendobuild/staging-kendo-ui/spreadsheet/custom-editors

[ipeshev]

On IE11 colorpicker appears shrinked and positioned in top left corner. In staging-demo

[mishoo]

There's an error actually that occurs in kendo.binder.js:

Perhaps I'm not using it properly? In any case, it seems unrelated to the spreadsheet, but rather my implementation of the sample custom editor.

[mishoo]

Seems like a really weird IE issue. Just trying to console.log(children.length) for that particular element triggers the error. There's nothing fancy about the element, it's just a <div> (the toplevel one). It's surprising that nobody has hit the issue so far.

Moving initialization of children to right before this line fixes it. Thanks IE for yet another mind blowing weirdness. 😞

@Underlog should I push this fix?

Edit: I don't think it can break anything. Pushed.

[petyosi]

Yeah another IE weirdness. not much I can say here.

[ipeshev]

I can confirm that it is fixed, another IE bug down.

[niyas-ali]

Hi,

Is there any way to pass some value to the edit variable ?
Sample code i have added below, here my logic is written in the edit function, there i have a dropdown and the value of this dropdown has to assign dynamically when i call sheet.range("A5").editor("foo");
Is there any hack to pass the value through editor("foo",'some value') and get it from edit function?

kendo.spreadsheet.registerEditor("foo", {
edit: function(range, pos, callback) {
// opens the editor for the given cell. I'm thinking pos
// will be useful to position it near the dropdown button
// (if it's a popup editor) but it could be a dialog as
// well. We leave it to users.

    // the editor should invoke callback(value) when a value
    // has been selected
},
close: function() {
    // hide the editor
},
icon: "iconClass" // for the button

});