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

  <div id="dashboardWidgets" data-bind="foreach: Widgets" class="flexible-widget">
            <!-- ko template: {name: properties.templateName  } -->
            <!-- /ko -->
 $(window).resize(function () {
 // redraw the widgets
                for (var widget in vm.widgets) {
// 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:


for a radial:

        .wijradialgauge("option", "width", $("#radialDashboardWidget").width())
        .wijradialgauge("option", "height", $("#radialDashboardWidget").height())
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.


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.


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);
Wijmo Team Member
aligned posted on August 17, 2012 at 6:18 pm

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


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

You must be logged in to reply to this topic.