Using this inside object on grid events

[MaklaParticipant]

Hi. I packed all logic for grid, edits … in JS object. Now I have problems with calling methods inside grid events, because this refers to grid not my object.

var Form = function()
      	{
		//...          	
          	InitGrid: function()
          	{
          		var GridSettings = 
		    	{
        		    //...
            		    
    			    showstatusbar: true,    		        
    			    renderstatusbar: function(statusbar)
    		 		{
    					this.RenderStatusbar(statusbar);  //this is grid, not form        
    		   		}
		    	};
		    	$('#grid').jqxGrid(GridSettings);	
          	},

          	RenderStatusbar: function(statusbar)
          	{
              	//do something
          	}
      	};

I also try like this:

var Form = function()
      	{
		//...          	
          	InitGrid: function()
          	{
          		var GridSettings = 
		    	{
        		    //...
    			    showstatusbar: true,    		        
    			    renderstatusbar: this.RenderStatusbar
		    	};
		    	$('#grid').jqxGrid(GridSettings);	
          	},
          	RenderStatusbar: function(statusbar)
          	{
              	//now here this is grid, not form      
          	}
      	};

And also a few (more stupid) other ideas. What now? Does anyone has any idea?

[Peter StoevKeymaster]

Hi Markla,

For rendering the Status Bar, please look at: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/statusbar.htm?arctic. The parameter passed by the rendering function is the HTML element where you should add your custom content.

Best Regards,
Peter Stoev

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

[MaklaParticipant]

I know how to set up status bar. I wouldn’t waste your time with question, that have plenty examples on page.
I apologize for not telling enough informations.
The StatusBar worked for my grid. Then I try to pack all logic to JavaScript object, and I have problems with calling another method inside my object (where jqxGrid was created), because “this” refers to Grid and not my object (Form).
I hope that this explanation better explains my problem.

Is there a way, to send some parameters to event handler function.
For example:

this.Window.on('moved', { self: this}, function(event)
	{
		event.data.self.WindowMoved(event);
	});

Explanation:

var Form = function()
      	{
		//...          	
          	InitGrid: function()
          	{
          		var GridSettings = 
		    	{
        		    //...
            		    
    			    showstatusbar: true,    		        
    			    renderstatusbar: function(statusbar)
    		 		{
    					this.RenderStatusbar(statusbar);  //this is grid, not form    
//how can I call RenderStatusbarPrivate from here???    
    		   		}
		    	};
		    	$('#grid').jqxGrid(GridSettings);	
          	},

          	RenderStatusbarPrivate: function(statusbar)
          	{
              	//do something
          	}
      	};

[Peter StoevKeymaster]

Hi Makla,

You can add a variable which stores the Form’s context and use it in the “renderstatusbar” function.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[MaklaParticipant]

How can I do that? I know this is now a funny question, but …

[Peter StoevKeymaster]

Hi Makla,

I suppose that it could be: myVariable: this

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[MaklaParticipant]

I get error:
Uncaught Invalid property: myVariable jqx-all.js:6
Code:

var Form = function()
      	{
		//...          	
          	InitGrid: function()
          	{
          		var GridSettings = 
		    	{
        		    //...
            		    
    			    showstatusbar: true,
	    	    	    myVariable: this,    		        
    			    renderstatusbar: function(statusbar)
    		 		{
    					myVariable.DoSomething(statusbar);      
    		   		}
		    	};
		    	$('#grid').jqxGrid(GridSettings);	
          	},

          	DoSomething: function(statusbar)
          	{
              	//do something
          	}
      	};

[Peter StoevKeymaster]

Hi Makla,

It’s defined incorrectly. myVariable has no access to DoSomething. If you want it to have access to DoSomething, define it on the same level. May be you will find this helpful – https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[MaklaParticipant]

Thank you, for all answers, but:
I understand how this works, and when debugging, myVariable has pointer to Form object. I am asking only, how to send this pointer to renderstatusbar event handler?

[Peter StoevKeymaster]

Hi Makla,

Actually, myVariable does not have access to DoSomething and that is the reason you get the exception. If it was defined on the same level, then it would have access.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[MaklaParticipant]

Still no idea how to solve the problem, so I create an example and 2 sreenshots:

Demo: jsfiddle (just click run) Hope it works.

Hope it helps.

[MaklaParticipant]

Anyone, please?

[Peter StoevKeymaster]

Hi Makla,

As I already wrote, your “myVariable” variable is not in the same Context as the method which you try to call. In addition, if you try to initialize a Grid with settings like “myVariable” which are not part of the Grid’s API, an exception would be thrown and that exception would point you out that you try to use Invalid Property.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts