jQuery UI Widgets Forums Grid Nested Grid Color

This topic contains 4 replies, has 2 voices, and was last updated by  simcon94 9 years, 3 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Nested Grid Color #61798

    simcon94
    Participant

    Hello,
    can i set the background color of expnded Row in nested grid?

    Nested Grid Color #61802

    Dimitar
    Participant

    Hello simcon94,

    Please clarify: do you need to set the background colour of the row that contains the nested grid or a row in the nested grid?

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Nested Grid Color #61813

    simcon94
    Participant

    I will set the background colour of the row that contains the nested grid

    Nested Grid Color #61848

    Dimitar
    Participant

    Hi simcon94,

    Here is an example. We hope it is helpful to you.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <style type="text/css">
            .yellowCell
            {
                background-color: Yellow;
            }
        </style>
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                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);
    
                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 });
                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).children()[0]);
                    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) {
                        grid.jqxGrid({
                            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 }
                           ]
                        });
                    }
                }
    
                var photorenderer = function (row, column, value) {
                    var name = $('#jqxgrid').jqxGrid('getrowdata', 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>';
                }
    
                var expandedRows = [];
    
                var cellclassname = function (row, column, value, data) {
                    if (expandedRows.indexOf(row) != -1) {
                        return "yellowCell";
                    }
                };
    
                // creage jqxgrid
                $("#jqxgrid").jqxGrid(
                {
                    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, cellsrenderer: photorenderer, cellclassname: cellclassname },
                          { text: 'First Name', datafield: 'FirstName', width: 100, cellsrenderer: renderer, cellclassname: cellclassname },
                          { text: 'Last Name', datafield: 'LastName', width: 100, cellsrenderer: renderer, cellclassname: cellclassname },
                          { text: 'Title', datafield: 'Title', width: 180, cellsrenderer: renderer, cellclassname: cellclassname },
                          { text: 'Address', datafield: 'Address', width: 300, cellsrenderer: renderer, cellclassname: cellclassname },
                          { text: 'City', datafield: 'City', width: 170, cellsrenderer: renderer, cellclassname: cellclassname }
                      ]
                });
    
                $("#jqxgrid").on('rowexpand', function (event) {
                    // event arguments.
                    var args = event.args;
                    // row details.
                    var details = args.details;
                    // row's bound index.
                    var rowBoundIndex = args.rowindex;
    
                    if (expandedRows.indexOf(rowBoundIndex) == -1) {
                        expandedRows.push(rowBoundIndex);
                    }
                });
    
                $('#jqxgrid').on('rowcollapse', function (event) {
                    // event arguments.
                    var args = event.args;
                    // row details.
                    var details = args.details;
                    // row's bound index.
                    var rowBoundIndex = args.rowindex;
    
                    if (expandedRows.indexOf(rowBoundIndex) != -1) {
                        expandedRows.splice(expandedRows.indexOf(rowBoundIndex), 1);
                    }
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="jqxgrid">
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Nested Grid Color #62317

    simcon94
    Participant

    Ok. Thanks it works…

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.