CODEWITHSUNDEEP
jqgridfree-jqgrid
Dore.Ad
Dore.Ad

Reputation: 163

How apply bootstrap to headers and navbars?

In the code below creates a sample treegrid jqGrid the image shows the generated grid:

enter image description here

here is code: 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css">
    <link rel="stylesheet" href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css">
    <style>

        .ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-hdiv {
            background-color: #ffaaaa;
        }
        .ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-toppager,
        .ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-pager {
            background-color: #ffaaaa;
        }
    </style>

</head>
<body>

<table id="list10"></table>
<div id="pager"></div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
<script>
    $.jgrid = $.jgrid || {};
    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;
</script>
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>

<script type="text/javascript">
    $(function(){
        var mydata = [
            {id:"1",Name:"Main Menu",MenuId:"1",MenuName:"Menu1",
                level:"0", parent:"", isLeaf:false, expanded:false},
            {id:"1_1",Name:"Sub Menu",MenuId:"1",MenuName:"Menu1",
                level:"1", parent:"1", isLeaf:false, expanded:false},
            {id:"1_1_1",Name:"Sub Sub Menu",MenuId:"1",MenuName:"Menu1",
                level:"2", parent:"1_1", isLeaf:true, expanded:false},
            {id:"1_2",Name:"Sub Menu1",MenuId:"1",MenuName:"Menu1",
                level:"1", parent:"1", isLeaf:true, expanded:false},
            {id:"2",Name:"Main Menu1",MenuId:"2",MenuName:"Menu2",
                level:"0", parent:"", isLeaf:false, expanded:true},
            {id:"2_1",Name:"Main Menu sdaadadadadadaadsdada",MenuId:"2",MenuName:"Menu2",
                level:"1", parent:"2", isLeaf:true, expanded:false},
            {id:"2_2",Name:"Main Menu",MenuId:"2",MenuName:"Menu2",
                level:"1", parent:"2", isLeaf:true, expanded:false},
            {id:"3",Name:"Main Menu2",MenuId:"3",MenuName:"Menu3",
                level:"0", parent:"", isLeaf:false, expanded:false},
            {id:"3_1",Name:"Main Menu",MenuId:"3",MenuName:"Menu3",
                level:"1", parent:"3", isLeaf:true, expanded:false},
            {id:"3_2",Name:"Main Menu",MenuId:"3",MenuName:"Menu3",
                level:"1", parent:"3", isLeaf:true, expanded:false}
        ];

        $("#list10").jqGrid({
            datatype: "local",
            data: mydata,
            colNames:['id','Name','MenuId','Menu Name'],
            colModel:[
                {name:'id',index:'id',width:100,hidden:true},
                {name:'Name',index:'Name',width:150},
                {name:'MenuId',index:'MenuId',width:100},
                {name:'MenuName',index:'MenuName',width:100}
            ],
            cmTemplate: { autoResizable: true, editable: true },
            autoResizing: { compact: true },
            iconSet: "fontAwesome",
            guiStyle: "bootstrap",
            height:'auto',
            pager : "pager",
            sortname: 'id',
            treeGrid: true,
            treeGridModel: 'adjacency',
            treedatatype: "local",
            ExpandColumn: 'Name',
            caption: "Sample Tree View Model"
        });
    })
</script>
</body>
</html>

i would like to know do the followings:

  1. As you can see the leaf Main Menu sdaadadadadadaadsdada is really long for the leaf. How do i wrap it in such a way that the text is visible to the user without expanding the column at the same time the text must keep the alignment with the radio button (bullet) icon.

  2. How do i change the background and text color of the caption bar at the top?

  3. How do i change the default icon images of the tree node (the arrows) and leaf (bullet/radio button icon) to plus/minus (for parent nodes) icon and dark dot (for leaves)?

  4. When i click a row currently its showing green color, how do i change this to another color?

  5. When i hover over the rows it highlights with grey, how do i change this color as well?

Upvotes: 1

Views: 290

Answers (1)

Oleg
Oleg

Reputation: 221997

Try to add the following CSS rule:

tr.jqgrow > td > .tree-wrap {
    display: table-cell;
}
tr.jqgrow > td > .cell-wrapperleaf,
tr.jqgrow > td > .cell-wrapper {
    display: table-cell;
}
.ui-jqgrid tr.jqgrow > td {
    white-space: normal;
}

to have the results like on the picture below

enter image description here

You can add float: left; on the .tree-wrap additionally:

tr.jqgrow > td > .tree-wrap {
    float: left;
    display: table-cell;
}
tr.jqgrow > td > .cell-wrapperleaf,
tr.jqgrow > td > .cell-wrapper {
    display: table-cell;
}
.ui-jqgrid tr.jqgrow > td {
    white-space: normal;
}

to change the position of the icon (marked in red below) on the side of the wrapped text:

enter image description here

To change colors of jqGrid elements you need just add the corresponding CSS styles. See the demo https://jsfiddle.net/OlegKi/90qmjean/, which I created for the answer.

Upvotes: 1

Related Questions