jQuery Grid Plugin - jqGrid

    <!--jquery start datagrid components-->
    <link rel="stylesheet" type="text/css" href="/Includes/jqgrid/css/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="/Includes/jqgrid/src/css/ui.jqgrid.css">
    <script type="text/javascript" src="/Includes/jqgrid/js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="/Includes/jqgrid/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="/Includes/jqgrid/js/jquery.jqGrid.src.js"></script>
    <script type="text/javascript" src="/Includes/tinymce/tinymce.min.js"></script>
    <script type="text/javascript" src="/Includes/tinymce/jquery.tinymce.min.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function()
        { jQuery("#grid").jqGrid(
            {
                //main grid
                url: "getwellinfo.php",
                datatype: "json",
                mtype: 'POST',
                autowidth: true,
                height: 'auto',
                colNames: ["Name", "Num", "Field", "Pad", "API", "County, State",
                    "Status", "Updated", "Wildlife Stips", "Notes"],
                colModel: 
                [
                    { name: "well_name", index: "well_name", width: 48,sortable: true, search:true, stype:'text'},
                    { name: "well_num", index: "well_num", width: 18,sortable: true, search:true, stype:'text'},
                    { name: "field", width: 48,sortable: true, search:true, stype:'select', stype: 'select', 
                        searchoptions: {dataUrl:'selectfield.php'}},
                    { name: "pad", index: "pad", width: 36,sortable: true, stype:'text'},
                    { name: "api", width: 32,sortable: true, search:true, stype:'text',key:true},
                    { name: "county_state", width: 40, sortable: false, search:false},
                    { name: "status", width: 27, sortable:  false, search:false},
                    { name: "status_date", width: 22, sortable: false, search:false},
                    { name: "wildlife_stips", width: 75, sortable: false, search:false},
                    { name: "notes", width: 75, sortable: false, search:false}
                ],
                rowNum:20,
                rowList:[20,50,100,10000],
                pager : '#pager',
                viewrecords: true,
                rownumbers: true,
                sortname: 'field',
                sortorder: "asc",
                caption:".",
                subGrid: true,
                subGridRowExpanded: function(subgrid_id, row_id) 
                {
                    var subgrid_table_id, subgrid_table_id2, pager_id;
                    subgrid_table_id = subgrid_id+"_t";
                    subgrid_table_id2 = subgrid_id+"_t2"; 
                     // configuring add options
                    pager_id = "p_"+subgrid_table_id;
                    //first grid as sub grid - with editing (add edit delete)
                    $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>"); 
                    jQuery("#"+subgrid_table_id).jqGrid(
                    {
                        url:"getwellnotes.php?api="+row_id,
                        datatype: "json",
                        mtype: 'POST',
                        autowidth: true,
                        colNames: ['Last','First','Date','API','Notes'],
                        colModel: 
                        [
                            {name:"Last",width:28,key:true},
                            {name:"First",width:28},
                            {name:"date",width:28},
                            {name:"api",width:16, hidden:true},
                            {name: "notes",    width: 300, editable: true, edittype: 'custom',
                                editoptions: 
                                {
                                    custom_element: function(value, options) 
                                    {
                                        var elm = $("<textarea></textarea>");
                                        elm.val(value);
                                        // give the editor time to initialize
                                        setTimeout(function() 
                                        {
                                            try 
                                            {tinymce.remove("#" + options.id);} 
                                            catch (ex) {}
                                            tinymce.init(
                                            {
                                                selector: "#" + options.id,
                                                plugins: "link"
                                            });
                                        }, 50);
                                        return elm;
                                    },
                                    custom_value: function(element, oper, gridval) 
                                    {
                                        var id;
                                        if (element.length > 0) 
                                        {id = element.attr("id");}
                                        else if (typeof element.selector === "string") 
                                        {
                                            var sels = element.selector.split(" "),
                                                idSel = sels[sels.length - 1];
                                            if (idSel.charAt(0) === "#") 
                                            {id = idSel.substring(1);} 
                                            else 
                                            {return "";}
                                        }
                                        if (oper === "get") 
                                        {return tinymce.get(id).getContent({format: "row"});} 
                                        else if (oper === "set") 
                                        {
                                            if (tinymce.get(id)) 
                                            {tinymce.get(id).setContent(gridval);}
                                        }
                                    }
                                }
                            }
                        ],
                        rowList: [],
                        pgbuttons: false,
                        pgtext: null,
                        viewrecords: false,
                        pager: pager_id,
                        height: '100%'
                    });
                    //second grid as sub grid
                    $("#"+subgrid_id).append("<table id='"+subgrid_table_id2+"' class='scroll'></table>"); 
                    jQuery("#"+subgrid_table_id2).jqGrid(
                    {
                         url:"getwellfiles.php?api="+row_id,
                         datatype: "json",
                         autowidth: true,
                         colNames: ['File Name','File Type','Size','Description','Last', 'First'],
                         colModel: [
                            {name:"file_name",width:55, formatter: "link"},
                            {name:"file_type",width:18},
                            {name:"size",width:68},
                            {name:"description",width:28},
                            {name:"Last",width:28},
                            {name:"First",width:28}
                        ],
                        height: '100%',
                    });
                    //paging bar options for grid as subgrid (first)    
                    jQuery("#"+subgrid_table_id).jqGrid
                    (
                        'navGrid',
                        "#"+pager_id,
                        {
                            edit: true, 
                            add: true, 
                            del: true, 
                            search: false,
                            view: true, 
                            refresh: true
                        },
                        {
                            /*prmEdit*/
                            //url:"notesedit.php?userid="+<?php echo $userid; ?>,
                            width: 'auto',
                            height: 'auto'
                         }, 
                        { 
                            /*prmAdd*/
                            url:"#",
                            width: 'auto',
                            height: 'auto'

                        }, 
                        { /*prmDel*/ } , 
                        { /*prmSearch*/ }, 
                        { /*prmView*/ }
                    );
                },
                subGridRowColapsed: function(subgrid_id, row_id) {    }                        
            });
            //paging options for main grid
            jQuery("#grid").jqGrid
            (
                'navGrid','#pager',
                { 
                    edit: false, 
                    add: false, 
                    del: false, 
                    search: false,
                    view: true, 
                    refresh: true
                },
                { /*prmEdit*/ }, 
                {  /*prmAdd*/ }, 
                { /*prmDel*/ } , 
                { 
                    /*prmSearch*/ 
                    multipleSearch:true
                }, 
                { /*prmView*/ }
            );
            //code to hide search bar in main paing bar
            $('#grid').jqGrid('filterToolbar', { searchOnEnter: true, enableClear: true });
            $('#grid').jqGrid('navButtonAdd', '#pager', 
            {
                caption: "",
                title: "Toggle Search Toolbar",
                buttonicon: 'ui-icon-search',
                onClickButton: function () 
                {
                    this.toggleToolbar();
                    if ($.isFunction(this.p._complete)) 
                    {
                        if ($('.ui-search-toolbar', this.grid.hDiv).is(':visible')) 
                        {$('.ui-search-toolbar', this.grid.fhDiv).show();}
                        else
                        {$('.ui-search-toolbar', this.grid.fhDiv).hide();}
                        this.p._complete.call(this);
                        fixPositionsOfFrozenDivs.call(this);
                    }
                }
            });
            //$('.ui-search-toolbar').hide();
            jQuery("#s2").click( function() { jQuery("#grid").jqGrid('setGridParam',{sortname:"api",sortorder:"asc"}).trigger("reloadGrid");});
        });
        </script>
    <!--jquery end datagrid components-->