openpsa / jsgrid Goto Github PK

We need to convert @OlegKi's css changes to less and merge them with our css changes.

Consider this option.

• gridComplete: jqGridMethod.setPager

where

var jqGridMethod = {
    setPager: function() {
       console.log($(this));
    },
    otherfunction: ...
    ...
}

Until now and in all my projects the call was good and $(this) echoed the grid.

Now it doesn't work anymore. First i have to put parenthesis to enter function, like :

• gridComplete: jqGridMethod.setPager()

and then $(this) echoe the object jqGridMethod.

A nice feature to add is a button that toggles a row to appear above the footers that would contain drop downs with summary options based on the content of the cell. For integers, for example, it could show (count, min, max...) Please see the below example, which I have taken from my own table function which I have created and implemented this in.

https://github.com/michael/multiselect/tree/master/js/locale

Most of the files in the plugin directory are quite old and most probably don't work any more. We should check which ones can be removed

As per @flack's comments in pull #17.

well, with enough time and energy, you can implement almost anything :-)

The only drawback I see is that if we're adding some custom handlebar functions to do this is that then the markdown file itself will get less readable, i.e. when you view it in a text editor (or on github). What we could do though is implement this in Javascript and run it on the client side. Bascially intercept the ajax response and print it on screen somewhere.

The code that renders the grid on screen is here:

https://github.com/openpsa/grid.js/blob/master/docs/template/ui.js#L10

It's not very pretty, I know. An implementation idea for intercepting the http response would be to splice some ajaxGridOptions handler into the text read from the codetag. It's a bit of a hack of course, so if you know a cleaner way to do this go right ahead :-)

Are you ok to change the default "datatype" value ?

#30 (comment)

This question has been asked several times in different places, so i propose we discuss it and vote here to close the question.

I vote for less.

To reproduce:

• go to http://openpsa.github.io/jsgrid/demos/kitchensink.html
• select a row by clicking into it
• click the edit icon

Expected Result:

• inline editing opens and row stays selected

Actual Result:

• inline editing opens and selection is removed

This currently happens only when multiselect is true, but it will happen in single select, too if we implement #2

I haven't looked at the code yet, but I think we should prevent the click events of the inline buttons from bubbling (and call select explicitly so that we are sure the row is selected)

Currently, if you set e.g. hidden: true in colModel, style="display: none" is added to each cell in the column. Performance might be better if we define a colgroup instead, because then the runtime for setting these properties would be O(1) instead of O(n). Markup would then look like this:

<table id="grid">
    <colgroup>
        <col style="display: none">
        <col style="text-align: right">
    </colgroup>
    <tr>
        <td>This is the hidden column</td>
        <td>This is the right-aligned column</td>
    </tr>
</table>

See

http://openpsa.github.io/grid.js/demos/kitchensink.html

you can load the subgrid, but it isn't removed when you close it. So when you open it again, it is displayed twice

Taken from jqGrid #674
newformat is applied in parsedate() even when the date has already been converted. This breaks the filtering of dates when newformat differs from srcformat.

To recreate:
Input is 2014-09-08;
datatype = local; // I assume this is a/the culprit
srcformat = 'Y-m-d';
newformat = 'n/j/Y';
Enable filter toolbar.

The grid shows 9/8/2014, but won't filter correctly because when filtering jqGrid is trying to apply 'Y-m-d' to 9/8/2014.)

Hi all.

Maybe we should do jquery 1.8.3 minimum version needed.
1.8.3 is the last version (november 2012) before 1.9 (that include major changes).
Between 1.7 and 1.8.3 are mainly bugfixes.

There are a couple of bundled third-party libraries in the external directory, mostyl four years old or more. At least jqModal has seen some development since. We should check which libs can be updated, or ideally installed via Bower

Avoid styling things which should not be in html (and therefore in the js code).

• remove inline css rules if possible
• remove classes that are only "aliases" or "override" to css rules.
• make the use of pure css selectors.

Bug in the confirmation modal (no button to validate or cancel)

Must merge before to see and fix this bug : https://github.com/bouks/grid.js/commit/9d3cbf427487e27220fab91a6d5ad1957db3f89b#diff-382b3649283911e1a5c64f3ec00e4968R1595

When inline editing dates are not reformated after saving or cancelling.

This is because "reformatAfterEdit" is set to false.

Why is it set to false ?

Based on the work for #28 we should write a unit test to test it.

Try to change resizeFilterToolbarInput by css rules.

#77 (comment)

Currently, it is not possible to implement CSS-only zebra striping, because hidden rows (e.g. collapsed groups or collapsed child levels) have the same classes as visible ones. So if you have a CSS rule like

.ui-jqgrid-btable tr.jqgrow:nth-child(2n+1)
{
    background-color: gray
}

it will only work in simple cases, but it will produce wrong results if some of the rows are hidden.

So I would propose adding a class like jqrow-visible to all visible rows, then we could write

.ui-jqgrid-btable tr.jqgrow-visible:odd
{
    background-color: gray
}

without needing altrows and altclass config options

Does not work filterToolbar, gives an error:

ReferenceError: thd is not defined
...),a("span.ui-search-input",p).append(u),a(thd).append(p),a.jgrid.bindEv.call(c,u...

@OlegKi fixed this issue in his repo. Here is the link:

free-jqgrid/jqGrid@e1913ff

Maybe he would be willing to fix it here to?

Setting the "height" property causes the horizontal scroll to unnecessarily appear when the vertical bar is needed. (This happens in Chrome but not in IE. Haven't tested it in any other browser.)

Even if the "width" property is defined and is more than wide enough to handle the table, the issue still occurs.

Example shown here: https://www.tesllc.aero/temp/jqgrid/

The only way that I have been able to temporarily fix this is by adding the following css:

.ui-jqgrid .ui-jqgrid-bdiv {  overflow-x:hidden; }

Hi,

I do made some changes in my repository to reduce the size of resulting jquery.jqGrid.min.js. I don't planned to do to make such changes before, but the results was too good: i could reduce the size of jquery.jqGrid.min.js by the last changes from 282 KB (289.272 bytes) till 275 KB (282.532 bytes) in the current version.

After that I compared the size of grid.js-4.7.0.min.js and grid.js-4.7.0.js with the size of jquery.jqGrid.min.js and jquery.jqGrid.src.js from my repository. Your jquery.jqGrid.min.js is smaller. After some additional analyse I've found out that the current build of grid.js-4.7.0.min.js and grid.js-4.7.0.js don't includes the files which you moved in external folder:

jqDnR.js
jqModal.js
jquery.fmatter.js
JsonXml.js

It's a clear bug in the build process which need be fixed.

Best regards
Oleg

When adding line i have an "opts is undefined"

that comes from :

meh-uk@fac62b7#diff-2d010088e9cda4a876dbc3e2399c83a0R3107

See :

d32b3b6#commitcomment-9427236

Again a "merge" of Oleg's change that introduce bugs.
Also it breaks compatibility with 4.7.

We have decided not to break compatibility, so why this option come ?

There are some situations where it would be nice if we could have more than one row in the footer table, e.g. when you have an invoice table like this:

Should we include default english in grid.base.js as it was done in lasts commits ?

If so, shouldn't we remove the english locale in i18n ?

Duplicates are not cool.

In the actual state, some users would include english locale and therefore add unnecessary request to server.

See the following screenshot:

Taken with Firefox 34 on Mac OS 10.9 on http://openpsa.github.io/grid.js/demos/searchFilterOperator.html

Additionally, if you hover over the icon next to the search input, the tooltip says undefined.

Based on @bouks implementation and the feedback from @OlegKi, here's a proposal for a modified autodetection algorithm (written as pseudocode for better readability):

if (grid.datatype !== 'auto')
{
    grid.url = "" + grid.url //Cast URL to string
    //normal jqGrid setup as it was before
}
else
{
    if (grid.data !== null)
    {
        grid.datatype = 'local';
    }
    else if (grid.url !== null)
    {
        detected_datatype = do_ajax_request_and_detect_datatype_with_jquery();
        if (detected_datatype === null)
        {
            throw 'datatype could not be detected. Please specify it manually';
        }
        if (    grid.loadonce === true
            && (detected_datatype === 'xml' || detected_datatype === 'json'))
        {
            grid.datatype = 'local'
        }
        else
        {
            grid.datatype = detected_datatype;
        }
    }
    else
    {
        grid.datatype = 'clientSide';
    }
}

The autodetection should only run once, when the grid is initially constructed.

From the user's point of view, the behaviour would be like this:

Using local data:

$('#list').jqGrid({
    colModel: [ name: "colName"],
    data: some_data
});

using remote data:

$('#list').jqGrid({
    colModel: [ name: "colName"],
    url: "/backend.php"
});

using nothing at all:

$('#list').jqGrid({
    colModel: [ name: "colName"],
}).jqGrid('setGridParam', {data: some_data});

using remote data from the current URL:

$('#list').jqGrid({
    colModel: [ name: "colName"],
    url: ""
});

It would be cool if the js header comments mention the chosen components in the builder.
So if updates comes, people can remember the components they chose and make the same build.

We've talked about writing tests.

I propose we implement firstly :

• check if the grid is well populated with the good datas according to
  the ajax returned ones.
• check, when editing and saving to server (form, inline, cell), that
  the right datas are sended by the ajax call.

The most important thing on the grid is to be sure that users datas won't be corrupted.

This is a follow-up to #79

Currently, the delete confirmation dialog looks like this:

At least three things should be fixed here:

• popup should be positioned at the center of the grid, or at least on the top left corner of the grid
• popup title should not be empty (because then the popup titlebar is so small that the close button doesn't fit)
• there needs to be some padding between the delete/cancel buttons and the hr above them

The grouping documentation needs adding, and the "new" parameters such as display column and title column also need documenting.

I just discover that ie11 add a little 'x' at the end of the input when you fill it.
This 'x' clear the input, but obviously doesn't trigger our search functionnality (reset filter and reloadGrid).

Do we must find a solution and for what milestone ?

When you use single selection, you can highlight a row by clicking somewhere in it, but you can't remove the highlighting by clicking again (you can only move it to another row). This used to work around version 3.6 IIRC.

The url and editurl properties can not be the same. When they are, clicking on the form edit submit button does nothing.

I use the same server page to handle both the pulling the initial grid data and for form editing.

I don't see sense in converting ui.jqgrid.css from one CSS file to multiple LESS files which have no logic internally. The dist folder don't contains ui.jqgrid.css file. For me personally the information devided in multiple files https://github.com/openpsa/grid.js/tree/master/less is more difficult to read, to compare and to analyse. In any way one need to have static ui.jqgrid.css files which can be loaded from static HTML file and just displays the jqGrid.

To analyse ui.jqgrid.css I personally use always an example of the grid because jqGrid have a lot of jQuery UI classes. In the same way I test the grid together wit Bootsrap. So one have see ui.jqgrid.css *in combination with jQuery UI and other classes from common frameworks. Only analyzing the conflicts with the frameworks allows to set correct CSS rule in ui.jqgrid.css. The topp level jqGrid component with the class .ui-jqgrid (known under the name gbox), another important part .ui-jqgrid-view (gview) and some other will be applied on other CSS rules. The separation in the LESS files makes (at least for me) more difficult to see all classes which will be applied and all looks not like it is in reallity.

It is very difficult to compare the resulting CSS with original ui.jqgrid.css or with ui.jqgrid.css from my fork.

For example look like ui-jqgrid-pager, .ui-pager-control, .ui-jqgrid-toppager and even td select are exist directly under .ui-jqgrid. Such rules on .ui-jqgrid td select seems be applied on the whole grid inclusive jqGrid body (btable) with the main data of the grid. Is it so? Where I can see the resulting ui.jqgrid.css? It would be better to have the file in more compact form so that one can see multiple CSS rules without scrolling vertical, which I need to do permanently if I look at the most LESS files.

It's my main problems in understanding of new `ui.jqgrid.css in LESS formaz...

It's the copy of some text from the post

The autodetection of datatype seems a good feature at the first point of view, but ... The first problem: There are some existing backend products which makes autodetection of the format based on dataType used in the Ajax request. For example the WebServices of Microsoft (I mean .ASMX) return XML or JSON depend on it. I'm abrade that such systems will return XML in the case. It you would open the URL in web browser then you would see XML instead of JSON. So such autodetection could change the format returned from the server. jqGrid callbacks, custom formatters, cellattr and rowattr just ptrovide the response as the parameter of the callback. So it makes break the existing code. The code of loadComplete: function (data) { ... var rows = data.rows; ...} will not more work because data.rows will be wrong for XML response.

Moreover, what is real use case of the usage of autodetection? One have to know exact format or returned data to create the grid. If one uses repeatitems: false format then the name property (or jsonmap) should exactly corresponds to the input data. To process XML response one have to write frequently another code. So if somebody use url parameter he have to know the format of data. He knows the type of returned data. So why one should not make datatype mandatory for the remote data? Why one should skip the option. So I don't understand the real case of the usage of autodetection of the format of the server response. I see more disadvantages in the implementation of the feature as advantages.

I think including templates in grid.base is not a good thing. It makes the program bigger and some people won't use it or create their own templates (what about naming conflicts ?).
We can do separate file for this if we want to offer templates or just let responsability to the user to create templates.

I propose to remove them (they do not exist in jqgrid) included by this commit :

788418f

We should add the column model details to the documentation.

I like the idea of replacing outdated pixel icons of jQueryUI to something more modern, like FontAwesome. free-jqgrid/jqGrid@4220e23 , demo: http://www.ok-soft-gmbh.com/jqGrid/OK/FontAwesome4.htm (although icons will look much better @ 14px font size). Are you going to include this plugin into this repo? And in generat what's the current state about merging Oleg's commits?

In the original jqGrid width of the search field in filter panel was the same as the width of the column. It is now fixed and narrower.

From #29 (comment) :

If I compile the current jquery.jqGrid.src.js from my my repository with respect of Closure Compiler I get jquery.jqGrid.min.js of the size 275 KB (282.532 bytes), but if I compile the same file using Uglify I get minimized file of the size 277 KB (284.619 bytes). So the usage of Closure Compiler seems be the best choice if one take in the consideration the final results.

https://github.com/thanpolas/grunt-closure-tools

which seems to provide all the configuration we need.

Multiple sub groups of a master group cause the master group footer to only show if the last sub group is expanded. The group footer should not be a part of the last child.

Stop resizing the grid on window.resize causing infinite loop issues. See #9 for a previously attempted fix for this.

To reproduce:

• go to http://openpsa.github.io/jsgrid/demos/kitchensink.html
• click any checkbox

Expected:

• checkbox is checked and row is selected

Actual:

• row is selected and checkbox flickers briefly and is unselected afterwards

I have bisected the issue and it seems to come from here:

89e6507

@bouks: Do you have a code example for the problem you were trying to fix? Because I think we will have to revert this commit and find a better solution. The current implementation also has the side effect that the handlers trigger when you right-click, which is also very annoying

We could do an advanced builder for end-users where they choose only what they use.

For example, only js (not css), and for uncompressed files (it's only to see % of weight) :

The "base" grid (base, common, custom, filter, formedit, jqueryui, fmatter).
All the extended functions (celledit, grouping, import, inlinedit, pivot, subgrid, tbltogrid, treegrid)
I don't include plugins in this example.

• Total : 463 ko
• Base : 348 ko
• Extendeds : 115 ko

Extendeds are 25% of the total weight.

If i applied in minified :

• Total : 283 ko
• Base : 212 ko
• Extended : 70 ko