"renderstatusbar" and "ready" synchronization

[andy8Participant]

Hello all,

After upgrading to the latest 3.2.2 version, I am having problems with synchronizing DOM elements built inside the renderstatusbar function. This is the grid structure:

    ready: function () {
        $("#h_options").buttonset();
        $("#h_options").jqxTooltip({
            content: 'Positions entry',
            position: 'mouse',
            theme: theme
        });
	},
    renderstatusbar: function (statusbar) {
    	var container = $("<div class='btn_cont'></div>");
    	var sel = $("<div id='h_options' style='font-size: 10px;float:left; margin-left:8px;'><input id='w_base' type='radio' name='hopt' checked='checked' value='1'/><label for='w_base'>Weights</label><input id='h_base' type='radio' name='hopt' value='2'/><label for='h_base'>Positions</label></div> ");
        container.append(sel);
        statusbar.empty();
        statusbar.append(container);        
    },
    .....
    .....
});

First, I create an empty grid (no data source linked) and then assign a local data array to the grid later. Again, it has been working perfectly fine with the old jqwidgets (all tested and proven on version 3), but doesn’t work with 3.2.2. The problem is that it goes to the “ready” section before creating the statusbar – the dom element with “#h_base” is not ready.

How to get it fixed? I cannot use any data loading events, simply because the data source is linked later.

Thanks

[Peter StoevKeymaster]

Hi andy8,

“ready” and “renderstatusbar” are not related functions. There is also no pattern which one should be called before the other. “ready” is called when the widget has loaded its data and is OK to call a method or set a property. Unfortunately, at present we cannot offer a different behavior or a way to change this behavior.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[andy8Participant]

Further to my previous post. Prior to v.3.2.2 I have been using the following structure with no problems:

$("#jqxGrid").jqxGrid({
	.......

    renderstatusbar: function (statusbar) {
    	var container = $("<div class='btn_cont'></div>");
    	var sel = $("<div id='h_options' style='font-size: 10px;float:left; margin-left:8px;'><input id='w_base' type='radio' name='hopt' checked='checked' value='1'/><label for='w_base'>Weights</label><input id='h_base' type='radio' name='hopt' value='2'/><label for='h_base'>Positions</label></div> ");
        container.append(sel);
        statusbar.empty();
        statusbar.append(container); 
        
        //all manipulations with the created DOM
        $("#h_options").buttonset();
        $("#h_options").jqxTooltip({
            content: 'Positions entry',
            position: 'mouse',
            theme: theme
        });              
    },
    .....
    .....
});

It doesn’t work anymore, because the new elements created inside “renderstatusbar” are not ready. I had to revert to the old v.3 until get some stable solution for that….

[andy8Participant]

Peter, what has changed in the latest release? Why DOM elements created inside “renderstatusbar” are not ready anymore? The above code has been working perfectly fine for “centuries”

What I am saying that it would be nice to maintain the core sync functionality across the latest releases.

[Peter StoevKeymaster]

Hi andy8,

Nothing has changed. As I wrote, “ready” ensures that the Grid’s data is loaded, not that its HTML Elements are rendered.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[andy8Participant]

Hi Peter,

I had to try “on ready”, because my old code was not working with 3.2.2. Now it generates an error:

“jqxGrid: The data is still loading. When the data binding is completed, the Grid raises the ‘bindingcomplete’ event. Call this function in the ‘bindingcomplete’ event handler. “

If I remove the part after “statusbar.append(container);” nor errors are generated

You may test yourself – this code works fine with the old versions, but not with the latest ones (obviously, something has changed):

$("#jqxGrid").jqxGrid({
	.......

    renderstatusbar: function (statusbar) {
    	var container = $("<div class='btn_cont'></div>");
    	var sel = $("<div id='h_options' style='font-size: 10px;float:left; margin-left:8px;'><input id='w_base' type='radio' name='hopt' checked='checked' value='1'/><label for='w_base'>Weights</label><input id='h_base' type='radio' name='hopt' value='2'/><label for='h_base'>Positions</label></div> ");
        container.append(sel);
        statusbar.empty();
        statusbar.append(container); 
        
        //all manipulations with the created DOM
        $("#h_options").buttonset();
        $("#h_options").jqxTooltip({
            content: 'Positions entry',
            position: 'mouse',
            theme: theme
        });  
        //this part of the code causes "bindingcomplete" error in v 3.2.2           
    },
    .....
    .....
});

Any suggestions?

Thanks!

[Peter StoevKeymaster]

Hi andy8,

Sorry, but the provided information is not sufficient for testing. If you would like to share an example, please prepare it here: http://jsfiddle.net/ and share a link so we would be able to test the specific scenario.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[andy8Participant]

Hi Peter,

Thanks, I will try to extract a part of the code for debugging. I guess, something has changed in the sync/async options… I keep digging….

[gwjwinParticipant]

As I know, there is no event will raised or method will called after statusbar was created (ver 3.2.2), you cannot access you DOM object in statusbar as you want, but jqxWidget object can initialize in the renderstatusbar before DOM was created in page. You can check my example in http://jsfiddle.net/gwjwin/uw5Cd/

[andy8Participant]

Finally, I’ve managed to get it fixed. The problem was not because of “ready/not ready” DOM elements, but because I was rendering the jqxGrid to the same div without destroying the old grid first. In the old version, it worked fine though. So, the remedy was to add

$('#gridID).jqxGrid('destroy');

– before rendering a new grid into the same div. The ‘destroy’ command also deletes the grid div, so it is necessary to recreate the div before rendering a new grid.

[Author]

Posts