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

Tagged: , , , , , , , , ,

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Parent rows always bold Posts
  • March 8, 2016 at 3:56 pm 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

    March 9, 2016 at 7:05 am 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/

    March 10, 2016 at 8:33 am 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

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.