This soultion is not working. I dont see any change in the jqgrid after adding this snippet. COuld you please help.

Below is my code for rendering jqgrid.

   @*jqGrid Code - refer /blog/jqgrid/jqgrid.html *@
    <script type="text/javascript">

        function doWhenGridFullyLoaded() {
            alert("Hi");

            if ($("#rowNumDD").length == 0) {
                alert("Hi1");
                $('<div id="rowNumDD" style="display:block;padding-left: 2px;float:left;text-align:left;">Show: </div>').appendTo($("#subsDiv_toppager_left"));
                $(".ui-pg-selbox").appendTo($("#rowNumDD"));
                $("#rowNumDD").append(" at a time.");
            }

        }

    //set the context data into variables
        var pagename = "@Model.PageName";   
       
    jQuery(document).ready(function () {
        jQuery("#list").jqGrid({
            url: '@Url.Action("SettingsHistoryDynamicGridData", "SettingsHistory")',
            datatype: 'json',
            mtype: 'POST',
            prmNames: { sort: "sortBy", order: "sortOrder" },
            colNames: ['SettingElementId', 'SettingName', 'SettingValue','InstanceId',
                            'Description', 'ModifiedBy', 'ModifiedDate',
                            'Operation','SchemaName', 'Status',
                            'CreatedBy', 'CreatedDate', 'ValHierarchyValue'],
            colModel: [
                            { name: 'SettingElementId', index: 'SettingElementId', align: 'center', hidden: true },
                            { name: 'SettingName', index: 'SettingName', align: 'center', sortable: true },
                            { name: 'SettingValue', index: 'SettingValue', align: 'center', sortable: true },
                            { name: 'InstanceId', index: 'InstanceId', align: 'center', hidden: true },
                            { name: 'Description', index: 'Description', align: 'center', sortable: true },
                            { name: 'ModifiedBy', index: 'ModifiedBy', align: 'center', sortable: true },                                                      
                            { name: 'ModifiedDate', index: 'ModifiedDate', align: 'center', sortable: true, width: 190 },
                            { name: 'Operation', index: 'Operation', align: 'center', sortable: true, width: 80 },
                            { name: 'SchemaName', index: 'SchemaName', align: 'center', sortable: true, width: 100 },
                            { name: 'Status', index: 'Status', align: 'center', sortable: true, width: 60 },
                            { name: 'CreatedBy', index: 'CreatedBy', align: 'center', hidden: true },
                            { name: 'CreatedDate', index: 'CreatedDate', align: 'center', hidden: true },
                            { name: 'ValHierarchyValue', index: 'ValHierarchyValue', align: 'center', hidden: true}],
            pager: jQuery('#pager'),
            rowNum: 15,
            rowList: [15, 25, 50, 75, 100],
            sortname: "SettingName",
            sortorder: "asc",
            viewrecords: true,
            rownumbers: true,
            emptyrecords: 'Settings History Not Available',
            width: 1000,
            height: "100%",
            altRows: true,
            altclass: 'ui-state-secondary-custom',
            hoverrows: false,
            forceFit: true,
            loadtext: 'Loading Settings History Log...',
            loadui: 'block',
            toolbar: [true,'both'],
            loadComplete: doWhenGridFullyLoaded

        });
//        $('#list tr:nth-child(even)').removeClass("ui-priority-secondary");
//        $('#list tr:nth-child(odd)').addClass("ui-priority-secondary");
        //        jQuery("#pager .ui-pg-selbox").closest("td").before().append("Rows");

       
    });
    </script> 

 @*HTML Required fOR jqGrid*@
    <h3 style="color:#0066cc" > @Model.PageName - Settings History</h3>
    <center>   
    <table id="list"  cellpadding="0" cellspacing="0"  style="height:100%; width:100%; vertical-align:middle;"></table>
    <div id="pager" class="scroll" style="text-align:center;"></div>
    </center>

If this work and there is no problems, then I will say it is good.

Regards

Tony

I don't know that this is the best method, and would be open to someone sharing a better way. You could probably extend the jqGrid plugin to fix this, but I'm not sure if that would be overkill for such a small change. It's something that maybe should be included as an option.

This is what I did:

After my grid has loaded I've added this little piece:

if ( $("#rowNumDD").length == 0 ) {

$('<div id="rowNumDD" style="display:block;padding-left: 2px;float:left;text-align:left;">Show: </div>').appendTo($("#subsDiv_toppager_left"));

$(".ui-pg-selbox").appendTo($("#rowNumDD"));

$("#rowNumDD").append(" at a time.");

}

It's pretty self explanatory but this is what the code does.

I've added the if statement to make sure the div I'm creating doesn't exist. Without this if statement you will have an unusable drop down.

This will then create a new <div> and append it to the left hand side of the pager toolbar.  I then use the appendTo() method to grab the rowList dropdown and stick it in my new div and then append some more text after the drop down.

It works, but as I said. There is probably a better way.

Is there a way to add these options natively in jqGrid or do I need to do some DOM manipulation and css changes to remove it from the table it currently sits in and add it back in?

Thanks,

Ben