Search code examples
cssjqgrid

JqGrid make selected rows and Hovering not follow the Alternate row coloring scheme

How do I manage to have the hovering and selected rows (text color and background color) not following the alternate row scheme ?

Here is my regular grid (with the text color issue) enter image description here

And I also would like to go from this : enter image description here

To this : enter image description here

Here is my HTML page with JS code, I'm using standard accordion theme with local data.

{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
<meta content="text/html; charset=utf-8" />

    <!-- The jQuery library is a prerequisite for all jqSuite products -->
    <script type="text/ecmascript" src="{% static 'js/jquery.min.js'%}"></script>
    <!-- Language set We support more than 40 localizations -->
    <script type="text/ecmascript" src="{% static 'js/trirand/i18n/grid.locale-en.js'%}"></script>
    <!-- This is the Javascript file of jqGrid -->
    <script type="text/ecmascript" src="{% static 'js/trirand/jquery.jqGrid.min.js'%}"></script>

    <link type="text/css" rel="stylesheet"  media="screen" href="{% static 'css/trirand/ui.jqgrid.css'%}" />

    <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
    <link rel="stylesheet" type="text/css" media="screen" href="{% static 'css/jquery-ui.css'%}" />
    <!-- The link to the CSS that the grid needs -->
    <link rel="stylesheet" type="text/css" media="screen" href="{% static 'css/trirand/ui.jqgrid.css'%}" />

</head>
<body>



<table id="jqGrid"></table>
    <div id="jqGridPager"></div>

<script type="text/javascript">

        var MaingridQueryResults_1 = {{available_lessons|safe}};
        var SubgridQueryResults_1 = {{subavailable_lessons|safe}};

        // Main grid
        $("#jqGrid").jqGrid({
            datatype: 'local',
            data: MaingridQueryResults_1,
            colModel: [
                {name: 'id', label: 'id'},
                {name: 'first_name', label: 'first_name'},
                {name: 'last_name', label: 'last_name'},
                {name: 'email', label: 'email'},
                {name: 'phone', label: 'phone'},
                {name: 'address', label: 'address'},
                {name: 'city', label: 'city'},
                {name: 'state', label: 'state'},
                {name: 'zipcode', label: 'zipcode'},
                {name: 'regarde', label: 'regarde'}
            ],

            width: 900,
            height: 300,
            pager: "#jqGridPager",
            //toppager: true,
            rowNum: 20,
            rowList : [20,30,50],
            viewrecords: true,
            altRows: true,
            rownumbers: true,
            rownumWidth: 25,
            multiselect: true,
            multiboxonly: true,
            //multikey:"shiftKey",

            ondblClickRow: function (rowid) {
                var rowData = $(this).getRowData(rowid);
                document.location.href = "../record/" + rowData['id']
            },
            loadComplete: function () {
                $(this).find(">tbody>tr.jqgrow:visible:odd").addClass("strippedAltRows");
            },
            subGrid: false,
            isHasSubGrid : function(ids) {
                var ret = false;
                for(var i = 0; i < SubgridQueryResults_1.length; i++) {
                    if(SubgridQueryResults_1[i].id == ids) {// change .id to name of object you want (idcontact ?)
                        ret = SubgridQueryResults_1[i];
                        return ret
                        break;
                    }
                }
                return ret;
            },
            subGridRowExpanded: function (subgridDivId, rowId) {
                //console.log("rows " + rowId)
                for (var i = 0; i < SubgridQueryResults_1.length; i++) {
                    //console.log("Sub id " + SubgridQueryResults_1[i].id)
                    if (SubgridQueryResults_1[i].id == rowId) {// change .id to name of object you want (idcontact ?)
                        //console.log("loop inside subav  " + SubgridQueryResults_1[i].id)
                        var treza = SubgridQueryResults_1.filter(element => element.id == [rowId]) // change .id to name of object you want (idcontact ?)
                        //console.log("treza  " + JSON.stringify(treza))
                    }
                }

                //console.log("subgridivid " +subgridDivId)
                var subgridTableId = subgridDivId + "_t";
                $("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>");
                // Subgrid
                $("#" + subgridTableId).jqGrid({
                    datatype: 'local',
                    data: treza,
                    colModel: [
                        {name: 'id', label: 'id'},
                        {name: 'first_name', label: 'first_name'},
                        {name: 'last_name', label: 'last_name'},
                        {name: 'email', label: 'email'},
                        {name: 'phone', label: 'phone'},
                        {name: 'address', label: 'address'},
                        {name: 'city', label: 'city'},
                        {name: 'state', label: 'state'},
                        {name: 'zipcode', label: 'zipcode'},
                        {name: 'regarde', label: 'regarde'}
                    ],
                    multiselect: true,
                    multiboxonly: true,
                    multikey:"shiftKey",
                });
            }

        });
        // color of bottom pager
        //$("#jqGridPager").css("background", "white")
        //$("#jqGridPager").css("color", "black")
        // color of altrow
        //$("tr.jqgrow:odd").css("background", "#DDDDDC");
    </script>

</body>

</html>
Solution

  • I made an example

    It works using this:

    .ui-state-highlight{ opacity: 1!important; background: #0000 !important}