webismymind / editablegrid

EditableGrid is an open source Javascript library aimed at turning HTML tables into advanced editable components. It focuses on simplicity: only a few lines of code are required to get your first table up and running.
http://www.editablegrid.net
Other
795 stars 272 forks source link

Correct checkbox / column type "boolean" handling... #101

Open webMac opened 9 years ago

webMac commented 9 years ago

Hi folks,

yesterday i tried to use the data column type "boolean". Turns out the data was shown correctly, but once i've edited and tried to save rows the data in my xml data handling did not contain any value at all. Solved it for my needs by overwriting the CheckboxCellRenderer.prototype.render = function (element, value) { } function and adding some custom rows which do set the checkbox.checked value and especially the htmlInput value attribute in editablegrid_renderers.js If this is a bug and it's the correct way of handling checkbox changes for the editablegrid plugin in general please put it in the next version as i have not checked out the github project here. Thanks.

editablegrid_renderer.js, currently line 151: 
CheckboxCellRenderer.prototype.render = function (element, value) {
    // convert value to boolean just in case
    value = (value && value != 0 && value != "false" ) ? true : false;

    // if check box already created, just update its state
    if (element.firstChild) { element.firstChild.checked = value; return; }

    // create and initialize checkbox
    var htmlInput = document.createElement("input");
    htmlInput.setAttribute("type", "checkbox");

        // ADDED:
        htmlInput.checked = value;
        htmlInput.setAttribute("value", value);

    // give access to the cell editor and element from the editor field
    htmlInput.element = element;
    htmlInput.cellrenderer = this;

    // this renderer is a little special because it allows direct edition
    var cellEditor = new CellEditor();
    cellEditor.editablegrid = this.editablegrid;
    cellEditor.column = this.column;
    htmlInput.onclick = function (event) {
        element.rowIndex = this.cellrenderer.editablegrid.getRowIndex(element.parentNode); // in case it has changed due to sorting or remove
        element.isEditing = true;

            // ADDED:
            htmlInput.setAttribute("value", htmlInput.checked);

        cellEditor.applyEditing(element, htmlInput.checked ? true : false);
    };

    element.appendChild(htmlInput);
    htmlInput.checked = value;
    htmlInput.disabled = (!this.column.editable || !this.editablegrid.isEditable(element.rowIndex, element.columnIndex));

    EditableGrid.prototype.addClassName(element, "boolean");
};

P.S.: I'm also thinking about extending or changeing the following line

    value = (value && value != 0 && value != "false" ) ? true : false;

in order to a logic where it proves on a true value rather than not false or null and then sets it to true:

    value = (value && (value == 1 || value == "true" || value == "True") ) ? true : false;