FIX: MVC 4 – jqGrid Theme Issue

Just wasted 30 minutes trying to load the jqGrid theme – and it just won’t load. Tried setting up the new bundle configuration – even tried loading the scripts and css files directly in the <head> of _Layout.cshtml but the theme would still not load.


The MVC 4 Project Template inserts the following at the end of footer –

@RenderSection(“scripts”, required: false)

The jquery files should be loaded in the <head> section – Moving @Scripts.Render(“~/bundles/jquery”) should solve the issue – Even if you load the jquery files in the <head> section explicitly – the @Scripts.Render(“~/bundles/jquery”) at the bottom would cause problem and would not let the theme load.


FIX: jqGrid Pager Input too wide

The jqGrid CSS for some odd reason displays the Pager Input TextBox too wide –

The fix is to inject width:auto in the .ui-pg-input class in ui.jqgrid.css file.

(using jquiery-ui-1.8.24).