EasyUI Forum
March 28, 2024, 09:46:29 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: treegrid/datagrid resizer, possible solution  (Read 4824 times)
iklotzko
Newbie
*
Posts: 15


View Profile Email
« on: July 07, 2017, 08:45:02 AM »

I am hoping this helps others. I am using a treegrid in this example but this works equally well for data grids. There are some issues I have and possibly others with the datagrid/treegrid controls and resizing. I like to have the grid always take up 100% of available width. I typically place them into a center panel of a border layout.

Issue 1) Resizing columns and using percentages. When a user resizes a column the internal code of jeasy overwrites the percentage with the actual pixel amount. This is documented in the forums, and seen upon introspection (console.log(column)). This causes various issues for my users.

Issue 2) Percentages plus actual pixel column sizes don't work well together. Scenario: one or two fixed columns that should never change in size and should remain constant. The other columns however should be percentages. This works to a point but fails on resizing of outer panel (make the grid wider by adjusting the browser window).

I believe I have solved these rudimentary problems for my use cases. Code is shown below

Solution Requirements
1) Grid should not have fix: true an undocumented feature, or fitColumns: true
2) Any columns specified as decimal width must be fixed:true (no resize allowed)
3) All remaining columns that are not decimal must all be percentage and add up to 100
4) All columns must have a width set in either percent or numeric literal
5) You can't overwrite the onResize of outer panel, onResizeColumn of grid callbacks using this code. This code overwrites any existing ones. Instead listen to $(outerPanelSelector).on('resize', function(w, h) {}); $(gridSelector).on('resize-column', function(fieldName, newPercentage) {});

Any suggestions or improvements are appreciated. Or, even workarounds so all this isn't even needed.

Usage: addResizingToGrid(outerPanelSelector, gridSelector);

Code:
        function addResizingToGrid(outerPanelSelector, gridSelector) {
            function getOuterPanelWidth() {
                return $(outerPanelSelector).panel('panel').outerWidth();
            }
            function getRemainderSpaceForFluidColumns() {
                var opts = $(gridSelector).treegrid('options');
                var columns = opts.columns[0];
                var fixedWidthTotal = 0;
                var scrollbarSize = opts.scrollbarSize || 18; // 18 is the default size
                // retrieve set numeric columns
                $.each(columns, function (i, o) {
                    if ($.isNumeric(o.width) && o.fixed) {
                        fixedWidthTotal += o.width;
                    }
                });
                var entire = getOuterPanelWidth();
                return entire - (scrollbarSize + fixedWidthTotal);
            }

            function normalizeGridWidthsFromPercentage() {
                var widths = [];
                var opts = $(gridSelector).treegrid('options');
                var columns = opts.columns[0];
                var remainder = getRemainderSpaceForFluidColumns();
                $.each(columns, function (i, o) {
                    if ($.isNumeric(o.width)) {
                        widths.push(o.width);
                    } else
                    if (isPercent(o.width)) {
                        var percentage = getNumberFromPercent(o.width) / 100;
                        widths.push(o.width);
                        o.width = Math.round(percentage * remainder - 1);
                        o.boxWidth = o.width - o.deltaWidth; // delta width is padding and border
                        o.auto = undefined;
                    }
                });
                $(gridSelector).treegrid('fixColumnSize');
                $(gridSelector).treegrid('resize');
                $.each(columns, function (i) {
                    this.width = widths[i];
                });
            }

            function isPercent(value) {
                return $.isFunction(value.indexOf) && value.indexOf('%') !== -1;
            }

            function getNumberFromPercent(percent) {
                return percent.replace('%', '') * 1.0;
            }
            function adjustOtherPercentColumns(columns, totals, field) {
                var correction = Math.round((totals.sum - 100) / totals.cnt);
                $.each(columns, function (i, o) {
                    // don't correct field that's being adjusted
                    if (isPercent(o.width) && o.field !== field) {
                        var correctedPercent = o.percentage - correction;
                        o.width = correctedPercent + '%';
                    }
                });
            }
            function adjustRoundingErrors(columns, totals) {
                var runningTotal = 0;
                $.each(columns, function (i, o) {
                    if (isPercent(o.width)) {
                        runningTotal += getNumberFromPercent(o.width);listeners
                        if (i === totals.lastPercentIndex && runningTotal !== 100) {
                            var currentWidth = getNumberFromPercent(o.width);
                            var lastColumnCorrection = runningTotal - 100;
                            o.width = currentWidth - lastColumnCorrection + '%';
                            runningTotal -= lastColumnCorrection;
                        }
                    }
                });
            }
            function getNewPercentageFromColumnResize(width) {
                var remainingWidth = getRemainderSpaceForFluidColumns();
                return Math.round(width / remainingWidth * 100);
            }

            function calculateTotals(columns, newPercentage, field) {
                var totals = {sum: 0, cnt: 0, lastPercentIndex: -1};
                $.each(columns, function (i, o) {
                    if (isPercent(o.width)) {
                        o.percentage = getNumberFromPercent(o.width);
                        totals.sum += o.percentage;
                        totals.lastPercentIndex = i;
                        totals.cnt++;
                    } else if (o.field === field) {
                        totals.sum += newPercentage;
                        o.percentage = newPercentage;
                        totals.lastPercentIndex = i;
                    }
                });
                return totals;
            }
            listeners
            function panelResizer(width, height) {
                normalizeGridWidthsFromPercentage();
                $(outerPanelSelector).trigger('resize', width, height);
            }
           
            function columnResizer(field, width) {
                var column = $(gridSelector).treegrid('getColumnOption', field);
                var newPercentage = getNewPercentageFromColumnResize(width);
                var opts = $(gridSelector).treegrid('options');
                var columns = opts.columns[0];
                var totals = calculateTotals(columns, newPercentage, field);
                column.width = newPercentage + '%';
                adjustOtherPercentColumns(columns, totals, field);
                adjustRoundingErrors(columns, totals);
                normalizeGridWidthsFromPercentage();
                $(gridSelector).trigger('resize-column', field, newPercentage);
            }


            var popts = $(outerPanelSelector).panel('options');
            var gopts = $(gridSelector).treegrid('options');
            popts.onResize = panelResizer;
            gopts.onResizeColumn = columnResizer;
            normalizeGridWidthsFromPercentage();
        }
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!