Is a Footer row in a jqgrid selectable/clickable?

Question

I have a jqgrid that has main rows and a footer row (with userdata loaded) and then a formatter that alters the data in the cells to be linkable. The cells in the main body can be clicked and the onCellSelect event will capture the click. However, clicking on data in the footer row does not seem to fire off the onCellSelect event. How do I capture a select/click event in the footer row? Below is the script for the jqgrid.

$('#jqgSummaryResults').jqGrid({
        datatype: 'json',
        mtype: 'GET',
        url: 'some action',
        postData: { 'criteria': function () {
           some function}},
        rowNum: 100,
        rowList: [],
        pager: '#jqgpSummaryResults',
        viewrecords: true,
        sortorder: 'asc',
        sortname: 'DateField',
        width: 1250,
        height: 350,
        shrinkToFit: true,
        gridview: true,
        footerrow: true,
        userDataOnFooter: true,
        onCellSelect: function (rowid, iCol, cellcontent, e) {
            var selectedDate = rowid;
            savedMailDueDateString = rowid;
            var selectedColumn = iCol;
            ...
        },
        loadComplete: function (data) {
            ...
        },
        colNames: ['DateField',
                    'Total Jobs',
                    ...
                    '% Not Mailed'],
        colModel: [
                    { name: 'DateField', index: 'DateField', align: 'left' },
                    { name: 'TotalJobs', index: 'TotalJobs', align: 'left', formatter: hyperlinkColumnFormatter },
                    ...
                    { name: 'PercentNotMailed', index: 'PercentNotMailed', align: 'left', formatter: hyperlinkColumnFormatter },
                    ]
    }).navGrid('#jqgpSummaryResults', {
        excel: false,
        edit: false,
        add: false,
        del: false,
        search: false,
        refresh: false
    });

Thanks for the assistance.

Can you please mark an answer as correct if your problem was solved. — Mark, Mar 20 '13 at 15:02
@Gill Bates: It would be polite to write some comments to answers. — Oleg, Mar 21 '13 at 09:25
@Oleg Sorry, I just doesnt have enough time, and my attention currently out of scope of this problem, but I will review posts as soon as I can. — Gill Bates, Mar 21 '13 at 11:20

Mark · Answer 1 · 2013-03-16T22:22:08.920

2

While I didn't see any way to have jqGrid respond to select (doesn't even seem that that footer is selectable) or a click. The footer row is specified by a ui-jqgrid-sdiv class. You could attach a click event handler as below.

$('.ui-jqgrid-sdiv').click(function() {alert('Bong')});

Edit: In response to Gill Bates question to add a footer event but only on a single cell the selector would be:

$('.ui-jqgrid-sdiv').find('td[aria-describedby="GridName_ColumnName"]').click(function() { alert("Bong");});

GridName_ColumnName is the format for all the footer td aria-describedby, and you can see the exact name via firebug element inspector (or any of it's equivalents).

edited Mar 16 '13 at 22:22

answered Jan 10 '13 at 12:33

Mark

3,123
4
20
31

`onCellSelect` set one `click` event handler on *all* elements of jqGrid body. In the same way one could use your original construct `$('.ui-jqgrid-sdiv').click(function(e){...})` as replacement of `onCellSelect` on the whole footer. `var $td = $(e.target).closest("td");` get `` of clicked cell of footer. `var iCol = $.jgrid.getCellIndex($td);` or just `var iCol = $td[0].cellIndex;` get column index of clicked cell. Column name is `$('#jqgSummaryResults').jqGrid("getGridParam", "colModel")[iCol].name`. So I still think that even original `$('.ui-jqgrid-sdiv').click` provide correct answer. – Oleg Mar 17 '13 at 12:09
@Oleg Cool, I'll have to check out the selector jQuery `closest` as I have had never had chance to use it. Oleg once again I truly appreciate the depth you put into your answers as it gives me the background and breadcrumbs to go an further research the concepts, learn and get better. – Mark Mar 17 '13 at 21:09
You are welcome! [The answer](http://stackoverflow.com/a/13765086/315935), [another one](http://stackoverflow.com/a/14537512/315935) or [this one](http://stackoverflow.com/a/5305904/315935) provide examples of the described approach. So I still think that your original answer was correct although it hasn't more implementation details. Best wishes! – Oleg Mar 18 '13 at 06:40

score 1 · Answer 2 · edited May 23 '17 at 11:43

jqGrid registers click event on main <table> of the grid, but it calls onCellSelect not always. First of all (see here) it tests some additional conditions and then returns (ignore click event) if the conditions failed. For example if one clicks on grouping headers of the grid the callback onCellSelect will not be processed.

The problem with footer row because it exists outside of the grid. The main <table> element are placed inside of div.ui-jqgrid-bdiv, but the footer is inside of another table which is inside of div.ui-jqgrid-sdiv. One can examine the HTML structure of jqGrid using Developer Tools of Internet Explorer, Google Chrome, Firebug or other. One will see about the following

enter image description here

The main <table> element (<table id="list"> in the picture above and which get the class "ui-jqgrid-btable") and another table element with the footer (which get the class "ui-jqgrid-ftable") are separate.

So the fist answer of Mark on your question was correct. If one has multiple grids on the page one could specify footer of specific grid using

var $grid = $('#jqgSummaryResults'); // one specific grid

.... // here the grid will be created

$grid.closest(".ui-jqgrid-view").find(".ui-jqgrid-sdiv").click(function() {
    // do in case of the footer is clicked.
    var $td = $(e.target).closest("td"),
        iCol = $.jgrid.getCellIndex($td); // or just $td[0].cellIndex,
        colModel = $grid.jqGrid("getGridParam", "colModel");

   // $td - represents the clicked cell
   // iCol - index of column in footer of the clicked cell
   // colModel[iCol].name - is the name of column of the clicked cell
});

P.S. In the old answer are described many other elements of the grid. The descriptions are not full, but it could be probably helpful.

@GillBates: You are welcome! If you award bounty to my answer, you could accept the answer of Mark, because his answer was do correct, but had just not enough details. — Oleg, Mar 22 '13 at 19:03

score 0 · Answer 3 · answered Jan 14 '15 at 09:43

Here little implementation of this problem, i'm new in jquery and jqgrid, but i had same problem and thanks two posts above of @Oleg and @Mark, Im implemented something like that:

//Raport1Grid - name of my jqgrid
//endusers, adminusers,decretusers - name of my rows in colModel
//Raport1Grid_endusers - GridName_ColumnName

var endUsers = $("[aria-describedby='Raport1Grid_endusers']").click(function(){
    //remove previous style of selection
    $('.ui-jqgrid-ftable').find('.selecteClass').removeClass('selecteClass');
    //set selection style to cell
    $(endUsers).addClass('selecteClass');    
});

//Also can get value of selectedCell

 var qwer = $("[aria-describedby='Raport1Grid_endusers']").text();
 alert(qwer);

Demo here http://jsfiddle.net/Tobmai/5ju3py83/

Is a Footer row in a jqgrid selectable/clickable?

3 Answers3

Linked