Ways to create the initial row text in jqgrid treegrid appear bold

Question

Ways to create the initial row text in jqgrid treegrid appear bold

Trying to make the text in the first row of a jqgrid treegrid bold? Here's what I attempted:

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

However, this makes all nodes bold. How can I make only the first node (first row) bold?

The treegrid is defined as follows:

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 also tried:

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

This didn't apply the bold font. The element shown in Firebug is a span with class "cell-wrapper" which contains the text that should be bold. It seems like :first-child doesn't work for this style.

Is it possible to use the second grid row element with

<tr id="1" class="ui-widget-content ..

to select and style the text within the corresponding cell?

Firebug displays the complete jqgrid layout as:

<div>
<div id="gbox_tree-grid" class="ui-jqgrid ui-widget ui-widget-content ui-corner-all" dir="ltr" style="width: 188px;">
...

Update 2:

Following Oleg's suggestion, I added the CSS rule:

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

And used:

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

The alert box did not appear. Also, how do I apply this styling specifically to the first row in the treegrid?

Update 3:

After upgrading to version 4.4.1 per Oleg's advice, the text is still not bold. Firebug shows conflicting styles being applied after the "first-row" class. This is likely preventing the desired effect.

The code snippet used to open the tree on load is:

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

In version 4.4.4, the tree does not expand correctly. In version 4.4.1, it works fine. What is the correct way to make the first node bold and expand it properly in the treegrid?

javascript jquery css jquery-ui jqgrid

Answer 1

Answer №1

To tackle the issue, consider using the rowattr function to make an entire row bold. You can specify additional class or style attributes for the desired row. Another option is to utilize cellattr to apply styling only to a specific cell, such as those in the "menu" column. While the referenced examples use standard grids, the same approach can be applied to TreeGrids by leveraging rowattr and cellattr. Accessing columns like parent, level, and isLeaf in TreeGrid can aid in your implementation.

UPDATED: Check out this demo where all items without a parent are highlighted in bold.

Here is another demo with a more specific rule:

In both cases, a CSS rule was used:

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

The implementation of rowattr is straightforward, like the example below:

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

Answer 2

To tackle the issue, consider using the rowattr function to make an entire row bold. You can specify additional class or style attributes for the desired row. Another option is to utilize cellattr to apply styling only to a specific cell, such as those in the "menu" column. While the referenced examples use standard grids, the same approach can be applied to TreeGrids by leveraging rowattr and cellattr. Accessing columns like parent, level, and isLeaf in TreeGrid can aid in your implementation.

UPDATED: Check out this demo where all items without a parent are highlighted in bold.

Here is another demo with a more specific rule:

In both cases, a CSS rule was used:

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

The implementation of rowattr is straightforward, like the example below:

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

Answer 3

Answer №2

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

To emphasize the first element in your CSS styling, simply target the 'first-child' using the appropriate selector.

Answer 4

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

To emphasize the first element in your CSS styling, simply target the 'first-child' using the appropriate selector.

Ways to create the initial row text in jqgrid treegrid appear bold

Answer №1

Answer №2

Similar questions

Is it possible to change the background color of a Bootstrap button using CSS overrides?

Encountering an error message stating, "Unable to interpret property

Is there a way to use findByIdAndUpdate() without inadvertently removing any existing data?

The signup process is experiencing the unusual occurrence of the Catch block being executed before the

Encountering an issue with a <a> tag containing a <div> element with two columns

ReactJS Error: The property 'hubConnection' is not defined on type 'JQueryStatic'

Evaluating TypeError in CoffeeScript using Jasmine with Backbone.js

The phone number is not able to be clicked on

The challenge of synchronizing Javascript and PHP code

Tips for refreshing a live ajax call to animate a circle

Tips for incorporating an outside model into vue.js with babylon js

To change the font color to red when clicked, I must create a button using HTML, CSS, and Javascript

Current selection in a dynamic menu within an Express universe

Open Zurb Foundation Reveal Modal from the bottom of the screen

Experiencing issues with your Jquery Slider?

The JSON.stringify function encounters difficulties when trying to format an object into

How do I execute a Next.js script that utilizes `fs` and `sharp` during development with Webpack?

Update nested child object in React without changing the original state

What are the limitations of sorting by price?

Discover how to transform a collection of numbers into a more expansive set that accurately reflects the original set