Value of cell of expanded row filtered

[sjkcwatsonParticipant]

When a row is expended, I want to grab the value of the column CAPAID of that expanded row. This code works, expect when I filter the row, if in the filtered subset the row expanded is the 3rd row, I get the value of the column in the 3rd row of the full set of data.

So for example if my rows look like this
ROW # CAPAID Name
1 10 Danny
2 134 Sue
3 3333 Susan
4 234 Henry

And I click on row 2 with no filtering it will return 134 as it should.
However, if I filter the name by SU so that my grid now looks like

ROW # CAPAID Name
1 134 Sue
2 3333 Susan

And I click on Susan which is now row 2, It will return 134 instead of 3333 that I expected because the full data row 2 is Sue and 134.

I’m sure that I’m just looking at the wrong rowindex when it is filtered, but I have searched the forums with no luck.

    $('#jqxgrid').on('rowexpand', function (event) {
        // event arguments.
        var args = event.args;
        // row details.
        var details = args.details;
        // row's bound index.
        selectedRowIndex = args.rowindex;

//        var index = $('#jqxgrid').jqxGrid('getrowboundindex', 0);
        var val = $('#jqxgrid').jqxGrid('getcellvalue', selectedRowIndex, "CAPAID");
        alert("capaID is " + val);
    });

Any help or pointing to an example would be appreciated. Thanks!

[DimitarParticipant]

Hello sjkcwatson,

Could you, please, provide us with a larger sample, including your grid initialization code, or, preferably, a JSFiddle, so that we may get a better understanding of your scenario and be able to help? Please also make sure you are using the latest version of jQWidgets (3.6.0).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[sjkcwatsonParticipant]

I’m not sure how to save and share my fiddle, but here is an example. This forked from here so if you use it with your generatedata you should be able to see it happen. If you don’t apply any filters and click on a row, it will return the correct first name of the xapnded row in the expand event. If you filter by part of a last name and then click on a row, the first name being displayed is wrong. If in the filtered dataset you expand the 3rd row, it is displaying the first name from the 3rd row of the entire dataset and not the filtered data set. How do I get the data from the filtered row? Thanks! Julie

<div id='jqxWidget'>
    <div id="jqxgrid"></div>
</div>
<input type="button" style="margin: 10px;" id="jqxbutton" value="Get row data by id" />

var data = generatedata(500);
 var source = {
     localdata: data,
     datafields: [{
         name: 'firstname',
         type: 'string'
     }, {
         name: 'lastname',
         type: 'string'
     }, {
         name: 'productname',
         type: 'string'
     }, {
         name: 'date',
         type: 'date'
     }, {
         name: 'quantity',
         type: 'number'
     }, {
         name: 'price',
         type: 'number'
     }],
     datatype: "array"
 };

 var adapter = new $.jqx.dataAdapter(source);
 $("#jqxgrid").jqxGrid({
     width: 500,
     theme: 'energyblue',
     source: adapter,
     sortable: true,
     selectionmode: 'singlecell',
     columns: [{
         text: 'First Name',
         datafield: 'firstname',
         columngroup: 'Name',
         width: 90
     }, {
         text: 'Last Name',
         columngroup: 'Name',
         datafield: 'lastname',
         width: 90
     }, {
         text: 'Product',
         datafield: 'productname',
         width: 170
     }, {
         text: 'Order Date',
         datafield: 'date',
         width: 160,
         cellsformat: 'dd-MMMM-yyyy'
     }, {
         text: 'Quantity',
         datafield: 'quantity',
         width: 80,
         cellsalign: 'right'
     }, {
         text: 'Unit Price',
         datafield: 'price',
         cellsalign: 'right',
         cellsformat: 'c2'
     }],
      showfilterrow: true,
     filterable: true,
     rowdetails: true,
     autoloadstate: false,
     autosavestate: false,
     rowdetailstemplate: {
         rowdetails: "more info here"        
     } });

  $('#jqxgrid').on('rowexpand', function (event) {
        // event arguments.
        var args = event.args;
        // row details.
        var details = args.details;
        // row's bound index.
        selectedRowIndex = args.rowindex;

//        var index = $('#jqxgrid').jqxGrid('getrowboundindex', 0);
        var val = $('#jqxgrid').jqxGrid('getcellvalue', selectedRowIndex, "firstname");
        alert("First Name of expanded row is " + val);

    });

 $("#jqxbutton").jqxButton({
     theme: 'energyblue',
     height: 30
 });

 $('#jqxbutton').click(function () {
     // get row ID.
     var rowID = $('#jqxgrid').jqxGrid('getrowid', 0);
     // get row Data by ID.
     var data = $('#jqxgrid').jqxGrid('getrowdatabyid', rowID);
     alert(data.firstname + " " + data.lastname + " " + data.productname + " " + data.date + " " + data.quantity + " " + data.price);
 });

[sjkcwatsonParticipant]

http://jsfiddle.net/sjkcwatson/2cmoobv6/embedded/result/

[DimitarParticipant]

Hi sjkcwatson,

The solution is to pass the row’s bound index to the method getcellvalue. Here is how to achieve this:

$('#jqxgrid').on('rowexpand', function (event) {
    // event arguments.
    var args = event.args;
    // row details.
    var details = args.details;
    // row's bound index.
    selectedRowIndex = args.rowindex;
    var boundIndex = $('#jqxgrid').jqxGrid('getrowboundindex', selectedRowIndex);
    //        var index = $('#jqxgrid').jqxGrid('getrowboundindex', 0);
    var val = $('#jqxgrid').jqxGrid('getcellvalue', boundIndex, "firstname");
    alert("First Name of expanded row is " + val);

});

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[sjkcwatsonParticipant]

Perfect! Thank you! I couldn’t find the correct index.

[Author]

Posts