Example editor use for multiple number spinners?

David Grigglestone

I'd like to have an editor that includes a row that captures 4 numeric values using a number spinner for each of the values. I have constructed a number spinner that works on a page standalone, but am struggling to put it together in an editor. The layout needs to be something like:

Purge Older than: Years: [0] Months: [0] Weeks: [0] Days: [0]

My current efforts have resulted in a field that seems to wrap the four individual numeric fields.

Before I get into the depths of what I have tried, I was wondering if anyone had an example of capturing > 1 value on a single editor row using a custom control?

allan

Forgive my ignorance - what is a number spinner? Are you trying to create a custom field input type? If so, this development guide might be of some use.

Allan

David Grigglestone

Thanks for asking .. the basis for it is http://www.jplugins.net/bootstrap-spinedit/?demo

Yes I have been following the guide you reference, but something is not playing nicely. The implementation of the custom input is shown below .. as you can see there are 4 controls to capture years, months, weeks and days and their values are get/set via an array. But my issues are more to do with all the controls being wrapped by an outer field
and the spin buttons for each individual spinner not being rendered.

I'll try to get a reduced sample of the whole thing if no immediate ideas?

$.fn.dataTable.Editor.fieldTypes.purgecriteria = $.extend( true, {}, $.fn.dataTable.Editor.models.fieldType, {
    "create": function (conf) {
        var that = this;

        conf._input = $(
            '<div class"row">' +
                '<div class="container col-xs-3">' +
                    '<label for="' + conf.id + '.years" class="numberspin-label">Years:</label>' +
                    '<input class="numberspin " id="' + conf.id + '.years" type="text">' +
                    '<script type="text/javascript">$(function () {$("#' + conf.id + '.years").numberspin({});});</script>' +
                '</div>' +
                '<div class="container col-xs-3">' +
                    '<label for="' + conf.id + '.months" class="numberspin-label">Months:</label>' +
                    '<input class="numberspin " id="' + conf.id + '.months" type="text">' +
                    '<script type="text/javascript">$(function () {$("#' + conf.id + '.months").numberspin({});});</script>' +
                '</div>' +
                '<div class="container col-xs-3">' +
                    '<label for="' + conf.id + '.weeks" class="numberspin-label">Weeks:</label>' +
                    '<input class="numberspin " id="' + conf.id + '.weeks" type="text">' +
                    '<script type="text/javascript">$(function () {$("#' + conf.id + '.weeks").numberspin({});});</script>' +
                '</div>' +
                '<div class="container col-xs-3">' +
                    '<label for="' + conf.id + '.days" class="numberspin-label">Days:</label>' +
                    '<input class="numberspin " id="' + conf.id + '.days" type="text">' +
                    '<script type="text/javascript">$(function () {$("#' + conf.id + '.days").numberspin({});});</script>' +
                '</div>' +
            '</div>'
        ).numberspin($.extend({}, conf.opts ));

        return conf._input[0];
    },

    "get": function ( conf ) {
        //return conf._input.find('input').val();
        return [
            conf._input.find('input#' + conf.id + '.years').val(),
            conf._input.find('input#' + conf.id + '.months').val(),
            conf._input.find('input#' + conf.id + '.weeks').val(),
            conf._input.find('input#' + conf.id + '.days').val(),
        ];
    },
    
    "set": function ( conf, val ) {
        //conf._input.find('input').val(val);
        conf._input.find('input#' + conf.id + '.years').val(val[0]);
        conf._input.find('input#' + conf.id + '.months').val(val[0]);
        conf._input.find('input#' + conf.id + '.weeks').val(val[0]);
        conf._input.find('input#' + conf.id + '.days').val(val[0]);
    },
    
    // Non-standard Editor methods - custom to this plug-in. Return the jquery
    // object for the numberspin instance so methods can be called directly
    inst: function ( conf ) {
        return conf._input;
    }
});

allan

You could use input type="number" element which might be a little easier? You can set attributes using the attr option of the text input. Browser support for this input type is pretty good now.

Allan