This is a migrated thread and some comments may be shown as answers.

Grid, Master-Detail with Stacked chart

1 Answer 9 Views
Grid
This is a migrated thread and some comments may be shown as answers.
CH
Top achievements
Rank 1
CH asked on 27 May 2015, 06:20 AM

Hi,

I need help on how to achieve the Master and Detail using Grid and Chart in 1.png.

 And when user click on the row, it will show the detail records like in 2.png.

 

Any way to achieve this?

 

 

1 Answer, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 29 May 2015, 08:13 AM

Hello,

My recommendation is to create a master grid with 3 columns with a sparkline in the last one.

See the bar sparkline demo. The last column there contains a stacked bar sparkline that is very close to what you need to achieve. A sample configuration would look like:

$(".bar-benefits", row).kendoSparkline({
    type: "bar",
    renderAs: "canvas",
    dataSource: {
        data: [{
            type: "Social",
            value: 9.25
        }, {
            type: "Direct",
            value: 4.41
        }],
        group: {
            field: "type",
            dir: "asc"
        }
    },
    chartArea: {
        height: 30
    },
    series: [{
        field: "value",
        gap: 0.3,
        labels: {
            visible: true,
            position: "center",
            background: "none"
        }
    }],
    valueAxis: {
        max: 10
    }
});

The detail template can be customized as shown in the demo.

I hope this helps.

Regards,
T. Tsonev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
CH
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Share this question
or