WelcomeForumsCommunityWijmo 3Handling browser resizing with Knockoutjs

Wijmo Team Member
aligned posted on August 14, 2012 at 4:29 pm

I’m evaluating Wijmo with Knockout js to see if we can use it for a re-write project. I need to handle browser resizing like in http://wijmo.com/demo/dashboard/, but with KnockoutJs.

I was thinking that each view model would have a redraw method that would call the correct redraw method. So then my main DashboardViewModel, that has a collection of WidgetViewModels could loop through the widgets and call redraw. At the moment, these widgets are added to the page with an external template


 $(window).resize(function () {
 // redraw the widgets
                for (var widget in vm.widgets) {
                    widget.Redraw();
                }
// the example from the link  $(“#categorychart”).wijpiechart(“redraw”);
});

What should I put in the Redraw method?

Thank you!

Wijmo Team Member
aligned posted on August 15, 2012 at 5:07 pm

I have it working, though I wish the re-sizing was smoother and automatic. I’m wondering if the SVG viewbox would make any sense for them to use.

Anyways in my resize method, I call a different function depending on the control.
For a barchart:

$(“:wijmo-wijbarchart”).wijbarchart(“redraw”);

for a radial:


 $(“:wijmo-wijradialgauge”)
        .wijradialgauge(“option”, “width”, $(“#radialDashboardWidget”).width())
        .wijradialgauge(“option”, “height”, $(“#radialDashboardWidget”).height())
        .wijradialgauge(“redraw”);
Answer
Wijmo Team Member
Chris Bannon posted on August 17, 2012 at 5:57 pm

Hey, I noticed your blog post and found this post from it. I added the solutions to your problems to this fiddle, but we are going to address the face observability issue in our library asap.

http://jsfiddle.net/mr2qz/14/

The way to best handle resizing is like so:

 $(“#gauge”).wijradialgauge(“option”, “width”, $(“#gauge”).width()).wijradialgauge(“redraw”);

And if you want generic chart resizing you can do it like so. The selector is actually finding all widgets in matching NAMESPACE-WIDGETNAME which is handy for applying to many widgets of the same type.

$(“:wijmo-wijpiechart”).wijpiechart(“redraw”);

As for the face fill issue, we did not have that as one of our supported options that listens to observable changes. I am going to add that now though. It will be in our next release. In the meantime, you can subscribe to the change and update the option. This is just a temp solution here:


    vm.FaceFill.subscribe(function(newValue) {
        var face = $(“#gauge”).wijradialgauge(“option”, “face”);
        face.style.fill = newValue;
         $(“#gauge”).wijradialgauge(“option”, “face”, face);
    });
Answer
Wijmo Team Member
aligned posted on August 17, 2012 at 6:18 pm

@Chris Bannon, Thanks for the reply and the jsFiddle!

Answer

This topic has 2 voices, contains 3 replies, and was last updated by  aligned 831 days ago.

You must be logged in to reply to this topic.