How to create a personnalized Shape and modify content easily ?

[VB]

Hello,

 

I'm creating a diagram. I've done some research on how to create a custom shape, but I'm having a few problems on dynamically modifying the data of the various elements present in the shape.

1) Firstly, I've understood the code bellow that allows me to create a custom shape:

 

let newShape = function() {
            let dataviz = kendo.dataviz
            let g = new dataviz.diagram.Group()
            let dataItem = options.dataItem

            g.append(new dataviz.diagram.Rectangle({
                width: 210,
                height: 75,
                stroke: {
                    width: 0
                },
                fill: {
                    gradient: {
                        type: 'linear',
                        stops: [{
                            color: dataItem.colorScheme,
                            offset: 0,
                            opacity: 0.5
                        }, {
                            color: dataItem.colorScheme,
                            offset: 1,
                            opacity: 1
                        }]
                    }
                }
            }))
            
            g.append(new dataviz.diagram.TextBlock({
                text: dataItem.name,
                x: 20,
                y: 20,
                fill: '#fff'
            }))
            
            g.append(new dataviz.diagram.TextBlock({
                text: dataItem.props,
                x: 20,
                y: 40,
                fill: '#fff'
            }))
            return g
}

However,  I'm having trouble dynamically modifying the value of a TextBlock. 

 

Which field do I need to access, after retrieving the shape via diagram.shapes[i] , to be able to modify the "text" field of a TextBlock? Or, more generally, how can I easily retrieve an element (TextBlock, etc.) from a compound shape?

 

I've tried accessing various fields in the shape object referring to the TextBlock element and then calling shape[i].redraw( ) / .redrawVIsual( ), but no shape is updated.

 

2) Secondly, what kind of components can be added to the Group ? My goal is to add a progress bar into my shape, but I don't think that's possible. Is there a list of elements (TextBlocks, ...) that can be appended to Group ? Or any idea to have a progress bar in a shape ? Maybe using the progressbar component and attach a progress bar to each shape ? 

 

Thanks in advance, 

 

Best,

VB

[Neli]

Hi,

1) In order to change the text in a TextBlock, in case the value is changed in the dataSource, you can use the setDataSource method. Another possible approach is to change the text of the needed element using the jQuery text() method.

$('#btn').on('click', function(){
        var diagram = $("#diagram").getKendoDiagram();
        var data1 = data
        data1[0].items[1].firstName = "ANTONIO"
        diagram.setDataSource(data1)
        
        $('text:eq(4)').text('AMANDA Changed')
})

Both approaches are demonstrated in the Dojo linked here. 

2) I m afraid that having a ProgressBar in the Group is not a supported scenario. The Diagram does not support standard HTML elements. Anything that is appended to it must be "drawn". in other words, it is not possible to add an element and initalize a Kendo component inside the Diagram Shape/Group. 

Let me know in case you have any additional questions on the matter.

Regards,
Neli
Progress Telerik

[VB]

Thank you for your answer.

I found a workaround for the progress bar. I append a Rectangle in the group and want to change the width and color dynamically.

 

Regards,

VB

[Neli]

Hi,

I would suggest using the redraw method and set the new options for the needed shape:

- https://docs.telerik.com/kendo-ui/api/javascript/dataviz/diagram/shape/methods/redraw

Here you will find such an example where the width of a specific shape is changed dynamially - https://dojo.telerik.com/@NeliKondova/OZiZaNad

You could also take a look at the approach described in the Knowledge Base article linekd below:

- https://docs.telerik.com/kendo-ui/knowledge-base/changing-shape-visual-elements

Regards,

Neli