jQuery UI dialog button positioned on the left

Question

I have a dialog defined as follows:

 $('#dgReport').dialog({
            modal: true,
            autoOpen: false,
            width: 450,
            title: '',
            resizable: false,
            buttons: [
                {
                    text: 'Prev',
                    id: 'btnPrevReport',
                    click: function () { }
                },

                {
                    text: 'Next',
                    id: 'btnNextReport',
                    click: function () { }
                },


                {
                    text: 'Save',
                    click: function () {
                        
                    }
                },
                {
                    text: 'Cancel',
                    click: function () {
                        $(this).dialog('close');
                    }
                }
            ],
            open: function () {}
};

I would like the Prev and Next buttons to be on the left and Save and Cancel on the right, is it possible without resorting to window-pane class?

Answer 1

You may act inside the create event:

create: function (e) {
    var dbs = $(this).closest('.ui-dialog').find('.ui-dialog-buttonset');
    dbs.css('width', '100%');
    dbs.find('.ui-button:contains("Save"), .ui-button:contains("Cancel")')
                                   .css({'float': 'right', 'margin-right': '0px'});
}

$('button').on('click', function(e) {
    $('#dgReport').dialog( "open" );
});
$('#dgReport').dialog({
    modal: true,
    autoOpen: false,
    width: 450,
    title: '',
    resizable: false,
    buttons: [
        {
            text: 'Prev',
            id: 'btnPrevReport',
            click: function () { }
        },

        {
            text: 'Next',
            id: 'btnNextReport',
            click: function () { }
        },


        {
            text: 'Save',
            click: function () {

            }
        },
        {
            text: 'Cancel',
            click: function (e) {
                $(this).dialog('close');
            }
        }
    ],
    create: function (e) {
        var dbs = $(this).closest('.ui-dialog').find('.ui-dialog-buttonset');
        dbs.css('width', '100%');
        dbs.find('.ui-button:contains("Save"), .ui-button:contains("Cancel")').css({'float': 'right', 'margin-right': '0px'});
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<button>Open Dialog</button>
<div id="dgReport" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>