We can configure the tree grid to look like tree. In this example we enabled key navigation.

To achieve this we just disable the cell border and we hide the header.
Also a frame border can be removed too.
<?php 
require_once '../../../php/demo/tabs.php';
?>
<!DOCTYPE html>
<html>
  <head>
    <title>Guriddo TreeGrid PHP Demo</title>
    <link rel="stylesheet" type="text/css" media="screen" href="../../../css/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="../../../css/trirand/ui.jqgrid.css" />
    <style type="text">
        html, body {
        margin: 0;            /* Remove body margin/padding */
        padding: 0;
        overflow: hidden;    /* Remove scroll bars on browser window */
        font-size: 75%;
        }
        
    </style>
    <script src="../../../js/jquery.min.js" type="text/javascript"></script>
    <script src="../../../js/trirand/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="../../../js/jquery-ui.min.js" type="text/javascript"></script>
     <script src="../../../js/trirand/jquery.jqGrid.min.js" type="text/javascript"></script> 
    <script type="text/javascript">         
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
        $.jgrid.defaults.width = "700";
    </script>
  </head>
  <body>
      <div>
    <style type="text">
    .ui-jqgrid tr.jqgrow td  { border: 0px none;}

    </style>

          <?php include ("treegrid.php");?>
      </div>
      <br/>
      <?php tabs(array("treegrid.php"));?>
   </body>
</html>
treegrid.php.
<?php
ini_set
("display_errors",1);

require_once 
'../jq-config.php';
// include the driver class
require_once ABSPATH."php/PHPSuito/DBdrivers/jqGridPdo.php";
// include the jqGrid Class
require_once ABSPATH."php/PHPSuito/jqTreeGrid.php";


// Connection to the server
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// Tell the db that we use utf-8
$conn->query("SET NAMES utf8");
// Create the jqTreeGrid instance
$tree = new jqTreeGrid($conn);

$tree->SelectCommand "SELECT * FROM nested_category";

// set the table and primary key
$tree->table 'nested_category';
$tree->setPrimaryKeyId('category_id');
// set tree model and table configuration
$tree->setTreeModel('nested');
// set the icon db field for the leaf nodes.
$tree->setTableConfig(array('id'=>'category_id''left'=>'lft''right'=>'rgt''icon'=>'uiicon'));

// autoloading nodes
$tree->autoLoadNodes true;
// show any error (if any ) from server
$tree->showError true;

$tree->setColModel();

$tree->setUrl('treegrid.php');
$tree->dataType 'json';
// Some nice setting
$tree->setColProperty('name',array("label"=>"Name""width"=>90));
$tree->setColProperty('price',array("label"=>"Price""width"=>90"align"=>"right""hidden"=>true));
$tree->setColProperty('qty_onhand',array("label"=>"Qty""width"=>90"align"=>"right","hidden"=>true));
$tree->setColProperty('color',array("label"=>"Color""width"=>100"hidden"=>true));

// hide the not needed fields
$tree->setColProperty('category_id',array("hidden"=>true,"index"=>"accounts.account_id""width"=>50));
$tree->setColProperty('lft',array("hidden"=>true));
$tree->setColProperty('rgt',array("hidden"=>true));
$tree->setColProperty('level',array("hidden"=>true));
$tree->setColProperty('uiicon',array("hidden"=>true));

// and finaly set the expand column and height to auto
$tree->setGridOptions(array(
    
"ExpandColumn"=>"name",
    
"height"=>"auto",
    
"hoverrows"=>true,
    
"sortname"=>"account_id"
    
));
// remove the border
$tree->setGridEvent("gridComplete""function(){ $('tr.jqgrow td').css({'border':'0px none'});}");
// remove the header
$tree->setJSCode("$('.ui-jqgrid-htable','.ui-jqgrid-hbox').hide();");
// set navigation
$tree->callGridMethod('#tree''bindKeys');

//Enjoy
$tree->renderTree('#tree'''true,nullnulltruefalse);
?>