flexigrid get selected row columns values

Question

I am new to flexigrid. can any one please let me know how to get the selected row each column values.?

How to i get each column name(reportName and reportDescription)? because i am push //all the data into array like mentioned below.

I am using below code to get the selected rows. But it is returning null. Can you please help me on the same?

//Column. <br/>


colModel: [
  { display: 'WidgetID', name: 'WidgetID', width: 50, sortable: true, align: 'left', hide: true },
  { display: 'Widget Name', name: 'WidgetName', width: 170, sortable: true, align: 'left' },
  { display: 'IsClientReport', name: 'IsClientReport', width: 50, sortable: false, align: 'left', hide: true },
  { display: 'ClientReportID', name: 'ClientReportID', width: 50, sortable: false, align: 'left', hide: true },
  { display: 'ReportType', name: 'ReportType', width: 280, sortable: true, align: 'left' }
],

$('#grid01').click(function(event){ 
  $('.trSelected', this).each( function(){ 
      console.log( ' rowId: ' + $(this).attr('id').substr(3) + ' IsClientReport: ' + $('td[abbr="IsClientReport"] >div', this).html() + ' sign: ' + $('td[abbr="WidgetID"] >div', this).html() + ' ReportType: ' + $('td[abbr="ReportType"] >div', this).html() ); 
  }); 
});

Thanks, Pon Kumar Pandian

Maleckai · Answer 1 · 2012-10-31T04:16:32.800

Not sure if you've already figured it out, but I'm going to leave this answer here in case anyone else in the same situation stumbles across your question like I did.

Setting 'sortable: false' on a column removes the 'abbr' attribute from the 'td' that is generated by Flexigrid. This means you can't use the recommended solution for getting the selected row.

I modified the flexigrid.js file myself to fix this issue.

Flexigrid previously only added the 'abbr' attribute if a column had a 'name' and had 'sortable: true'. I removed the condition of 'sortable: true'.

This, in turn, also meant that the columns would always be sortable. To prevent this, I added a 'sortable' attribute, which would only be set if the column is 'sortable: true'

After that, I had to go through and find all situations where 'abbr' was being used as a condition for sorting, and replaced it with a check for 'sortable'.

That's it.

I uploaded the file to mediafire if you just want to be able to download and use this one instead. There's a few too many changes in non-specific places for me to show my changes in code here. If need be, I can provide diffs or more of an explanation. Note that 'sortable: true' still works with my fix.

score 2 · Answer 2 · answered Jul 20 '13 at 13:50

I had the same issue, and solved it by using the following code

 jQuery('#schoolist .trSelected').each( function(){
                alert(jQuery('[abbr="name"]',this).text());

            });

Just add it to the function and replace the id #schoolist and abbr name with the name of the column you need.

score 0 · Answer 3 · answered Aug 13 '12 at 23:29

0

See the FlexiGrid FAQ here: http://code.google.com/p/flexigrid/wiki/FAQ#Get_selected_row

answered Aug 13 '12 at 23:29

Prashant Saraswat

838
1
8
20

I am using below code to get the selected rows. But it is returning null. Can you please help me on the same? $('#grid01').click(function(event){ $('.trSelected', this).each( function(){ console.log( ' rowId: ' + $(this).attr('id').substr(3) + ' name: ' + $('td[abbr="name"] >div', this).html() + ' sign: ' + $('td[abbr="sign"] >div', this).html() + ' status: ' + $('td[abbr="status"] >div', this).html() ); }); }); – Pon Kumar Pandian Aug 17 '12 at 06:51
I am having the same problem, does anybody figure it out? – Fernando Santiago Mar 13 '13 at 00:20

score 0 · Answer 4 · answered Mar 15 '13 at 00:42

you ca try:

$('#grid01').click(function(event){
    $('.trSelected', this).each( function(){
        console.log(
            '  rowId: '  + $(this).attr('id').substr(3) +
            '  name: '   + $('td[abbr="name"] >div', this).html() +
            '  sign: '   + $('td[abbr="sign"] >div', this).html() +
            '  status: ' + $('td[abbr="status"] >div', this).html() 
        );
    });
});

or

Using flexgrid with CI then add below code in your custom button event

function test(com, grid) {  
    if (com == 'Export') {
        var data = ($('.bDiv', grid).html());
        $('.bDiv tbody tr', grid).each(function () {
            console.log('  rowId: ' + $(this).attr('id').substr(3) + '  name: ' + $('td[abbr="name"] >div', this).html() + '  coupon_no: ' + $('td[abbr="coupon_no"] >div', this).html() + '  status: ' + $('td[abbr="status"] >div', this).html());
        });
    }   
}

PHP CI Code:

$buttons[] = array('Export','excel','test');

Check Screen:

enter image description here

dynamiclynk · Answer 5 · 2013-05-07T18:56:39.297

Adding the following function to the flexigrid.js source will return an array of selected rows.

$.fn.selectedRows = function (p) {
    var arReturn = [];
    var arRow = [];
    var selector = $(this.selector + ' .trSelected');
    $(selector).each(function (i, row) {
        arRow = [];
        $.each(row.cells, function (c, cell) {
            var col = cell.abbr;
            var val = cell.innerText;
            var idx = cell.cellIndex;

            arRow.push(
                {
                    Column: col,
                    Value: val,
                    CellIndex: idx
                }
                );
        });
        arReturn.push(arRow);

    });
    return arReturn;
};

Usage:

var rows = $('#datagrid').selectedRows();

Find Value by Column Name

function getColValueByName(cols, colName) {
   var retVal = '';
   var param = $.grep(cols, function (e) {
    var found = e.Column == colName;
    if (found != null && found != undefined & found) {
        retVal = e.Value;
    }
});
   return retVal;
}

flexigrid get selected row columns values

5 Answers5