Bind jQGrid From DataBase in ASP.Net

Here I have created Sample that will help you out.

HTML

<div>
    <style type="text/css">
        body
        {
            padding-top: 30px;
            padding-bottom: 40px;
        }
        #content
        {
            width: 100%;
            height: 100%;
        }
        .navbar
        {
            margin-bottom: 30px;
        }
        .jumbotron
        {
            font-size: inheret;
            font-weight: 200;
            line-height: 1;
            color: inherit;
        }
    </style>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <link href="css/ui.jqgrid.css" rel="stylesheet" />
    <link href="../jqGrid.bootstrap.css" rel="stylesheet" />
    <div class="container">
        <div id="content">
            <table id="jqGrid01">
            </table>
            <div id="jqGridPager01">
            </div>
        </div>
    </div>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="js/i18n/grid.locale-en.js"></script>
    <script src="js/jquery.jqGrid.min.js"></script>
    <script>

        $(document).ready(function () {
            jQuery("#jqGrid01").jqGrid({
                url: '<%= ResolveUrl("~/jqGrid/TreeData.ashx") %>',
                datatype: "json",
                colNames: ["Id", "Account", "Acc Num", "Debit", "Credit", "Balance", "Enabled"],
                colModel: [
                                { name: 'id', index: 'id', width: 1, hidden: true, key: true },
                                { name: 'name', index: 'name', width: 180 },
                                { name: 'num', index: 'acc_num', width: 80, formatter: 'integer', sorttype: 'int', align: 'center', editable: true },
                                { name: 'debit', index: 'debit', width: 80, formatter: 'number', sorttype: 'number', align: 'right', editable: true },
                                { name: 'credit', index: 'credit', width: 80, formatter: 'number', sorttype: 'number', align: 'right', editable: true },
                                { name: 'balance', index: 'balance', width: 80, formatter: 'number', sorttype: 'number', align: 'right', editable: true },
                                { name: 'enbl', index: 'enbl', width: 60, align: 'center',
                                    formatter: 'checkbox', editoptions: { value: '1:0' },
                                    formatoptions: { disabled: false }
                                }
                    ],
                height: 'auto',
                gridview: true,
                pager: "#jqGridPager01",
                rowNum: 1000,
                sortname: 'id',
                treeGrid: true,
                treeGridModel: 'adjacency',
                treedatatype: "local",
                ExpandColumn: 'name',
                add: true,
                edit: true,
                addtext: 'Add',
                edittext: 'Edit',
                caption: "Tree Grid"
            });

            jQuery("#jqGrid01").jqGrid('navGrid', '#jqGridPager01',
                    { edit: true, add: true, del: true, search: true },
                    { height: 200, reloadAfterSubmit: true }
                );

            $("#jqGrid01").jqGrid('setGridWidth', $(".content").width(), true);
        });

    </script>
</div>

TreeData.ashx

public class TreeData : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        List<Account> accounts = new List<Account>();
        accounts.AddRange(new Account[]{ new Account
        {
            id = 1,
            name = "Cash",
            num = 100,
            debit = 400.00,
            credit = 250.00,
            balance = 150.00,
            enbl = true,
            level = 0,
            parent = null,
            isLeaf = false,
            expanded = false,
            loaded = true

        },
        new Account { 
            id= 2, 
            name= "Cash 1",
             num= 1, 
             debit= 300.00, 
             credit= 200.00, 
             balance= 100.00,
             enbl= false, 
             level= 1, 
             parent= 1, 
             isLeaf= false, 
             expanded= false, 
             loaded= true
        },
        new Account{
            id= 3, 
            name= "Sub Cash 1", 
            num= 1, 
            debit= 300.00, 
            credit= 200.00, 
            balance= 100.00, 
            enbl= true, 
            level= 2, 
            parent= 2, 
            isLeaf= true, 
            expanded= false, 
            loaded= true 
        },
        new Account{
            id= 4, 
            name= "Cash 2", 
            num= 2, 
            debit= 100.00, 
            credit= 50.00,
            balance= 50.00, 
            enbl= false, 
            level= 1, 
            parent= 1, 
            isLeaf= true,
            expanded= false, 
            loaded= true 
        }
        });
        var jsonSerializer = new JavaScriptSerializer();
        context.Response.ContentType = "text/json";
        context.Response.Write(jsonSerializer.Serialize(accounts));
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

Account Class

public class Account
{
    public int id { get; set; }

    public string name { get; set; }

    public int num { get; set; }

    public double debit { get; set; }

    public double credit { get; set; }

    public double balance { get; set; }

    public bool enbl { get; set; }

    public int level { get; set; }

    public int? parent { get; set; }

    public bool isLeaf { get; set; }

    public bool expanded { get; set; }

    public bool loaded { get; set; }
}

Screenshot