How to change color theme and font size of jqgrid

Question

I have created application in MVC 4, jquery and jqgrid.

I have used jqgrid in one of page as below:

          $('#g).jqGrid({
            ajaxGridOptions: {
                error: function () {
                    $('#g')[0].grid.hDiv.loading = false;
                    alert('An error has occurred.');
                }
            },
            url: '@Url.Action("Getvalues", "cntrollName")/' + 0,
            postData: { ID: rowID },
            datatype: 'json',
            jsonReader: { root: 'List', page: 'Page', total: 'TotalPages', records: 'TotalCount', repeatitems: false, id: 'ID' },
            mtype: 'GET',
            colNames: ['GrdID', Name],
            colModel: [
                { name: ID, index: ID, hidden: true },
                { name: 'FullName', index: 'FullName', width: 150 }
                                ],
            pager: $('#g),
            sortname: ID,
            rowNum: 10,
            width: '525',
            height: '100%',
            viewrecords: true,
            beforeSelectRow: function (rowid, e) {
                                   return true;
            },
            sortorder: 'desc'
        }).navGrid('#g, { edit: false, add: false, del: false, search: false, refresh: false });

Please share me how i could change color and font size of jqgrid.

For now, it just shows default light blue theme and its default font size.

Thanks

Answer 1

jqGrid are based on jQuery UI Theme. To change colors you can either download the theme (see here and choose the theme at the dropdown at the bottom of the page) or customize your own theme here. In the way you can easy change all colors.

To change the font size you will have to overwrite some CSS styles defined in ui.jqgrid.css. Just search for font-size and height with pixel values. If you will need to increase the font size you will need to increase some height values of grid's parts.