Grid, Master-Detail with Stacked chart

[CH]

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?

 

 

[T. Tsonev]

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