Expand Column

[diyoyo]

Hi,
it would be nice to be able to resize/expand columns in List mode. I know we can set the percentage for each columns, but sometimes it is too restrictive. Either some "Drag and stretch" feature, or a "3-dot" link which expands locally truncated content.
Thanks.
Cheers,
Yohan.

[blueprint]

This method isn't upgrade proof (I'm sure someone can suggest a method which is) but if you do the following:

1. Download jquery.resizableColumns from here: https://github.com/dobtco/jquery-resizable-columns
2. Put the files from the `dist` folder into a `client/custom/lib/jquery.resizableColumns` folder
3. Create a `custom\Espo\Custom\Resources\metadata\app\client. json` file and add the following:

{
    "developerModeScriptList": [
        "__APPEND__",
        "client/custom/lib/jquery.resizableColumns/jquery.resizableColumns.js"
    ],
    "developerModeCssList": [
        "__APPEND__",
        "client/custom/lib/jquery.resizableColumns/jquery.resizableColumns.css"
    ]
}

4. Ensure that `isDeveloperMode` => true in config.php
5. Edit `client/src/views/record/list.js` adding the following code to the end of the `afterRender` function (circa line 1088, this is the non-upgrade proof bit):

$("table").resizableColumns();

6. Rebuild via Admin interface and refresh a page with a list in it.

Although the borders between column headers aren't visible, you should see the cursor change. You should be able to resize now

[diyoyo]

Thanks, that's a great start already.

[telecastg]

Excellent contribution blueprint here's how I would make it "upgrade proof":

create a generic base record list view that inherits the functionality of the 'views/record/list' script :

'client/custom/src/views/record/resizable-columns-list.js'

Espo.define('custom:views/record/resizable-columns-list', 'views/record/list', function (Dep) {

    return Dep.extend({

        afterRender: function () {
            if (this.allResultIsChecked) {
                this.selectAllResult();
            } else {
                if (this.checkedList.length) {
                    this.checkedList.forEach(function (id) {
                        this.checkRecord(id);
                    }, this);
                }
            }
           // make the table element re-sizable
            $("table").resizableColumns();
        }

    });

});

modify the clientDefs for all entities where you want to have the resizable column facility and write inside them:

    "recordViews": {
        "list": "custom:views/record/resizable-columns-list"
    }

By the way, if you want to always have this functionality, not just in developer mode, add this to the `custom\Espo\Custom\Resources\metadata\app\client. json` file:

 "scriptList": [
       "__APPEND__",
       "client/custom/lib/jquery.resizableColumns/jquery.resizableColumns.js"
 ],
"cssList": [
       "__APPEND__",
       "client/custom/lib/jquery.resizableColumns/jquery.resizableColumns.css" ]

[yuri]

When you hover the mouse over the cell it should show its value. Can be helpful when the cell is overflowed.

[item]

this must be "out-of-box" .. pull-request
for list - list small

Thanks for this.

[diyoyo]

Indeed, the first answer was not upgrade proof as experienced with today's upgrade.
however, telecastg solution does not work in my hands : I have the following error when inspecting:

TypeError: $(...).resizableColumns is not a function

The page is displayed as if there was nothing changed from the original Espo (unlike the non-upgrade proof version, which now displays a huge white margin before the colum titles, and does not even allow columns to be resized).

[diyoyo]

Turned out that I was in developer mode , but following telecastg , I had changed the values of the client.json.

Now, the script is working, but both non-upgrade proof and semi-upgrade proof versions are now displaying this huge white screen before column's titles.

[blueprint]

I got the huge white area at first but I realised that the CSS file for the resizableColumns was not being loaded correctly (Google developer tools helped here).

Ensure that you have the custom CSS file specified as per my original comment.

[diyoyo]

blueprint What did you change to make it work again?

[blueprint]

I just ensured that the path to the CSS file was correct and in the right folder. In my instance, it wasn't. Maybe double-check your paths.

[diyoyo]

My Path was correct.
I had to log-out and log-in again and everything went fine, actually.
Do you think there is a way to make it upgrade-proof without the need to edit every single entity's clientDef?
Thanks.

[blueprint]

The only way to guarantee that it is upgrade safe is to follow what telecastg has described.

Either that or be careful as to how you merge in the updates - I'm merging changes from the EspoCRM GitHub repository rather than installing them via the Admin interface.

The main reason for doing this is that we've made significant changes to the underlying code-base to support many more business functions and therefore just applying an update via the Admin interface would cause a lot of issues.

[Kertscher]

Hi,
I have followed the intruction.
But it dosent work.

Any advice would be welcome.

[esforim]

Wow this is a hidden gem; thanks for reviving it.

[diyoyo]

The only way to guarantee that it is upgrade safe is to follow what telecastg has described.

Either that or be careful as to how you merge in the updates - I'm merging changes from the EspoCRM GitHub repository rather than installing them via the Admin interface.

The main reason for doing this is that we've made significant changes to the underlying code-base to support many more business functions and therefore just applying an update via the Admin interface would cause a lot of issues.

I guess I saw this too late!
I updated and now the column expansion does not work anymore. and in addition, I think it is causing a bug where in form, I cannot display the popup selector for linked fields, it only relies on the auto-completion.