Fantastic, thanks for the help on this!

Could you document these and other items somewhere? I had a hunch it could be the template but there was no documentation anywhere that referred to what templates were with what versions.

Thank you again for the help.

We have a fairly serious issue with this release... The sizing has changed, significantly. Yes, the font-size can be reduced, but it's so much more. While I appreciate efforts to make this library more appealing, it can't be done at the expense of backwards compatibility.

Yes, I could take the next day meticulously going through the CSS and modifying various items.

Yes, I could override the javascript functions.

But, that is not the point, it shouldn't be this difficult. I certainly hope the entire look of the widget library can be reverted with overrides and extensions.

Please try and provide another option. We are using your library extensively in a fairly large intranet application and the customer is extremely disappointed.

Please advise or provide some workaround.

EasyUI provides callback functions as part of most of the widgets' options' objects. A user can easily set the event listener on any number of events, e.g. onOpen, onSelect, onResize, etc...

However, there is no ability, out of the box, to add an event listener, except of course to set a listener that retransmits the event from the one and only handler to other listeners.

Is it possible to utilize jQuery triggers on your widgets for your event listeners in options so the user can more easily (and more loosely coupled) add event listeners with $().on, or $().one. For example

Code:

   $('#grid-object').datagrid('on', 'onLoadSuccess', postLoadAction_one);
   $('#grid-object').datagrid('on', 'onLoadSuccess', postLoadAction_two);

// or

   $('#grid-object').on('onLoadSuccess', postLoadAction_one);
   $('#grid-object').on('onLoadSuccess', postLoadAction_two);

// or

   $('#grid-object').datagrid('options').on('onLoadSuccess', postLoadAction_one);
   $('#grid-object').datagrid('options').on('onLoadSuccess', postLoadAction_two);

Here is something I use in my project to make it more of an Observable pattern

Code:

            

var onChangeTrigger = function(newValue, oldValue) {
  $(this).trigger('onChange', [newValue, oldValue]);
};
var triggerEventOnKeyPress = function(jq) {
  $(jq[0]).textbox('textbox').on('keydown', function(e) {
    $(jq[0]).trigger('onKeyPress', [e]);
  });
};
$.extend($.fn.textbox.defaults, {
  onChange: onChangeTrigger
});
$.extend($.fn.textbox.methods, {
  triggerEventOnKeyPress: triggerEventOnKeyPress
});
$.extend($.fn.numberbox.methods, {
  onChange: onChangeTrigger, triggerEventOnKeyPress: triggerEventOnKeyPress
});
$.extend($.fn.combo.defaults, {
  onChange: onChangeTrigger
});

I have to agree, it would be nice to automatically notify users, as well as to have a section on your website containing patches.

This too, would not be so hard. 

Please?

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();
        }

JPi, thank you, I see the dilemna. Here is your solution: in your css

<outer selector> .textbox-addon.textbox-addon-right { display: none; }

To solve this problem I set my browser to developer-mode, and use the element selector to choose the search button. There I can drill down into the selectors and css being used and even experiment with different css combinations.

Jega,

Use the element inspector of your favorite browser. You will see that the header text is wrapped in a span directly under div.datagrid-cell. the div.datagrid-cell selector (in the css file) defines the color and font-weight. However, the div.datagrid-cell span selector defines the font-size. While you can certainly place the font-size in the div.datagrid-cell css, it will be overridden due to css priority definitions.

Also, it is an interesting question from a widget design perspective. Why would they do that? There are actually 2 spans inside the datagrid-cell. One of them is reserved for sorting. Right now the sorting uses a sprite image to display direction, but I guess in the future that could change and perhaps a unicode character could be used. It probably makes sense therefore to split out size. But, that is a guess, if not a reach. Not really sure why.

Why not just used textbox?

Oh... Peter, are you actually using client side data or fetching from a URL?

I just tried this out in fiddle and the issue here is that it is a bit more complex for client pagination. You should check the examples out in the demo section of easyui.

Server-side pagination is considerably easier and consists mainly of determining which rows to bring back. Look at the examples.

Peter,

No problem! But, it's not in the returned results you want to specify the property: idField: 'Id'

You'll want this in the grid options itself, either through data-options property of your target element

Code:

<table class="easyui-datagrid" data-options="... idField: 'id', url: 'myurl.php'... " ..</table>

or if you use JavaScript to initialize your datagrid

Code:

$('#mygrid').datagrid({
   .
    idField: 'Id',
    url: 'myurl.php',
   .
   .
});

Please tell me if it works for you!
Ira

Hi AJ,

I assume this is used in datagrid as one of the editors. The issue of course here is specifying the url: mode_id_select.php?figure_id=<row-value-for-fid>

Use the onBeforeEdit method to configure the editor before it is shown. Within that event try this

var ed = $('grid-selector').datagrid('getEditor', {index:<row-index>,field:'<combo-field-name>'});
$(ed.target).combobox('options')['url'] = 'mode_id_select.php?figure_id=<row-value-for-fid>';

You can also use the queryParams property and leave the url alone. It sure would be nice if jeasy provided a callback/event to dynamically retrieve the url or query params.

Hope this works for you,

Ira

Peter,

I noticed in your data the "Id" field is null in many--if not all--cases: this should be populated. Also, make sure you specify a value for the "idField", in your case it would read " idField: 'Id', ... "


If that doesn't solve your problems, can you please post relevant code AND post the request header you use to get the data shown.

May I suggest you update your documentation to reflect this.

How could we modify this to work with a pre-existing value, i.e. edit mode. Note, we don't *yet* have 1.5 to take advantage of limitToList

I have to override the base property of easyloader. This is because easyloader is in a different directory than plugins (think gulp/grunt and concat files).

However, when easyloader is loaded and after jQuery is ready, the jquery.parser.js file is loaded but this occurs before the base property is overwritten and thus is tried to load with the wrong path.

Long Term fix option suggestion to jQueryEasyUI
To fix, the parser should be loaded as a prerequisite to the first load, so base applies jquery.parser.js

Short term fix options by End User of jQueryEasyUI (4.1):
1) Move easyloader loading of parser out of jquery ready block and into user code

easyloader.js line 411

Code:

if (window.jQuery){
   jQuery(function(){
      //easyloader.load('parser', function(){
      //jQuery.parser.parse();
      //});
   });
}

myownloader.js

Code:

easyloader.base = './scripts/jquery-easyui/';
easyloader.load('parser', function(){
   jQuery.parser.parse();
});
easyloader.load(['window', 'panel', 'tree'], function() {

2) Second option is to move parser.js into .plugins folder