/// <reference path="../../../jqwidgets-ts/jqwidgets.d.ts" />
function createGridWithNestedGrids(selector, secondSelector, thirdSelector) {
    var url = "../../sampledata/employees.xml";
    var source = {
        datafields: [
            { name: 'FirstName' },
            { name: 'LastName' },
            { name: 'Title' },
            { name: 'Address' },
            { name: 'City' }
        ],
        root: "Employees",
        record: "Employee",
        id: 'EmployeeID',
        datatype: "xml",
        async: false,
        url: url
    };
    var employeesAdapter = new $.jqx.dataAdapter(source, { autoBind: true });
    var orderdetailsurl = "../../sampledata/orderdetails.xml";
    var ordersSource = {
        datafields: [
            { name: 'EmployeeID', type: 'string' },
            { name: 'ShipName', type: 'string' },
            { name: 'ShipAddress', type: 'string' },
            { name: 'ShipCity', type: 'string' },
            { name: 'ShipCountry', type: 'string' },
            { name: 'ShippedDate', type: 'date' }
        ],
        root: "Orders",
        record: "Order",
        datatype: "xml",
        url: orderdetailsurl,
        async: false
    };
    var ordersDataAdapter = new $.jqx.dataAdapter(ordersSource, { autoBind: true });
    var orders = ordersDataAdapter.records;
    var nestedGrids = new Array();
    // create nested grid.
    var initrowdetails = function (index, parentElement, gridElement, record) {
        var id = record.uid.toString();
        var grid = parentElement;
        nestedGrids[index] = grid;
        var filtergroup = new $.jqx.filter();
        var filter_or_operator = 1;
        var filtervalue = id;
        var filtercondition = 'equal';
        var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
        // fill the orders depending on the id.
        var ordersbyid = [];
        for (var m = 0; m < orders.length; m++) {
            var result = filter.evaluate(orders[m]["EmployeeID"]);
            if (result)
                ordersbyid.push(orders[m]);
        }
        var orderssource = {
            datafields: [
                { name: 'EmployeeID', type: 'string' },
                { name: 'ShipName', type: 'string' },
                { name: 'ShipAddress', type: 'string' },
                { name: 'ShipCity', type: 'string' },
                { name: 'ShipCountry', type: 'string' },
                { name: 'ShippedDate', type: 'date' }
            ],
            id: 'OrderID',
            localdata: ordersbyid
        };
        var nestedGridAdapter = new $.jqx.dataAdapter(orderssource);
        if (grid != null) {
            // Get selector of nested grid
            var nestedGridSelector = grid.getElementsByTagName('div')[0];
            var nestedGridOptions = {
                source: nestedGridAdapter, width: 780, height: 200,
                columns: [
                    { text: 'Ship Name', datafield: 'ShipName', width: 200 },
                    { text: 'Ship Address', datafield: 'ShipAddress', width: 200 },
                    { text: 'Ship City', datafield: 'ShipCity', width: 150 },
                    { text: 'Ship Country', datafield: 'ShipCountry', width: 150 },
                    { text: 'Shipped Date', datafield: 'ShippedDate', width: 200 }
                ]
            };
            // Create instance for nested grid
            var instanceOfNestedGrid = jqwidgets.createInstance(nestedGridSelector, 'jqxGrid', nestedGridOptions);
        }
    };
    var records = employeesAdapter.records;
    var photorenderer = function (row, column, value) {
        var name = records[row].FirstName;
        var imgurl = '../../../images/' + name.toLowerCase() + '.png';
        var img = '<div style="background: white;"><img style="margin:2px; margin-left: 10px;" width="32" height="32" src="' + imgurl + '"></div>';
        return img;
    };
    var renderer = function (row, column, value) {
        return '<span style="margin-left: 4px; margin-top: 9px; float: left;">' + value + '</span>';
    };
    // initialization options - validated in typescript
    // jqwidgets.GridOptions has generated TS definition
    var options = {
        width: 850,
        height: 365,
        source: source,
        rowdetails: true,
        rowsheight: 35,
        initrowdetails: initrowdetails,
        rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight: 220, rowdetailshidden: true },
        columns: [
            { text: 'Photo', width: 50, datafield: 'photo', cellsrenderer: photorenderer },
            { text: 'First Name', datafield: 'FirstName', width: 100, cellsrenderer: renderer },
            { text: 'Last Name', datafield: 'LastName', width: 100, cellsrenderer: renderer },
            { text: 'Title', datafield: 'Title', width: 180, cellsrenderer: renderer },
            { text: 'Address', datafield: 'Address', width: 300, cellsrenderer: renderer },
            { text: 'City', datafield: 'City', width: 170, cellsrenderer: renderer }
        ]
    };
    // creates an instance
    var myGrid = jqwidgets.createInstance(selector, 'jqxGrid', options);
    myGrid.showrowdetails(1);
}
//# sourceMappingURL=typescript-grid-nestedgrids.js.map