Question

jqgrid treegrid is defined using code below. First level of data contains only single node displayed in first row in jqgrid.
How to make this (treegrid first row) text bold ?

I tried

#tree-grid .cell-wrapper
{
    font-weight: bold;
}

but this makes all nodes bold.

How to make bold only first node (first row) ?

treegrid is defined as

        var treegrid = $("#tree-grid");
        treegrid.jqGrid({
            loadComplete: function (data) {
                $('.tree-leaf', $(this)).css('width', '0px');
            },
            datatype: "json",
            mtype: "POST",
            height: "auto",
            loadui: "disable",
            treeGridModel: "adjacency",
            colModel: [
                    { name: "id", width: 1, hidden: true, key: true },
                    { name: "menu", classes: "treegrid-column" },
                    { name: "url", width: 1, hidden: true }
                ],
            autowidth: true,
            treeGrid: true,
            ExpandColumn: "menu",
            rowNum: 2000,
            ExpandColClick: true,
        }
                );
        treegrid.parents("div.ui-jqgrid-view").children("div.ui-jqgrid-hdiv").hide();

Update

I tried

#tree-grid .cell-wrapper :first-child
{
    font-weight: bold;
}

but bold font does not apply.

Firebug shows that element is

<span class="cell-wrapper" style="cursor: pointer;">Text which should be bold</span>

it looks like :first-child does not apply this style.

Text (span element) is inside second grid row (inside second element). Its row starts with <tr id="1" class="ui-widget-content .. . Maybe it is possible to use this for selection.

complete jqgrid layout from firebug is

<div>
<div id="gbox_tree-grid" class="ui-jqgrid ui-widget ui-widget-content ui-corner-all" dir="ltr" style="width: 188px;">
<div id="lui_tree-grid" class="ui-widget-overlay jqgrid-overlay"></div>
<div id="load_tree-grid" class="loading ui-state-default ui-state-active">Loen...</div>
<div id="gview_tree-grid" class="ui-jqgrid-view" style="width: 188px;">
<div class="ui-jqgrid-titlebar ui-widget-header ui-corner-top ui-helper-clearfix" style="display: none;">
<div class="ui-state-default ui-jqgrid-hdiv" style="width: 188px; display: none;">
<div class="ui-jqgrid-bdiv" style="height: auto; width: 188px;">
<div style="position:relative;">
<div></div>
<table id="tree-grid" class="ui-jqgrid-btable" cellspacing="0" cellpadding="0" border="0" tabindex="1" role="grid" aria-multiselectable="false" aria-labelledby="gbox_tree-grid" style="width: 188px;">
<tbody>
<tr class="jqgfirstrow" style="height:auto" role="row">
<tr id="1" class="ui-widget-content jqgrow ui-row-ltr" role="row" tabindex="-1">
<td aria-describedby="tree-grid_id" title="1" style="display:none;" role="gridcell">1</td>
<td class="treegrid-column" aria-describedby="tree-grid_menu" style="" role="gridcell">
<div class="tree-wrap tree-wrap-ltr" style="width:18px;">
<span class="cell-wrapper" style="cursor: pointer;">Text which should be bold</span>
</td>
...

Update2

I tried Oleg answer by adding

.first-row
{
    font-weight: bold;
}

and

rowattr: function (rd) {
  alert('rowattr');
        return {"class": "first-row"};
},

alert box does not appear. Also, how to apply this for first row in treegrid only?

Update 3

According to Oleg answer I upgraded to 4.4.1 (tried 4.4.4 but it does not allow to open first node).
Text is still not bold. Firebug shows that

.ui-jqgrid tr.jqgrow td {
    font-weight: normal;

is applied after first-row class and thus this class does not have any effect.

firebug output is:

.ui-jqgrid tr.jqgrow td {
    font-weight: normal; /* this overrides my style !! */
    white-space: pre;
}
.treegrid-column {
    cursor: pointer;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
.first-row {
    font-weight: bold;
}

The following code is used to open tree on load:

            gridComplete: function () {
                setTimeout(function () {
          var rData2 = treegrid.getGridParam('data');
              treegrid.expandRow(rData2[0]);
              treegrid.expandNode(rData2[0]);
           },0);
          },

In 4.4.4 it does not open tree. In 4.4.1 it works. Which is propery way to make first node bold and open it ?

Answer 1

I think you can solve the problem by usage of rowattr if you want to make the whole row bold (see the answer). You can assign additional class or style attribute on the specified row. Alternatively you can use cellattr to assign class or style only on the cell, for example only on the cell in "menu" column (see the answer). I used standard grids in the referenced answers, but you can use rowattr and cellattr in the same way with TreeGrids. The access to the columns parent, level and isLeaf existing in the TreeGrid can be helpful for you in the implementation.

UPDATED: Here is the demo which mark bold all items which has no parent:

and another demo use more specific rule:

In both cases I used CSS rule

.ui-jqgrid tr.myMarking td { font-weight: bold; }

The implementation of rowattr is very simple and can be for example as below

rowattr: function (rd) {
    if (rd.parent === "null" && rd.name === "Cash") {
        return {"class": "myMarking"};
    }
}