Question

I have a simple custom user control that uses jqGrid. the control is as in the following code:

Markup:

<div id="grid_container" runat="server">
    <table id="umlt_grid" runat="server"></table>
    <div id="umlt_grid_pager" runat="server"></div>
</div>
<div id="umlt_dialog" title="Umlt" style="display: none;" runat="server"></div>

Script (inside the ascx file)

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        //Initialize controls
        var dialogID = $('#<%=umlt_dialog.ClientID %>');
        var dlg = $(dialogID);
        dlg.dialog({ autoOpen: false, modal: true, stack: true, resizable: false, position: 'center', width: 380, height: 260 });
        //Load the Grid
        var gridID = '#<%=umlt_grid.ClientID %>';
        var pagerID = '#<%=umlt_grid_pager.ClientID %>';
        var containerID = '#<%=grid_container.ClientID %>'
        var gridWidth = GetAvailableSpaceBody( $(containerID).width() );
        loadUmltGrid(gridID, pagerID, dlg, gridWidth);
    });
</script>

The loadUmltGrid function is defined inside a dedicated js file which is loaded through the master page. Here it is:

function loadUmltGrid(gridID, pagerID, dialog, gridWidth) {
    var grid = $(gridID);
    var pager = $(pagerID);
    grid.jqGrid({
        url: GetBaseWSUrl() + 'UmltService.asmx/ListUmlts',
        colNames: ['Code', 'Description', 'Note'],
        colModel: [
                    { name: 'Code', index: 'Code', width: 120, template: colTextTemplate },
                    { name: 'Description', index: 'Description', width: 220, template: colTextTemplate },
                    { name: 'Notes', index: 'Notes', width: 300, template: colTextTemplate }
                ],
        jsonReader: {
            id: "UmltID"
        },
        pager: pager,
        sortname: 'Code',
        sortorder: "asc",
        height: '300',
        gridview: true,
        width: gridWidth,
        autowidth: false,
        shrinkToFit: true
    }).jqGrid('navGrid', pagerID,
        { add: true, addtitle: 'Add UMLT',
            edit: true, edittitle: 'Edit UMLT',
            del: true, deltitle: 'Delete UMLT',
            refresh: true, refreshtitle: 'Refresh data',
            search: true, searchtitle: 'Advanced search filters',
            addfunc: function () {
                loadUmltDialog(GetBaseWSUrl() + 'UmltService.asmx/NewUmlt', "", dialog);
            },
            editfunc: function () {
                var rowId = grid.jqGrid('getGridParam', 'selrow');
                loadUmltDialog(GetBaseWSUrl() + 'UmltService.asmx/EditUmlt', rowId, dialog);
            }
        },
        { /*default settings for edit*/ },
        { /*default settings for add*/ },
        { mtype: "post", reloadAfterSubmit: false,
            url: GetBaseWSUrl() + 'UmltService.asmx/DeleteUmlt',
            resize: false, serializeDelData: function (postdata) { return JSON.stringify({ umltID: postdata.id }); },
            afterSubmit: function (data, postdata) {
                var result = $.parseJSON(data.responseText);
                if (result.d.StatusResult === "OK") {
                    showInfoMessage(result.d.StatusResult, result.d.StatusDescription);
                } else {
                    showErrorMessage("Error", result.d.StatusDescription);
                }
                return [true, ''];
            }
        },
        { closeOnEscape: true, multipleSearch: true, closeAfterSearch: true }, {}
    ).jqGrid('navSeparatorAdd', pagerID, {}).jqGrid('navButtonAdd', pagerID, {
        caption: "", buttonicon: "ui-icon-extlink", position: "last", title: "Export to Excel",
        onClickButton: function () {
            window.open(GetCurrentSiteUrl() + '/_layouts/ExportExcel.aspx?View=UMLT');
        }
    });
}

I need to use this user control inside a Web Part (SharePoint) and inside another control so I simply added to my project a wrapper web part and included the control inside the other one.

Everything seems to work for the web part as you can see from the following screenshot

but when I use it inside another user control I am experiencing 2 strange problems:

1. The custom “export” button added to the toolbar gets duplicated
2. the pager (Page n of m) is showed aligned to the left

You can see this behaviour in the following screenshot

Any suggestion?

Answer 1

You don’t included the code of the main function loadUmltGrid which defines your grid. So I try just to guess.

Typically the custom buttons from the navigator toolbar come with respect of navButtonAdd method of jqGrid. The standard buttons come by calling of the navGrid. The problem with multiple custom buttons one have typically if the code which add the buttons will be executed more as one time. You can just insert alert before the call of navButtonAdd and I suppose that you will see the message from the alert twice. The navGrid has an internal control. If the method will be called at the second time for the same pager it returns immediately. So have no duplicates of the standard buttons event the corresponding code runs multiple times.

The second problem with position of the pager exists typically if you use some small value of the width parameter of jqGrid at the beginning and then later increase the grid width with respect of setGridWidth. I recommend you, before writing of any code which change the position of the middle part of the pager, to increase the initial value of the grid width which you use at the grid initialization.