Our state of the art Gantt chart


Post by sachidanand »

Hello Team,

We are using gantt in our application . We just wanted to check , do we have the feasibility to use our own custom component when we double click on gantt cell to edit the value.


Post by saki »

We have a demo that shows how to use Angular components as renderers: https://bryntum.com/examples/grid/frameworks/angular/angular-renderer/dist/angular-renderer/

Unfortunately, we do not have a similar demo for editors but I believe that the concept used in the demo (custom elements) could be also used for editors. Mind please that editors must have some methods implemented to work correctly.

Could you please give us a screenshot and/or a description of the editor you need? Maybe it is achievable by combining or extending existing Bryntum widgets.


Post by sachidanand »

Hello Team,

In the attached sample project you could see that here I tried using my custom angular component(SampleComponent) to render the data in each cell. ( inside app.component.ts for the field "city" ) inside the renderer method.

But I am not able to see the dropdown values in the cell. Could you please let me know on how to handle this scenario.

Attachments
bryntum-grid sample.zip
(275.6 KiB) Downloaded 45 times

Post by alex.l »

You need to register Custom Element, now you just trying to render Angular Component, which is not supported.
Please review a source code of mentioned above example https://bryntum.com/examples/grid/frameworks/angular/angular-renderer/dist/angular-renderer/
You can find it in sources you downloaded, in folder examples/frameworks/angular/angular-renderer
It's also described here with example https://bryntum.com/docs/grid/guide/Grid/integration/angular/guide#using-angular-components-as-renderers

All the best,
Alex


Post by sachidanand »

Hello Team,

In the attached application when I am passing data as an object to my custom angular component inside app.config.ts at line number 74, it's not passing the actual value of the object . Instead it's passing "[object object]" (as we can see in the attached image of console).

Could you please help me with this , why this behavior.

Attachments
Data as object.PNG
Data as object.PNG (23.83 KiB) Viewed 432 times
gantt-angular-renderer.zip
(375.34 KiB) Downloaded 38 times

Post by marcio »

Hey,

You can use it like this:

renderer(data: { value : String; record : any }): String {
                const { record } = data;
                // Use registered Custom Element tag name and pass it attributes
                return `
                    <color-renderer value="${record.color}"></color-renderer>
                `;
            }

But it's indeed strange, and the value should be used as well. I create a ticket to investigate it https://github.com/bryntum/support/issues/4880

Best regards,
Márcio


Post Reply