Support resizable columns about jsgrid HOT 13 OPEN

;(function() {
    function preventEvent(e) {
        var ev = e || window.event;
        if (ev.preventDefault) ev.preventDefault();
        else ev.returnValue = false;
        if (ev.stopPropagation)
            ev.stopPropagation();
        return false;
    }

    function getWidth(x) {
        if (x.currentStyle)
        // in IE
            var y = x.clientWidth - parseInt(x.currentStyle["paddingLeft"]) - parseInt(x.currentStyle["paddingRight"]);
        // for IE5: var y = x.offsetWidth;
        else if (window.getComputedStyle)
        // in Gecko
            var y = document.defaultView.getComputedStyle(x, null).getPropertyValue("width");
        return y || 0;
    }

    window.ColumnResize = function (aTable, aConnectedTable) {
        var table = aTable;
        var connectedTable = aConnectedTable;

        if (table.tagName != 'TABLE') return;

        this.id = table.id;

        // ============================================================
        // private data
        var self = this;

        var dragColumns = table.rows[0].cells; // first row columns, used for changing of width

        var dragConnectedColumns = dragColumns;
        if (connectedTable) dragConnectedColumns = connectedTable.rows[0].cells;

        if (!dragColumns) return; // return if no table exists or no one row exists

        var dragColumnNo; // current dragging column
        var dragX; // last event X mouse coordinate

        var saveOnmouseup; // save document onmouseup event handler
        var saveOnmousemove; // save document onmousemove event handler
        var saveBodyCursor; // save body cursor property

        // ============================================================
        // methods

        // ============================================================
        // do changes columns widths
        // returns true if success and false otherwise
        this.changeColumnWidth = function(no, w) {
            if (!dragColumns) return false;

            if (no < 0) return false;
            if (dragColumns.length < no) return false;

            if (parseInt(dragColumns[no].style.width) <= -w) return false;
            if (dragColumns[no + 1] && parseInt(dragColumns[no + 1].style.width) <= w) return false;

            dragColumns[no].style.width = parseInt(dragColumns[no].style.width) + w + 'px';
            dragConnectedColumns[no].style.width = parseInt(dragConnectedColumns[no].style.width) + w + 'px';

            //if (dragColumns[no + 1]) {
            //    dragColumns[no + 1].style.width = parseInt(dragColumns[no + 1].style.width) - w + 'px';
            //    dragConnectedColumns[no + 1].style.width = parseInt(dragConnectedColumns[no + 1].style.width) - w + 'px';
            //}

            return true;
        }

        // ============================================================
        // do drag column width
        this.columnDrag = function(e) {
            var e = e || window.event;
            var X = e.clientX || e.pageX;
            if (!self.changeColumnWidth(dragColumnNo, X - dragX)) {
                // stop drag!
                self.stopColumnDrag(e);
            }

            dragX = X;
            // prevent other event handling
            preventEvent(e);
            return false;
        }

        // ============================================================
        // stops column dragging
        this.stopColumnDrag = function(e) {
            var e = e || window.event;
            if (!dragColumns) return;

            // restore handlers & cursor
            document.onmouseup = saveOnmouseup;
            document.onmousemove = saveOnmousemove;
            document.body.style.cursor = saveBodyCursor;

            // remember columns widths in cookies for server side
            var colWidth = '';
            var separator = '';
            for (var i = 0; i < dragColumns.length; i++) {
                colWidth += separator + parseInt(getWidth(dragColumns[i]));
                separator = '+';
            }

            preventEvent(e);
        }

        // ============================================================
        // init data and start dragging
        this.startColumnDrag = function(e) {
            var e = e || window.event;

            // if not first button was clicked
            //if (e.button != 0) return;

            // remember dragging object
            dragColumnNo = (e.target || e.srcElement).parentNode.cellIndex;
            dragX = e.clientX || e.pageX;

            // set up current columns widths in their particular attributes
            // do it in two steps to avoid jumps on page!
            var colWidth = new Array();
            for (var i = 0; i < dragColumns.length; i++) {
                colWidth[i] = parseInt(getWidth(dragColumns[i]));
            }
            for (var i = 0; i < dragColumns.length; i++) {
                dragColumns[i].width = ""; // for sure
                dragColumns[i].style.width = colWidth[i] + "px";
                dragConnectedColumns[i].width = ""; // for sure
                dragConnectedColumns[i].style.width = colWidth[i] + "px";
            }

            saveOnmouseup = document.onmouseup;
            document.onmouseup = self.stopColumnDrag;

            saveBodyCursor = document.body.style.cursor;
            document.body.style.cursor = 'w-resize';

            // fire!
            saveOnmousemove = document.onmousemove;
            document.onmousemove = self.columnDrag;

            preventEvent(e);
        }

        // prepare table header to be draggable
        // it runs during class creation

        for (var i = 0; i < dragColumns.length; i++) {
            dragColumns[i].innerHTML = "<div class='jsgrid-header-resizable' style='" + "position:absolute;height:100%;color:transparent;width:5px;right:2px;top:0;cursor:w-resize;z-index:10;'>" + "||||</div>" +
                                       "<div style='position:relative;height:100%;width:100%'>" + dragColumns[i].innerHTML + "</div>";
            dragColumns[i].firstChild.onmousedown = this.startColumnDrag;
        }
    }
})();

// append this function in the jsgrid script
_createResizableHeader: function () {
    ColumnResize(this._headerGrid[0], this._bodyGrid[0]);
},

// update _renderGrid function
_renderGrid: function() {
    this._clear();

    this._container.addClass(this.containerClass)
        .css("position", "relative")
        .append(this._createHeader())
        .append(this._createBody());

    this._createResizableHeader();

    this._pagerContainer = this._createPagerContainer();
    this._loadIndicator = this._createLoadIndicator();

    this.refresh();
},

    self.createJSGridTable = function (cssIdOfTable, tableIndex) {
        $("#" + cssIdOfTable).jsGrid({
            width: "100%",
            height: "400px",

            inserting: false,
            editing: false,
            sorting: true,
            paging: true,
            noDataContent: "No Record Found",
            loadMessage: "Please, wait...",

            data: self.tables()[tableIndex].Rows,

            fields: self.getColumns(self.tables()[tableIndex])
        });


        $("#sort").click(function () {
            var field = $("#sortingField").val();
            $("#" + cssIdOfTable + "").jsGrid("sort", field);
        });
    };

    self.getColumns = function (table) {
        columnsAsObjects = [];
        var props = [];

        if (table != null && table.Rows != null && table.Rows.length > 0) {
            props = self.propertyNamesOfRow(table.Rows[0]);
        }

        for (var i = 0; i < props.length; i++) {
            var currentProp = props[i].toString();
            columnsAsObjects.push({ name: currentProp, type: self.getType(table.Rows, currentProp), width: self.getColumnWidth(table.Rows, currentProp) + "px" });
        }

        return columnsAsObjects;
    };

    self.getType = function (rows, columnName) {
        for (var i = 0; i < rows.length; i++) {
            if (self.isNumber(rows[i][columnName])) {
                return "text";
            }
        }

        return "number";
    };

    self.getColumnWidth = function (rows, columnName) {
        var maxLength = columnName.toString().length;
        for (var i = 0; i < rows.length; i++) {
            if (rows[i][columnName] != null) {
                maxLength = rows[i][columnName].toString().length > maxLength ? rows[i][columnName].toString().length : maxLength;
            }
        }

        return maxLength * 10;
    };

    self.isNumber = function(value){
        return value != null && value != "" && typeof value != "number" && isNaN(parseInt(value));
    };

    var JSGridHelper = (function () {

    function Controller(records, columnsWithDate) {
        var self = this;
        self.records = records;
        self.columnsWithDate = columnsWithDate;

        self.getControllerObject = {
            loadData: function (filter) {

                return $.grep(self.records, function (record) {
                    return shouldRecordBeKeptInResults(filter, record, self.records, self.columnsWithDate);
                });
            }
        };
    };

    var shouldRecordBeKeptInResults = function (filter, record, records, columnsWithDate) {
        var props = propertyNamesOfRow(record);
        var returnRecord = true;

        for (var i = 0; i < props.length; i++) {
            var currentProp = props[i].toString();

            if (filterAndRecordValuesAreNotEqual(filter[currentProp], record[currentProp])) {
                if (getType(records, currentProp, columnsWithDate) === "text") {
                    if (record[currentProp] !== null && !doesRecordIncludeFilterValue(record[currentProp], filter[currentProp])) {
                        returnRecord = false;
                    }
                }

                else {
                    returnRecord = false;
                }
            }
        }

        return returnRecord;
};

    var filterAndRecordValuesAreNotEqual = function (filterValue, recordValue) {
        return filterValue && filterValue !== '' && recordValue != filterValue;
};

    var doesRecordIncludeFilterValue = function (recordValue, filterValue) {
        return recordValue.toLowerCase().includes(filterValue.toLowerCase());
    };

    var createNewJSGridForEachTable = function (tables, columnsWithDate) {
        var baseId = "jsGrid";
        for (var i = 0; i < tables.length; i++) {
            if (i == 0) {
                $("#tablesDiv").empty();
            }

            var jsGridId = baseId + (parseInt(i) + 1);
            $("#tablesDiv").append('<div id="' + jsGridId + '"></div>');
            createJSGridTable(tables, jsGridId, i, columnsWithDate);
        }
    };

    var createJSGridTable = function (tables, cssIdOfTable, tableIndex, columnsWithDate) {
        var controllerInstance = new Controller(tables[tableIndex].Rows, columnsWithDate);
        $("#" + cssIdOfTable).jsGrid({
            width: "100%",
            height: "400px",

            filtering: true,
            inserting: false,
            editing: false,
            sorting: true,
            autoload: true,
            paging: true,

            controller: controllerInstance.getControllerObject,

            noDataContent: "No Record Found",
            loadMessage: "Please, wait...",

            data: tables[tableIndex].Rows,

            fields: getColumns(tables[tableIndex], columnsWithDate)
        });


        $("#sort").click(function () {
            var field = $("#sortingField").val();
            $("#" + cssIdOfTable + "").jsGrid("sort", field);
        });
    };

    var propertyNamesOfRow = function (obj) {
        var returnArray = [];
        $.each(obj, function (key, value) { returnArray.push(key); });

        return returnArray;
    };

    var getColumns = function (table, columnsWithDate) {
        columnsAsObjects = [];
        var props = [];

        if (table != null && table.Rows != null && table.Rows.length > 0) {
            props = propertyNamesOfRow(table.Rows[0]);
        }

        for (var i = 0; i < props.length; i++) {
            var currentProp = props[i].toString();
            columnsAsObjects.push({ name: currentProp, type: getType(table.Rows, currentProp, columnsWithDate), width: getColumnWidth(table.Rows, currentProp) + "px" });
        }

        columnsAsObjects.push(
            {
                type: "control",
                modeSwitchButton: false,
                editButton: false,
                deleteButton: false,
            }
        );

        return columnsAsObjects;
    };

    var getType = function (rows, columnName, columnsWithDate) {
        if (rows && rows.length > 0) {
            if (isDate(rows[0], columnName, columnsWithDate)) {
                return "date";
            }

            for (var i = 0; i < rows.length; i++) {
                if (rows[i][columnName] !== null && !isNotANumber(rows[i][columnName])) {
                    return "number";
                }
            }
        }

        return "text";
    };

    var getColumnWidth = function (rows, columnName) {
        var maxLength = columnName.toString().length;
        for (var i = 0; i < rows.length; i++) {
            if (rows[i][columnName] != null) {
                maxLength = rows[i][columnName].toString().length > maxLength ? rows[i][columnName].toString().length : maxLength;
            }
        }

        return maxLength * 10;
    };

    var isDate = function (row, columnName, columnsWithDate) {
        if (columnsWithDate && columnName) {
            var props = Object.keys(row);

            for (var j = 0; j < columnsWithDate.length; j++) {
                for (var k = 0; k < props.length; k++) {
                    if (props[k] == columnName && columnsWithDate[j] == k) {
                        return true;
                    }
                }
            }
        }

        return false;
    };

    var isNotANumber = function (value) {
        return value != null && value != "" && typeof value != "number" && isNaN(parseInt(value));
    };

    return {
        CreateNewJSGridForEachTable: createNewJSGridForEachTable
    }
})();
'''