Search code examples
jqueryjqgrid

jqgrid remote data + frozen column + inline action buttons = action button no response?

I can make my code working in either 2 out of 3 features ("remote data", "frozen column", and "inline action buttons"). But when using these 3 feature together, the action buttons do not response when I click on the button.

I tried all combination:

  1. remote data + inline action button = OK
  2. local data + frozen column + inline action button = OK
  3. remote data + frozen column + inline action button = NOT OK

below is my code:

<script type="text/ecmascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/ecmascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/jquery.jqgrid.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.1/plugins/jquery.contextmenu.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/css/ui.jqgrid.min.css">

    $(document).ready(function () {
        var lastSel;
        $("#jqGrid").jqGrid({
            url: "/WEB/fundingMasterList.action",
            datatype: "json",
            colModel: [
                { label: "Actions", name: "actions", width: 55, align: 'center', sortable: false, frozen:true, formatter: "actions", formatoptions: {
                        keys: false,
                        delbutton: false,
                        onEdit: function(id) {
                            alert("onEdit called!");
                        }
                    },
                    classes:'frozen'
                },
                { name: "itemId", label: "Item", frozen:true, hidden:true, key:true },
                { name: "funding.division", label: "Div", frozen:true, editable:"hidden", width:80, classes:'frozen'},
                { name: "funding.ro2", label: "SE", frozen:true, editable:true, width:80, classes:'frozen' },
                { name: "funding.ro1", label: "E or RM", frozen:true, editable:true, width:80, classes:'frozen' },
                { name: "id.typeOfFunding", label: "Type", frozen:true, editable:"hidden", width:50, classes:'frozen' },
                { name: "id.recordId", label: "Funding<br/>Ref. No.", frozen:true, editable:"hidden", width:120, classes:'frozen' },
                { name: "id.fiscalYear", label: "Year of<br/>Funding", frozen:true, editable:"hidden", width:80, classes:'frozen' },
                { name: "funding.client", label: "Client", width:100, editable:"hidden" },
                { name: "funding.typeOfClient", label: "Client Nature", editable:"hidden" }
            ],
            onSelectRow: function(id){
                if(id && id!==lastSel){ 
                    $('#jqGrid').jqGrid('restoreRow',lastSel); 
                    lastSel=id; 
                }
            },
            cmTemplate: { title: false },
            loadonce: true,
            viewrecords: true,
            rowNum: 50,
            gridview:true,
            shrinkToFit: false, // must be set with frozen columns, otherwise columns will be shrank to fit the grid width
            autowidth: true, 
            height: 610,
            footerrow : true,
            rownumbers:true,
            pgbuttons : true,
            pginput : true,
            viewsortcols: [true, 'vertical', true],
            emptyrecords: "No records to display",
            pager: "#pager"
        });
        $("#jqGrid").jqGrid("setFrozenColumns");
    });

Thank you

Solution

  • Thank you for the bug report. I committed the corresponding fix to GitHub. The problem was missing binding of click event to the buttons of formatter: "action" in the div of the frozen columns.

    I don't recommend you to use

    autowidth: true

    in case of using frozen columns especially for grids where you use so many frozen columns. Frozen div can't be scrolled. Thus the width of the grid have to be larger as the total width of all frozen columns.

    The demo https://jsfiddle.net/La3cxu2e/2/ loads all jqGrid files directly from GitHub.