jQuery UI Widgets Forums Gauges and Maps TreeMap Parent rows always bold

This topic contains 2 replies, has 2 voices, and was last updated by  Esnaolo 3 years, 10 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Parent rows always bold #82232

    Esnaolo
    Participant

    Hello,

    is there an easy way to make the font bold only in the parent rows? The child rows shall stay as they are.

    Thanks in advance!

    Esnaolo

    Parent rows always bold #82248

    Dimitar
    Participant

    Hello Esnaolo,

    You have posted in the TreeMap forum, but I guess you are referring to jqxTreeGrid. If so, here is how to achieve your requirement using cellsRenderer:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <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/jqxdatatable.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtreegrid.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function ()
            {
                // prepare the data
                var source =
                {
                    dataType: "csv",
                    dataFields: [
                        { name: 'EmployeeKey', type: 'number' },
                        { name: 'ParentEmployeeKey', type: 'number' },
                        { name: 'FirstName', type: 'string' },
                        { name: 'LastName', type: 'string' },
                        { name: 'Title', type: 'string' },
                        { name: 'HireDate', type: 'date' },
                        { name: 'BirthDate', type: 'date' },
                        { name: 'Phone', type: 'string' },
                        { name: 'Gender', type: 'string' },
                        { name: 'DepartmentName', type: 'string' }
                    ],
                    hierarchy:
                    {
                        keyDataField: { name: 'EmployeeKey' },
                        parentDataField: { name: 'ParentEmployeeKey' }
                    },
                    id: 'EmployeeKey',
                    url: '../sampledata/employeesadv.csv'
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
    
                var cellsRenderer = function (row, column, value, rowData)
                {
                    if (rowData.records !== undefined)
                    {
                        return '<span style="font-weight: bold;">' + value + '</span>';
                    } else
                    {
                        return '<span>' + value + '</span>';
                    }
                };
    
                // create Tree Grid
                $("#treeGrid").jqxTreeGrid(
                {
                    width: 850,
                    source: dataAdapter,
                    pageable: true,
                    columnsResize: true,
                    ready: function ()
                    {
                        // expand row with 'EmployeeKey = 32'
                        $("#treeGrid").jqxTreeGrid('expandRow', 32);
                    },
                    columns: [
                      { text: 'FirstName', dataField: 'FirstName', minWidth: 100, width: 200, cellsRenderer: cellsRenderer },
                      { text: 'LastName', dataField: 'LastName', width: 200, cellsRenderer: cellsRenderer },
                      { text: 'Department Name', dataField: 'DepartmentName', width: 150, cellsRenderer: cellsRenderer },
                      { text: 'Title', dataField: 'Title', width: 300, cellsRenderer: cellsRenderer },
                      { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120, cellsRenderer: cellsRenderer },
                      { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120, cellsRenderer: cellsRenderer },
                      { text: 'Phone', dataField: 'Phone', cellsFormat: 'd', width: 120, cellsRenderer: cellsRenderer }
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="treeGrid">
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    Parent rows always bold #82306

    Esnaolo
    Participant

    Hi again,

    thanks for your help and sorry about posting in the wrong board.

    Your codes works therefore that the bold problem is solved but now i have another problem when i am using your code:

    When i use cellrenderer it seems as if cellsformat doesn’t work no longer. For example the date format is broken and number columns don’t have the cellsformat:’d’ anymore. It only shows the raw number from the database.

    Greetings,
    Esnaolo

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

You must be logged in to reply to this topic.