add multi columns form option for Create dialog and Edit Dialog

[birddevelper]

I have been using this precious plugin for 5 years. Many times my clients complained about forms vertical style, because it goes out of screen area in case of about 7+ number of fields. Regardless of this issue, sometimes developers need to have wide form dialog instead of long vertical one.

I added two options createFormColumns and editFormColumns to jTable. The default number is 1 for both options.

Create form with 14 fields in one column :

you can see that the form goes behind the taskbar and the save button can't be reached.

Create form with 14 fields in two columns :

[hikalkan]

Thank you for your contribution, this was a highly requested feature.

[axelmoe]

sounds very very interesting! what timeline is planned for v2.7?
and by the way, many many thanks for this great plugin

HI hikalkan,
any updates??

[NonLinearThoughts]

It is useless if we can't have it. The request is about 2020 and now we have 2024. I give up this plugin. It is not so flexible as I thought and it seems as a dead project even if there are too many issues that can be solved. All fields in one vertical column, headers are covered when the header text is greater that header width (although the broken text goes below but is not visible and is covered by the first line of the table of entries), There is not even a hint of how to have autocomplete feature in the form's text field...

[birddevelper]

It is useless if we can't have it. The request is about 2020 and now we have 2024. I give up this plugin. It is not so flexible as I thought and it seems as a dead project even if there are too many issues that can be solved. All fields in one vertical column, headers are covered when the header text is greater that header width (although the broken text goes below but is not visible and is covered by the first line of the table of entries), There is not even a hint of how to have autocomplete feature in the form's text field...

You can use my fork, I have added some other features

[NonLinearThoughts]

It is useless if we can't have it. The request is about 2020 and now we have 2024. I give up this plugin. It is not so flexible as I thought and it seems as a dead project even if there are too many issues that can be solved. All fields in one vertical column, headers are covered when the header text is greater that header width (although the broken text goes below but is not visible and is covered by the first line of the table of entries), There is not even a hint of how to have autocomplete feature in the form's text field...

You can use my fork, I have added some other features

It doesn't work. It throws errors. The problem is with the first self.options.recordPreview in the function _addColumnsToHeaderRow where the self is not defined as var self=this;. When I added it was ok.
ALSO there is a problem with the appear of date columns and fields (datepicker). The month part is 00 to all dates!!!
I'm really curious how it might have worked for you!!!

[liedekef]

In my opinion this extension is not needed, I can achieve the same using plain CSS:

.jtable-input-field-container {
    margin-bottom: 5px;
    display: inline-block;
    float: none;
}
.jtable-dialog-form {
    display: block;
    width: 680px;
    -moz-column-gap:40px;
    /* Firefox */
    -webkit-column-gap:40px;
    /* Safari and Chrome */
    column-gap:40px;
    -moz-column-count:2;
    /* Firefox */
    -webkit-column-count:2;
    /* Safari and Chrome */
    column-count:2;
}
form.jtable-dialog-form div {
    width: 100%;
}

Not even sure if all is still needed (I did this years ago), but easy enough to adapt to another number of columns.

Also, fyi: I've forked the plugin to create a version that is not ui-dependant anymore and has some new interesting things:

• visibility can be "hidden", "visible" (the default), or "separator" (in which case the value will be bold, but not selectable nor a real column, just a bold-entry in the vibility selection)
• added div around the internal table, using css this is now responsive:

.jtable-table-div {
    display: block;
    overflow-x:auto;
}
.jtable-table-div > table {
    overflow:hidden;
}

• added listQueryParams to jtable-call, to indicate parameters to be loaded on every load-call, can be a function
  Examples:

            listQueryParams: {
                    'action': "eme_people_list",
                    'eme_admin_nonce': emepeople.translate_adminnonce,
            }

Or, if you want data evaluated live:

            listQueryParams: function () {
                let params = {
                    'action': "eme_people_list",
                    'eme_admin_nonce': emepeople.translate_adminnonce,
                    'trash': $_GET['trash'],
                    'search_person': $('#search_person').val(),
                    'search_groups': $('#search_groups').val(),
                    'search_memberstatus': $('#search_memberstatus').val(),
                    'search_membershipids': $('#search_membershipids').val(),
                    'search_customfields': $('#search_customfields').val(),
                    'search_customfieldids': $('#search_customfieldids').val(),
                    'search_exactmatch': exactmatch
                }
                return params;
            },

The extra param to the load-call itself will add/override params defined in listQueryParams. Example:
$('#PeopleTableContainer').jtable('load', {'test':"eee"});

• the queryparams for paging and sorting are now also added to the GET/POST as regular params, no more forced to the url as GET params
• rewritten without jquery-ui

I'll be putting that on my github today.