Add multiple check box and dropdown list to cell of table

Dear All,

I hope everyone goes well.
Recently I would like to add multiple check box and/or drop down list to a cell of the table. Is it possible to datagrok?
Single checkbox is available when I added column as boolean as a coulmn type.
Kind regards,

Taka

Hi,
as far as I know, there is no out-of-the-box renderer, that allows this.
But there is always a solution. You can develop a custom cell renderer that renders cell value as a check-box list.

Also, refer to custom cell rendering samples:

If you need any additional help – let me know.

1 Like

Hi Taka, I just wonder what you wanted to use multiple checkbox for? While you can do the sort of customizations that Alexander described, perhaps there is a simpler way to achieve your goal.

Regarding choices, there is a way to enforce a controlled vocabulary where the only way to edit a value is to use a drop-down list. Click on a cell in a column to make it current, then press F2 to open column properties, and add the .choices tag like shown in the picture:

image

1 Like

Hi @alex.paramonov @skalkin,

Thaks for your advice!
.choices option seems nice because it is easy to use however I would like to add multiple check box on the cell of Hit triage and Hit design if possible.
@alex.paramonov if I would like to add the following function to my own datagrok env, how can I do it?

Should I modify the code of container?
Thanks,

Taka

Hi Taka,

The easiest way is to make a package with customizations.

It’s easy, first you need to create a package

Then you can create a custome cell renderer:

Alsot, you can use package austostart package function to execute any code on platform start.

Thanks! I’ll try it.

Hi Taka.

Could you please describe what exactly do you want to have in HT/HD or maybe provide an example so that we may be able to assist you better.

I mean, what Alex described is technically correct but this will lead you towards developing custom packages for Datagrok in JavaScript, which is probably not what you were looking for. Perhaps there is an easier solution to what you are trying to solve. You said you want a multiple check box - perhaps you want to store some data along with the designed molecule and edit it via multiple checkboxes, or maybe you want to retrieve something from your internal database and visualize with checkboxes? We might have some out-of-the-box solutions.

Hi @skalkin @drizhinashvili,
Thanks for your reply. I would like to track hypothesis or objective of the each design. How everr unstructured format such as comment cell is not useful for analysis.
So I would like to simple checkbox cell for the porpose.
For example check box like…

â–ˇADME
â–ˇPotency
â–ˇTox
â–ˇother
Thanks,

Taka

1 Like

Hi @seritaka.gmail.com, got it, thanks for the explanation. This looks like a good feature that Datagrok should provide out-of-the-box. Here’s the corresponding ticket; I won’t take long to implement, and I think it will be a part of the existing PowerGrid package, so there is no need to wait for the new core release. Stay tuned :slight_smile:

Best,
Andrew

2 Likes

That sounds cool. Thanks for your prompt reply!

Almost done (as well as the somewhat connected “tags” cell type).

image

Currently, it works with cells where values are comma-separated, and a special “.choices” tag that defines all possible values. Will that be enough for your needs? We were also planning to make this cell type work with this table’s boolean columns, that might be useful as well.

  const dis = t.col('disease')!;
  dis.set(0, 'Anxiety, Glaucoma');
  dis.set(1, 'Hepatitis A, Glaucoma');
  dis.setTag(DG.TAGS.CHOICES, JSON.stringify(['Anxiety', 'Hepatitis A', 'Glaucoma']));
  dis.setTag(DG.TAGS.CELL_RENDERER, 'MultiChoice');
2 Likes

It seems nice!
I would like to use the cell on my project.
And if I have any question or requests I will back to here.
Thanks again.
Taka

Hi Taka,

As Andrew said, we’ve implemented the MultiChoice cell renderer and the Tags cell renderer. It is already available in the PowerGrid package v1.3.0. However, this is still a beta version, so use it at your own risk.

In the code below you can see how to set the cell renderer to the needed type.

const df = grok.data.demo.demog(100);
grok.shell.addTableView(df);
const dis = df.col('disease');
const site = df.col('site');
dis.set(0, 'Anxiety, Glaucoma');
dis.set(1, 'Hepatitis A, Glaucoma');
dis.setTag(DG.TAGS.CHOICES, JSON.stringify(['Anxiety', 'Hepatitis A', 'Glaucoma']));
dis.setTag(DG.TAGS.CELL_RENDERER, 'MultiChoice');
site.setTag(DG.TAGS.CELL_RENDERER, 'Tags');

Kind regards,
Dmytro

2 Likes