SpreadJS NumberCellType

by Ross Dederer

HTML

<link rel="stylesheet" href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css">
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20132.15.js"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20132.15.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20132.15.min.css">
<script src="http://cdn.wijmo.com/5.20143.32/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20143.32/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20143.32/controls/wijmo.input.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/spreadjs/jquery.wijmo.wijspread.3.20143.15.css">
<script src="http://cdn.wijmo.com/spreadjs/jquery.wijmo.wijspread.all.3.20143.15.js"></script>
<div id="ss" style="width: 550px; height: 400px; border: 1px solid gray" />

JavaScript

function DatePickerCellType() {
}

// 1) We need to derive the Custom Cell Type to create the NumberCell Type 
DatePickerCellType.prototype = new $.wijmo.wijspread.CustomCellType();

// 2) We need to create a customer Editor to the cell, basically overiding the default behavior 
DatePickerCellType.prototype.createEditorElement = function () {
    return document.createElement("input");
};

// 3) We need to override the activeEditor function so as to convert the custom editor to Wijmo Input.  This will actually provide the functionality of the the Wijmo Input. 
DatePickerCellType.prototype.activateEditor = function (editorContext, cellStyle, cellRect) {
    //Initialize wijmo number input editor.
    if (editorContext) {
        $editor = $(editorContext);
        $.wijmo.wijspread.CustomCellType.prototype.activateEditor.apply(this, arguments);
        $editor.css("width", cellRect.width - 3);
        $editor.css("height", cellRect.height - 3);
        
        
        // Initialize wijmo5 control, bind it to editorContext 
        var inputDate = new wijmo.input.InputDate(editorContext);
       // inputDate.step = 1;
        
       // $editor.wijinputnumber({ type: 'numeric', decimalPlaces: 1, showSpinner: true });
       // this.parent = $editor.data("wijmo-wijinputnumber").outerDiv;
        this.parent = $(inputDate.hostElement);
        // End Wijmo Logic 
        
        this.parent.css("position", "absolute");
        this.parent.css("top", $editor.css("top"));
        this.parent.css("left", $editor.css("left"));
        this.parent.attr("gcUIElement", "gcEditingInput");
        //$(".wijmo-wijinput-wrapper").css("padding-top", "0");
    }
}

 //Remove wijmo number input editor when end editor status.
DatePickerCellType.prototype.deactivateEditor = function (editorContext, cellStyle, cellRect) {
    if (editorContext) {
        var element = editorContext;
        while (element) {
            if (element.parentNode === document.body) {
               ...