Skip to content

Add Custom Button and Move the Toolbar to the Top of the Datagrid

← Misc.
Add "toppager:true" as a custom property JSONString in your code.

$dg->cust_prop_jsonstr = 'toppager:true,';  // cust_prop_jsonstr is in version 6.0+

To include advanced search the export buttons, add the following script.

Important:


Must replace "orders" with your own datagrid table name used


$dg->before_script_end = '
        jQuery("#orders")
                    .navSeparatorAdd("#orders_toppager_left",{
                        position:"first"
                    })
                    .navButtonAdd("#orders_toppager_left",{
                        caption:"Advanced Search  ",
                        title:"Advanced Search",
                        buttonicon:"ui-icon-search",
                        onClickButton: function(){
                            jQuery("#orders").jqGrid("searchGrid", {multipleSearch:true,showQuery:true});
                        },
                        position:"first"
                    })
                    .navSeparatorAdd("#orders_toppager_left",{
                        position:"last"
                    })
                    .navButtonAdd("#orders_toppager_left",{
                        caption:"Export to Excel  ",
                        title:"Export to Excel",
                        buttonicon:"ui-icon-extlink",
                        onClickButton: function(){
                            jQuery("#orders").jqGrid("excelExport",{url:"../export.php?dt=json&gn=orders&export_type=EXCEL"});
                        },
                        position:"last"
                    })
                    .navSeparatorAdd("#orders_pager1_left",{
                        position:"first"
                    })
                        .navButtonAdd("#orders_pager1_left",{
                            caption:"Advanced Search  ",
                            buttonicon:"ui-icon-search",
                            onClickButton: function(){
                                jQuery("#orders").jqGrid("searchGrid", {multipleSearch:true,showQuery:true});
                            },
                            position:"first"
                        });

                        (function($) {
                            $.rand = function(arg) {
                                if ($.isArray(arg)) {
                                    return arg[$.rand(arg.length)];
                                } else if (typeof arg === "number") {
                                    return Math.floor(Math.random() * arg);
                                } else {
                                    return 4;  // chosen by fair dice roll
                                }
                            };
                        })(jQuery); ';

Additional readings:
From jqGrid navigator online documentation
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator

Here’s a post on how to remove unwanted actions from the navigator
http://stackoverflow.com/questions/3552855/add-toolbar-in-the-bottom-of-the-header-using-jqgrid/3557663#3557663



Feedback and Knowledge Base

(thinking…)