[Feature request] Allow different types of cell in same column.

[harshal-dhumal]

There should some mechanism to render different types of cell in same column.

[harshal-dhumal]

One solution could be to pass callback function in column schema which will be called before every cell being rendered. (function will be called with contex [this] as current column and argument as current model instance) And that function should return valid cell class to make new cell instance.
eg:

column: [ {name: 'name', label:'Name', type:'text', editable: false, cell: 'string'},
          {name: 'value', label:'Value', type: 'text', editable: true,
             cellFunction: function(model){
                     if (isNaN(model.get(this.get('name')))) {
                         return "string";  // Backgrid.StringCell
                     } else {
                         return Backgrid.NumberCell;
                     }                          
                 }
           },
           { name: 'database', label:'Database', type: 'text', editable: false},
       .
       .

[lkurylo]

Is anybody working on this?
I would need this too.

[crissty]

Is it working? I have the next error:

TypeError: column.get(...) is not a constructor.

Thanks!

[harshal-dhumal]

Well I have raised pull request for this feature without test cases but it's not merged yet.

Alternatively you can still make this working without waiting for pull request get merged.

Approach 1 (Not recommended): I have setup another backgrid repo with working example. You can visit repo.

Approach 2 (Recommended): Extend backgrid itself (Thanks to JavaScript's Prototype-Based Inheritance) and include this feature. You will need to add some code (I'll provide working code reference below).

In pgdmin4 open source project we have used this feature many places. pgAdmin4 is a database management tool so based on datatype in left column we need to render appropriate cell (for eg. string, integer, number, checkbox, boolean cell) in right column and this where I realized backgrid to have such feature.

How to implement.
One time code you'll need to add this feature in backgrid.
Refer this commit from pgAdmin4 source code.

You'll only need code change from this file web/pgadmin/static/js/backgrid/backgrid.pgadmin.js from above commit.
This code will add this feature in backgrid.

Examples:
Refer this file web/pgadmin/browser/server_groups/servers/static/js/variable.js from same commit for working example.

Also there are many other places where we have used this feature.

schema.js
debugger_ui.js
(search for cellFunction in both above files)

[crissty]

Many Thanks!!

I have got make this work, but only controlled models that come from the server.
I would like to control on the fly, after modifications or new models.

Any ideas?

[harshal-dhumal]

For new model this should be working. Make sure you are adding new models in collection properly (collection.add()). This will automatically trigger "add" event on collection and backgrid listens to this event, creates and inserts new row. While creating new row it get cell class from cell attribute of column schema or calls cellFunction (if provided) to get new cell class.

Regarding controlling such behavior on the fly (model modification) there is no support in backgrid.
However you can still achieve such behavior by creating custom row which listens model's "change" event and re-render row again. Before re-rendering row make sure you change cell class for that particular column and then re-render the row.

We had such requirement in pgAdmin4. If user changes variable type in left column then corresponding cell in right column (in same row) should change.

See below two screen-shots
In first you will see variable "application name" whose value is string so cell in value column is string cell.
In second user has changed variable to "array nulls" which takes only boolean values so cell in value column in same row is changed to switch cell (switchcell our custom cell for boolean cell or checkbox cell)

String cell in value column

Switch cell (boolean cell) in value column

You can find relevant code in this commit (search for var VariableRow which is custom row which handles changing of cell (cell type) on the fly on model change i.e variable name change)