Skip to content
Grid 4 PHP Framework Docs Dialog Customization FAQs

Dialog Customization FAQs

Dialog Customization FAQs

Following config will show add dialog on load, given that list1 is grid id.

if ($_GET["showform"]=="add")
    $grid["loadComplete"] = "function(){ if (!jQuery(window).data('isFilled')) { jQuery(window).data('isFilled',true); jQuery('#add_list1').click(); } }";

$g->set_options($grid);

And it would show when you access url with querystring showform=add, e.g. http:///index.php?showform=add

To open edit dialog for first row on loading grid, you can set:

$grid["loadComplete"] = "function(){ if (!jQuery(window).data('isFilled')) { jQuery(window).data('isFilled',true); jQuery('#list1').setSelection( $('#list1').jqGrid('getDataIDs')[0] ); jQuery('#edit_list1').click(); } }";

$g->set_options($grid);

^ Top

Q) How to show Confirmation before close add or edit dialog?

Following config will show confirmation onclose event of dialogs.

$opt["edit_options"]["onClose"] = "function(){ return confirm('Are you sure you wish to close?'); }";
$opt["add_options"]["onClose"] = "function(){ return confirm('Are you sure you wish to close?'); }";
...
$g->set_options($opt);

^ Top

Q) How to save record with Previous / Next navidation?

Following config will enable form navigation and save edit dialog on navigation.

$opt["form"]["nav"] = true;
$opt["edit_options"]["onclickPgButtons"] = "function (which, formid, rowid){ $('#sData','#editmodlist1').click(); }";
$opt["edit_options"]["closeAfterEdit"] = false;
...
$g->set_options($opt);

^ Top

Q) How to redirect to custom page after add / update?

You can bind on_after_insert or on_after_update event handler which will redirect with following code:

$e["on_after_update"] = array("redirect_page","",true);
$g->set_events($e);

function redirect_page($data)
{
    phpgrid_msg("Redirecting ...<script>location.href='http://google.com'</script>",0);
}

^ Top

Q) How to add custom buttons in add/edit dialogs?

Following config will enable the addition of custom button in grid dialogs. You can edit button name 'Export' & onclick function as per your needs. Refer working sample dialog-layout.php for live demo.

$opt["edit_options"]["afterShowForm"] = 'function ()
    {
        $(\'<a href="#">Export<span class="ui-icon ui-icon-disk"></span></a>\')
        .addClass("fm-button ui-state-default ui-corner-all fm-button-icon-left")
        .prependTo("#Act_Buttons>td.EditButton")
        .click(function()
                {
                    alert("click!");
                });
    }';

$opt["add_options"]["afterShowForm"] = 'function ()
    {
        $(\'<a href="#">Load Default<span class="ui-icon ui-icon-disk"></span></a>\')
        .addClass("fm-button ui-state-default ui-corner-all fm-button-icon-left")
        .prependTo("#Act_Buttons>td.EditButton")
        .click(function()
                {
                    alert("click!");
                });
    }';

$opt["search_options"]["afterShowSearch"] = 'function ()
        {
            $(\'<a href="#">Load Default<span class="ui-icon ui-icon-disk"></span></a>\')
            .addClass("fm-button ui-state-default ui-corner-all fm-button-icon-left")
            .prependTo("td.EditButton:last")
            .click(function()
                    {
                        alert("click!");
                    });
        }';
...
$g->set_options($opt);

^ Top

Q) How to remove toolbar buttons for add/edit dialog and enable only inline editing?

Use following config to remove toolbar buttons, while inline options remain intact. $g is jqgrid() object. The navgrid settings override set_actions configuration for toolbar.

$g->navgrid["param"]["edit"] = false;
$g->navgrid["param"]["add"] = false;
$g->navgrid["param"]["del"] = false;

Additionally, if you wish to remove search & refresh buttons, here is the code.

$g->navgrid["param"]["search"] = false;
$g->navgrid["param"]["refresh"] = false;

^ Top

Q) How to make more space for buttons in toolbar?

An option could be to move the pager and total records from top toolbar. It will give full width space for icons. Along with that you can remove the operations buttons from bottom toolbar.

$opt["loadComplete"] = "function(){pagers_fx();}";
$g->set_options($opt);

and in html ...

<script>
    var pagers_fx = function(){
    jQuery(".ui-jqgrid-toppager td[id$=pager_right]").remove();
    jQuery(".ui-jqgrid-toppager td[id$=pager_center]").remove();
    jQuery(".ui-jqgrid-pager td[id$=pager_left]").html('');
    };
</script>

^ Top

Q) How can i remove autofilter and toolbar altogether?

You can apply following css onpage to hide them.

<style>
.ui-jqgrid-hbox, .ui-jqgrid-pager
{
    display:none;
}
</style>

^ Top

Q) How to show "View Record" dialog on row selection?

Following code snippet will enable view dialog on row selection. This will be placed in before we echo $out variable.

PHP Code:

$e["js_on_select_row"] = "grid_select";
$grid->set_events($e);

JS Code:

<script>
function grid_select()
{
    var rowid = jQuery(this).jqGrid('getGridParam','selrow'); // returns null if no row is selected  (single row)
    jQuery(this).jqGrid('viewGridRow', rowid);
}
</script>

^ Top

Q) How to show "Edit Record" dialog on row double click / Show dialog on row edit button?

Following code snippet will enable edit dialog on row double click. This will be placed in before we echo $out variable. $g is the jqgrid() object.

<script>
var opts = {
    'ondblClickRow': function (id) {
        jQuery(this).jqGrid('editGridRow', id, jQuery(this).jqGrid('getGridParam','edit_options'));
    }
};
</script>
...
<div style="margin:10px">
<?php echo $out?>
</div>

^ Top

Q) How to show "View Record" dialog on row double click / Show dialog on row edit button?

The loadComplete event is used to open edit dialog on row edit icon. (Inline editing is not supported) Code snippet with 'opts' will enable view dialog on row double click. This will be placed in before we echo $out variable.

$grid["loadComplete"] = 'function() { on_load(); }';
$g->set_options($grid);

<script>
function on_load()
{
    var gid = '<?php echo $g->id ?>';
    jQuery('a.ui-custom-icon.ui-icon-pencil').attr('onclick','');
    jQuery('a.ui-custom-icon.ui-icon-pencil').click(function(){ jQuery('#'+gid+'').jqGrid('setSelection',jQuery(this).closest('tr').attr('id'), true); jQuery('#edit_'+gid).click(); });
};

var opts = {
    'ondblClickRow': function (id) {
        jQuery(this).jqGrid('viewGridRow', id, <?php echo json_encode_jsfunc($g->options["view_options"])?>);
    }
};
</script>

<div style="margin:10px">
<?php echo $out?>
</div>

In order to enable inline editing on pencil icon along with view dialog on dblclick, refer this code.

^ Top

Q) How to post other form data with Grid add/edit form?

To add extra parameters while add/edit ...you can add following event. Here 'my_text_box' is html input field id, and it will be passed to php with name 'mydata'.

$opt["edit_options"]["onclickSubmit"] = "function(params, postdata) { postdata.mydata= jQuery('#my_text_box').val(); }";
$opt["add_options"]["onclickSubmit"] = "function(params, postdata) { postdata.mydata= jQuery('#my_text_box').val(); }";
...
$g->set_options($opt);

^ Top

Q) How to use custom dialog box with button on grid?

Support we have a virtual column that has input of type button as default value. We can simply set "onclick" in element attribute and invoke jQuery UI Dialog code.

$col["default"] = '<input type="button" value="Open Dialog" onclick="$(\"#wrapper\").dialog(\"open\");">';

Given that there is a container 'wrapper' exist in html code.

<div id="wrapper">
<p>Jquery initial content, can be replaced latter </p>
</div>

^ Top

Q) How to make 2 column form without defining rowpos & colpos, only with css?

You need to increase the dialog width using following settings:

$grid["add_options"] = array('width'=>'450');
$grid["edit_options"] = array('width'=>'450');
$g->set_options($grid);

Then define following css in html code:

<style>
    /* Alternate way if we dont use formoptions */
    .FormGrid .EditTable .FormData
    {
        float: left;
        width: 220px;
    }
    .FormGrid .EditTable .FormData .CaptionTD
    {
        display: block;
        float: left;
        vertical-align: top;
        width: 60px;
    }
    .FormGrid .EditTable .FormData .DataTD
    {
        display: block;
        float: left;
        vertical-align: top;
        width: 140px;
    }
</style>

You can adjust the width of caption, data and row as required.

^ Top

Q) How to resize the form fields when dialog is resized?

Following css makes fields small/large based on available width on dialog.

<style>
.FormElement { width: 90%; }
.CaptionTD {width: 10%}
</style>

^ Top

Q) How can i POST extra data along with form fields?

You can pass extra parameters in following way, both for dialog and inline modes.

// extra param 'test' => 'test-add'
$grid["add_options"]["editData"]["test"] = "test-add";
$grid["edit_options"]["editData"]["test"] = "test-edit";
$grid["delete_options"]["delData"]["test"] = "test-del";

$g->set_options($grid);

As all posted data is made part of insert/update/delete query, you may need to unset them in event handler. Refer demos/editing/custom-events.php for event handler usage.

^ Top

Q) How to use custom Add form instead of popup dialog?

One solution could be to add a custom toolbar button, and hide the default add function. On that custom toolbar button, redirect page to your add-form.php page. And on add-form.php page, after submit you can redirect it back to grid page.

To remove add button, You can set:

$g->set_actions(array(
    "add"=>false, // allow/disallow add
    ...
    )
);

To add custom toolbar button, refer demos/appearance/toolbar-button.php

<script type="text/javascript">
jQuery(document).ready(function(){

    jQuery('#list1').jqGrid('navButtonAdd', '#list1_pager',
    {
        'caption'      : 'Add',
        'buttonicon'   : 'ui-icon-plus',
        'onClickButton': function()
        {
            location.href="custom-add-form.php";
        },
        'position': 'first'
    });
});
</script>

Same procedure can use used for custom edit form. You can also pass selected row id as querystring param. Following will be the code in onclick handler:

var selr = jQuery('#list1').jqGrid('getGridParam','selrow');
location.href="custom-edit-form.php?id="+selr;

^ Top

Q) How to select text on focus / tab?

You can call select() function of JS on click event.

$col["editoptions"]["onclick"] = "this.focus(); this.select();";

^ Top

Q) How to change the order OR remove the search operands in search dialog?

You can try setting it in your grid code:

// contains, equal, not equal, less than, greater than, greater and equal, less and equal, begins with, not behins with, IN, not IN, ends with, not ends with, not contains, null, not null
$opt["search_options"]["sopt"] = array('cn','eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','nc','nu','nn');
$g->set_options($opt);

Here $g is grid object. You can also remove which are not required.

^ Top