How to keep grouped rows expanded by default?

Question

I'm new to Kogrid. By default my grid is grouped by UserRoles column. But it is showing collapsed by default. I want to keep my grid grouped and expanded by UserRoles column on a page load.

<div id="rolesGrid" data-bind="koGrid:rolesGridOptions"></div>

Js:

this.rolesGrid = ko.observableArray([]);
    this.rolesGridCols = [
        { field: 'UserRole', displayName: 'User Role', width: '*'},
        { field: 'UserName', displayName: 'User Name', width: '*' },           
        { field: 'AssignedBy', displayName: 'Assigned By',width: '*' }
    ];

    this.rolesGridOptions = {
        data: this.rolesGrid,                
        columnDefs: this.rolesGridCols,
        groups: ['UserRole'],
        showGroupPanel: false,           
    };
};