How to make jqgrid treegrid first row text bold

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 ?

You tried : #tree-grid .cell-wrapper :first-child ?? Remove spacing between .cell-wrapper and :first-child — Milche Patern, Feb 04 '13 at 20:16

score 1 · Accepted Answer · edited May 23 '17 at 12:04

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:

enter image description here

and another demo use more specific rule:

enter image description here

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"};
    }
}

edited May 23 '17 at 12:04

Community

1
1

answered Feb 04 '13 at 19:58

Oleg

220,925
34
403
798

Thank you. I tried this but rowattr is not called and I do'nt know how to apply this for first row only. I updated question. – Andrus Feb 04 '13 at 20:09
1

@Andrus: the reason is that you use very old version of jqGrid on the page. Is's version 4.1.2 (published 2011-07-20). The `rowattr` feature was introduced based on my suggestion in January 2012 (see [here](http://www.trirand.com/blog/?page_id=393/feature-request/introduce-rowattr-jqgrid-like-cellattr-but-for-setting-attributes-on-tr-element-instead-of-td/#p25555)). Could you update the version of jqGrid which you use? Tree Grid should work more quickly by the way. – Oleg Feb 04 '13 at 20:31
I upgraded but it still does not work: font-weight: normal is applied later and it overrides bold setting. I updated question. – Andrus Feb 05 '13 at 17:33
@Andrus: I suppose you made some simple error. Probably you just defined the CSS not specific enough. I think that demos which I added in the **UPDATED** part of my answer will help you to solve the problem finally. – Oleg Feb 05 '13 at 18:10
Thank you. `if (rd.parent === "-1")` check was required in my case to check for root node – Andrus Feb 05 '13 at 19:21
In IE8 line `return {class: "myMArking"};` causes javascript error `Expected identifier, string or number` . How to make it work in IE 8 also? – Andrus Feb 16 '13 at 19:31
1

@Andrus: You can use `return {"class": "myMArking"};` instead. – Oleg Feb 16 '13 at 20:42

score 0 · Answer 2 · answered Feb 04 '13 at 19:16

0

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

You just have to skope the 'first-child' of your .css declaration.

answered Feb 04 '13 at 19:16

Milche Patern

19,632
6
35
52

Thank you. I tried it but text does not become bold. I updated question – Andrus Feb 04 '13 at 19:43
This text is inside second grid row (inside second element. Its row contains with ` – Andrus Feb 04 '13 at 19:58
Remove spacing between .cell-wrapper and :first-child – Milche Patern Feb 04 '13 at 20:19

How to make jqgrid treegrid first row text bold

2 Answers2

Linked