<div id="tblexpandable">/</div>
                                

$(function() {
    var localData = [
        {'brand': 'Volkswagen', 'year': 2012, 'color': 'White', 'vin': 'dsad231ff'},
        {'brand': 'Audi', 'year': 2011, 'color': 'Black', 'vin': 'gwregre345'},
        {'brand': 'Renault', 'year': 2005, 'color': 'Gray', 'vin': 'h354htr'},
        {'brand': 'BMW', 'year': 2003, 'color': 'Blue', 'vin': 'j6w54qgh'},
        {'brand': 'Mercedes', 'year': 1995, 'color': 'White', 'vin': 'hrtwy34'},
        {'brand': 'Volvo', 'year': 2005, 'color': 'Black', 'vin': 'jejtyj'},
        {'brand': 'Honda', 'year': 2012, 'color': 'Yellow', 'vin': 'g43gr'},
        {'brand': 'Jaguar', 'year': 2013, 'color': 'White', 'vin': 'greg34'},
        {'brand': 'Ford', 'year': 2000, 'color': 'Black', 'vin': 'h54hw5'},
        {'brand': 'Fiat', 'year': 2013, 'color': 'Red', 'vin': '245t2s'}
    ];

    $('#tblexpandable').puidatatable({
        caption: 'Expandable Rows',
        columns: [
            {rowToggler: true, bodyStyle: 'width:18px',headerStyle: 'width:18px'},
            {field: 'vin', headerText: 'Vin'},
            {field: 'brand', headerText: 'Brand'},
            {field: 'year', headerText: 'Year'},
            {field: 'color', headerText: 'Color'}
        ],
        datasource: localData,
        expandableRows: true,
        rowExpandMode: 'single',
        expandedRowContent: function(car) {
            return $('<div class="ui-grid" style="width:200px"></div>')
                    .append('<div class="ui-grid-row"><div class="ui-grid-col-12"><img src="resources/demo/images/car/' + car.brand + '-big.gif"/></div>')
                    .append('<div class="ui-grid-row"><div class="ui-grid-col-6">Vin</div><div class="ui-grid-col-6">' + car.vin +'</div></div>')
                    .append('<div class="ui-grid-row"><div class="ui-grid-col-6">Brand</div><div class="ui-grid-col-6">' + car.brand +'</div></div>')
                    .append('<div class="ui-grid-row"><div class="ui-grid-col-6">Year</div><div class="ui-grid-col-6">' + car.color +'</div></div>')
                    .append('<div class="ui-grid-row"><div class="ui-grid-col-6">Color</div><div class="ui-grid-col-6">' + car.year +'</div></div>');

        }
    });
});