Extending igGrid > rendered and rowsRendered events.

I am trying to extend igGrid so I can control both rowRendered and rendered events. I was doing fine extending the object and adding some new functionality through new methods, but I can not add anything to these two events. Am I doing something wrong here?

This is the code I am using:

$.widget(‘ui.igGrid’, $.ui.igGrid, {

_create: function() {

console.log(‘Enters here’);

return this._super();

},

_rendered: function() {

console.log(‘NOT entering here’);

return this._super();

},

_rowsRendered: function() {

console.log(‘NOT entering here’);

return this._super();

},

myNewFunction: function(someObj) {

console.log(‘Enters here’);

}

});

$(‘#some-container’).igGrid({

data: […],

columns: […],

…

});

$(‘#some-container’).igGrid(‘myNewFunction’, {});

As you can see, I am calling myNewFunction after the igGrid is instantiated. But what I would really wanted to do is call the myNewFunction when events like rendered/rowRendered are fired. Is it a way to do this?

You can see here and example running: http://jsfiddle.net/newpatriks/xykh1gL1/

Thanks in advance.

Hello Jamie,

To have some functionality after grid is fully rendered, you have to use rendered event.
Rendered
event fired after the whole grid widget has been rendered (including headers, footers, etc.). This event is fired only when the grid is being initialized.

To have some functionality after all the rows has been rendered you have to use
rowsRendered
event.
rowsRendered
event fired after data rows are rendered .

Code snippert:

$(“#iggridContainer “).igGrid({

    rendered: function(evt, ui) {

        //return reference to igGrid

        ui.owner;

    },

    rowsRendered: function(evt, ui) {…}

 });           

 

I have created a sample application for your reference.

Please find the sample and let me know if you need further assistance.

 

 

Attachments:

1. iggrid.zip

Hi. 

Thanks for your answer! 

I know that I can call any method inside the rendered and rowsRendered functions when instantiating igGrid. But I don't want this. What I want is to be able to call a method on rowsRendered function in ALL the igGrid instances that I have in my project. In order to do this, I extended igGrid object, and I created a method in it that does the actions that I want. Now, I can call this method manually once igGrid is created doing:

$(container).igGrid('myMethod', {});

But I want this done automatically when rowsRendered is called.

As I said, I want igGrid instantiation like this in my code, just keep it clean: 

$(container).igGrid({

  data: […],

  primaryKey: 'id', 

  columns: […]

});

I just want to have this on the configuration, I don't want to have to call something on the rowsRendered method every time. So, my problem is that the extension of igGrid that I am trying to modify doesn't work for this method rowsRendered.

$.widget('ui.igGrid', $.ui.igGrid, {

  rowsRendered: function() {

    // I shoud be able to override this method. WHY I can not?

    this.myMethod();

  },

  myMethod: function() { }

});

Thanks.

Jordi.

So, finally I've got the solution. It would be to bind the event:

$.widget('ui.igGrid', $.ui.igGrid, {

    _create: function() {

        this.element.bind("iggridrowsrendered", this._rowsRendered);

        this.element.bind("iggridrendered", this._rendered);

    },

    _rowsRendered: function() {

        console.log('rowsRendered event dispatched!');

    },                                                                                                                                                                                                               

    _rendered: function() {

            console.log('rendered event dispatched!');

    }

}

Hello Jordi,

i am glad that you found the solution .

Please let me know if you need further assistance on this matter .

 

Hello Jordi,

 To call 'myNewFunction’ function in the ‘rowsRendered’ event your code would be like below:

 $('#some-container').igGrid({

    data: […],

    columns: […],

    rowsRendered: function(evt, ui) {

                myNewFunction();

                 }

});

function myNewFunction() {

                alert("rowsRendered called");

                }

  });

Please let me know if you need further assistance.