jQuery Grid Plugin - jqGrid

I have a jqgrid with 4 level grouping. 

When i click to a group, i want get data of all groups with same level with current group, and get data of parent groups

In my image: When i click to A, i want get data of A1(CONSULAR POLICY 1) and B (CONSULAR)

THis is my code

<script type="text/javascript">
var pageWidth = $("#divCustomMain").width();
jQuery("#jQGridDemo").jqGrid({
    url: 'http://vvvv/aa.aspx&#39;,
    datatype: "json",
    colNames: ['Directorate', 'Branch', 'Section', 'Unit', '', 'Appointment Title', 'Abbreviated Title', 'Job Level', 'Service Scheme', 'Post'],
    colModel: [
                { name: 'Directorate', index: 'Directorate', width: 1, hidden: true, editable: false },
                { name: 'Branch', index: 'Branch', width: 1, editable: false, hidden: true },
                { name: 'Section', index: 'Section', width: 1, stype: 'text', sortable: true, editable: false, hidden: true },
                { name: 'Unit', index: 'Unit', width: 1, stype: 'text', sortable: true, editable: false, hidden: true },

                { name: 'Blank', index: 'Blank', width: (pageWidth * (9 / 100)), stype: 'text', sortable: false, editable: false },

                { name: 'Title', index: 'Title', width: (pageWidth * (20 / 100)), stype: 'text', sortable: false, editable: true },
                { name: 'AbbreviatedTitle', index: 'AbbreviatedTitle', width: (pageWidth * (20 / 100)), stype: 'text', sortable: false, editable: true },
                { name: 'JobLevel', index: 'JobLevel', width: (pageWidth * (20 / 100)), stype: 'text', sortable: false, editable: true },
                { name: 'ServiceScheme', index: 'ServiceScheme', width: (pageWidth * (15 / 100)), stype: 'text', sortable: false, editable: true },
                { name: 'Post', index: 'Post', width: (pageWidth * (10 / 100)), stype: 'text', sortable: false, editable: true }
    ],
    rowNum: 3,
    mtype: 'GET',
    loadonce: true,
    rowList: [10, 20, 30],
    pager: '#jQGridDemoPager',
    sortname: 'Name',
    viewrecords: true,
    sortorder: 'desc',
    caption: "Manpower Establishment",
    grouping: true,
    groupingView: {
        groupField: ['Directorate', 'Branch', 'Section', 'Unit'],
        groupColumnShow: [false, false, false, false],
        groupText: ['<asp:RadioButton ID="radioGroup" GroupName="RadioGroup" CssClass="rdoGrouping" runat="server" OnClick="javascript:GetRowGroupping(this.id)" />' + ' {0} (<b>{1}</b>)',

        '<asp:RadioButton ID="radioGroup2" CssClass="rdoGrouping" GroupName="RadioGroup" runat="server" OnClick="javascript:GetRowGroupping(this.id)" />' + ' {0} (<b>{1}</b>)',

        '<asp:RadioButton ID="radioGroup3" CssClass="rdoGrouping" GroupName="RadioGroup" runat="server" OnClick="javascript:GetRowGroupping(this.id)" />' + ' {0} (<b>{1}</b>)',

        '<asp:RadioButton ID="radioGroup4" CssClass="rdoGrouping" GroupName="RadioGroup" runat="server" OnClick="javascript:GetRowGroupping(this.id)" />' + ' {0} (<b>{1}</b>)'],
        groupCollapse: true,
        groupOrder: ['asc', 'asc', 'asc', 'asc', 'asc']
    },
    editurl: 'http://vvvv/aa.aspx&#39;
});

$('#jQGridDemo').jqGrid('navGrid', '#jQGridDemoPager',
           {
               add: false, del: false,
               edit: false,
               search: false,
               refresh: false
           }
    );