CODEWITHSUNDEEP
javascriptjqueryinfragisticsignite-uiiggrid
user3708842
user3708842

Reputation: 563

Hiding igGrid rows

Before I rip out whats left of my hair, I ask here what 'simple' thing I am missing. I have an Infragistics igGrid where I have buttons for the user to hide (filter) some of the rows. On Infragistics forum I found this suggested code :

function hide() {
$("#igGrid").igGrid("allRows").each(function(index) {

    var id = $(this).attr("colName");

    // Any row with ID < 4 will be hidden
    if (id < 4) {
        $(this).css("display", 'none');
    }

});

Looks easy, but it doesn't work. Neither does 10 more of my attempts to get the 'idCol' of the row.

What really bugs me is that in Chrome Debug, 'this' shows up as a 'tr' (in IE its a HTMLTableRowElement)!! And it has a 'cells' attribute that is an HTMLCollection ==> EXACTLY what I want! However, nothing I've tried below actually GET the value of a cell/column.

        var aa = $(this).attr("colName");                    // undefined
        var bb = $(this);                                    // shows in debugger as e.fn.e.init[1]     ????
        var cc = bb.cells[3];                                // Uncaught TypeError: Cannot read property '3' of undefined
        var dd = bb.getRowIndex();                           // Uncaught TypeError: Undefined is not a function

        var a = $(this).cells;                               // undefined
        var b = $(this).cells[3];                            // Uncaught TypeError: Cannot read property '3' of undefined
        var c = $(this).getRowIndex();                       // Uncaught TypeError: Undefined is not a function  
        var d = $(this).attributes.getNamedItem("colName");  // Uncaught TypeError: Cannot read property 'getNamedItem' of undefined
        var e = $(this).attributes.colName;                  // Uncaught TypeError: Cannot read property 'colName' of undefined
        var f = $(this).getNamedItem("colName");             // Uncaught TypeError: Undefined is not a function
        var g = $(this).getAttribute("colName");             // Uncaught TypeError: Undefined is not a function

So what am I missing??

After this gets figured out, I see another problem coming. Obviously the condition for hiding rows above will not be a hardcoded '4'. In an outer onclick function I set a variable that holds the condition value. However while in this igGrid function I see that my variable is out of scope. How can I pass my variable to this 'hide()' function?

Upvotes: 2

Views: 1552

Answers (1)

Brino
Brino

Reputation: 2502

There is a difference between filtering and hiding. Filtering will remove the row from the tbody, hiding will just make the row invisible. The easiest solution will be for you to apply a filter to the table. This can easily be tied to a button click handler, see JSFiddle link below.

Hiding

You can hide a row by setting it's css display property to 'none'; You can select all rows using the following.

//select all rows, excluding the header and footer rows.
var gridRowSelector = 'table.ui-iggrid-table.ui-widget-content>tbody>tr';
//hide a row when clicking on it
$(gridRowSelector).click(function () {
    $(this).hide();
});
//unhide all hidden rows
$(gridRowSelector).show();

Filtering

You can filter a grid in two ways.

  1. Enable filtering on the grid, then use the drop downs in the column headers to set your filters. 

    $("#grid").igGrid({  
    features: [
            {
                name: "Filtering",
                type: "local",
                mode: "advanced",
                filterDialogContainment: "window"
            }
        ]
});

  2. Manually apply a filter to the grid. See IGGrid Filtering: http://help.infragistics.com/jQuery/2015.1/ui.igGridFiltering

       $('#grid').igGridFiltering("filter", ([
            {fieldName: "Age", 
                  expr: "30", 
                  cond: "greaterThan", 
                 logic: "OR"}]));

To Remove all filters just apply an empty filter to the grid:

//remove all filters
$('#grid').igGridFiltering("filter", "");

I have created a working JSFiddle with hiding/unhiding and filtering/unfiltering.

JSFiddle: http://jsfiddle.net/seadonk/76g5shak/

Upvotes: 1

Related Questions