OnRowCreated not firing until row clicked

[Tony]

So i am using a RadGrid in a custom control. In the java script i am binding the grids events to events declared in my custom control. The issue is the rowCreated function is not firing until i actually click a row. Since its within a prototype i have to create it as a delegate to ensure i can still access other variables in the same scope.

grid.add_rowCreated(Function.createDelegate(this, this.rowCreated));

 

But this causes the rowCreated event to not fire until i interact with the grid by selecting a row. Could someone give me some guidance on this please, it may be something obvious as i am fairly new to webforms controls. I have added the full code below, but have cut it down to be relevant.

Type.registerNamespace("WebApp.Portal.Controls");

// Define the control properties.
WebApp.Portal.Controls.DataViewContainer = function (element) {
    WebApp.Portal.Controls.DataViewContainer.initializeBase(this, [element]);
    this._clientId = null;
    this._radGridId = null;
    this._keyColumnName = null;
    this._idsOfSelectedRows = [];
};

// Define the prototype
WebApp.Portal.Controls.DataViewContainer.prototype = {

    initialize: function (sender, eventArgs) {
        WebApp.Portal.Controls.DataViewContainer.callBaseMethod(this, 'initialize');

        // Will be called on ajax or full postback
        window.Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(Function.createDelegate(this, this.onLoad));
        // If this is being executed by ajax
        if (eventArgs) {
            // And this is only a partial load
            if (eventArgs.get_isPartialLoad()) {
                // Don't perform any further processing
                return;
            }
        }
        // only hit on full postback.
        this.bindEvents();
    },

    dispose: function() {
        WebApp.Portal.Controls.DataViewContainer.callBaseMethod(this, 'dispose');
    },

    idsOfSelectedRows: [],

    //
    // Methods.
    //
    onLoad: function () {
    },

    bindEvents: function () {
        var grid = window.$find(this.get_radGridId());
        if (grid != undefined) {
            grid.add_rowSelected(Function.createDelegate(this, this.rowSelected));
            grid.add_rowDeselected(Function.createDelegate(this, this.rowDeselected));
            grid.add_rowCreated(Function.createDelegate(this, this.rowCreated));
            grid.add_gridCreated(Function.createDelegate(this, this.gridCreated));
        }
    },

    rowSelected : function(sender, args) {
        var entityId = args.getDataKeyValue(this._keyColumnName);
        this.updateIdsOfSelectedRows(entityId, true);
        console.log(JSON.stringify(this.idsOfSelectedRows));
    },

    rowDeselected : function (sender, args) {
        var entityId = args.getDataKeyValue(this._keyColumnName);
        this.updateIdsOfSelectedRows(entityId, false);
        console.log(JSON.stringify(this.idsOfSelectedRows));
    },

    rowCreated : function (sender, args) {
        var entityId = args.getDataKeyValue(this._keyColumnName);
        console.log("Row Created: " + entityId);
        if ($.inArray(entityId, this.idsOfSelectedRows) >= 0) {
            args.get_gridDataItem().set_selected(true);
        }
    },

    gridCreated : function (sender, eventArgs) {
        var masterTable = sender.get_masterTableView();
        var selectColumn = masterTable.getColumnByUniqueName("clmSelect");
        var headerCheckBox = $(selectColumn.get_element()).find("[type=checkbox]")[0];
        if (headerCheckBox) {
            headerCheckBox.checked = masterTable.get_selectedItems().length == masterTable.get_dataItems().length;
        }
    },

    updateIdsOfSelectedRows : function(id, isSelected) {
        var index = $.inArray(id, this.idsOfSelectedRows);
        if (!isSelected && index >= 0) {
            this.idsOfSelectedRows.splice(index, 1); // remove id from the list
        } else if (index < 0) {
            this.idsOfSelectedRows.push(id);
        }
    },

    //
    // Properties.
    //
    get_radGridId: function() {
        return this._radGridId;
    },

    set_radGridId: function(value) {
        if (this._radGridId !== value) {
            this._radGridId = value;
            this.raisePropertyChanged('_radGridId');
        }
    },

    get_clientId: function () {
        return this._clientId;
    },

    set_clientId: function (value) {
        if (this._clientId !== value) {
            this._clientId = value;
            this.raisePropertyChanged('clientId');
        }
    },

    get_keyColumnName: function () {
        return this._keyColumnName;
    },

    set_keyColumnName: function (value) {
        if (this._keyColumnName !== value) {
            this._keyColumnName = value;
            this.raisePropertyChanged('keyColumnName');
        }
    },
};

WebApp.Portal.Controls.DataViewContainer.registerClass('WebApp.Portal.Controls.DataViewContainer', Sys.UI.Control);