Displaying linear gauge with each treeview item

[Gaurav]

I'm trying to clone in Kendo one of our existing graphs made using another tool, see attached image for how the graph should look. Basically, you can think of the first column as containing a hierarchial list of items that we'd like to model using a treeview. The last column is a line visualizing the time period during which the item was active. The other columns are a textual representation of the start time, duration and the end time the item was active.

Any way I can achieve this by attaching a linear guage (configured to look just like a solid bar) to each item in the treeview? Ideally, I'd also like to specify the type of the treeview elements as a record (grid) with custom fields, where a field can hold any type of item including other kendo controls. Is something like this doable?

[Alexander Valchev]

Hi Gaurav,

You can configure the gauge to look like a solid bar by hiding its line and label elements. As an example:

$("#gauge").kendoLinearGauge({

    pointer: {

        value: value

    },

    scale: {

        min: 0,

        max: 10,

        vertical: false,

        line: {

            visible: false

        },

        labels: {

            visible: false

        }

    }

});

In order to include the gauge in the TreeView you may use a template. You should initialize the gauge widgets after the node is rendered, for example at the dataBound event.

Ideally, I'd also like to specify the type of the treeview elements as a record (grid) with custom fields, where a field can hold any type of item including other kendo controls. Is something like this doable?

I am not sure if I understood correctly the specifications of your scenario. On the provided screen shot I see a TreeGrid - KendoUI does not have such widget at present. It is not possible to transform the TreeView into a Grid either.

I hope this will help.

Regards,
Alexander Valchev
the Telerik team