locked
Bug? Cannot set rating via JavaScript when the control is disabled: true...

    Question

  • Simple ratings control:

    <div id="Average_Rating" data-win-control="WinJS.UI.Rating" data-win-options="{disabled: true}"></div>


    var theAverageRating = document.getElementById('Average_Rating').winControl;
    theAverageRating.rate = 3;

    Doing this, the rating control on the front-side is empty. Now, take out the disabled: true, refresh, and the rating shows 3.

    Note that this works fine when the rating control is bound in a template. Binding and disabled: true works, setting the value via JavaScript does not.

    Can anyone replicate?

    Friday, March 2, 2012 10:55 PM

Answers

  • Hi H,

    You will want to move up to the Consumer Preview and use this to set the averageRating:

    theAverageRating.averageRating = 3;


    Jeff Sanders (MSFT)

    Monday, March 5, 2012 1:55 PM
    Moderator

All replies

  • Hi H,

    You will want to move up to the Consumer Preview and use this to set the averageRating:

    theAverageRating.averageRating = 3;


    Jeff Sanders (MSFT)

    Monday, March 5, 2012 1:55 PM
    Moderator
  • Will try that, thanks. Looks like that is missing from the Migration documentation.
    Monday, March 5, 2012 2:58 PM
  • Cool, when in doubt, head to the documentation.  That has been through some major updates!


    Jeff Sanders (MSFT)

    Monday, March 5, 2012 3:00 PM
    Moderator
  • Yup, averageRating worked. It's in the MSDN Rating page, but not in the migration documenation.
    Monday, March 5, 2012 4:07 PM
  • Thanks for reporting the documentation issue H!

    Jeff Sanders (MSFT)

    Monday, March 5, 2012 4:21 PM
    Moderator
  • You know what I think there is still some bugs in the rating control.

    Here is a rating control with binding, not disabled. (Note Rating is inside a Template, and we're adding the templates to a normal div in the js using the template.render functionality, not in a ListView).

    <div class="product-review-rating" data-win-control="WinJS.UI.Rating" data-win-bind="winControl.userRating: RatingValue WinJS.Binding.oneTime" data-win-options="{disabled: false}"></div>

    Here is the output...comes out fine.

    First one is 4, second one is one. Fine. But I want this disabled, as it's just to view.

    In the div set disabled: true. Here is the ouput.

    Monday, March 5, 2012 5:52 PM
  • Appendum

    Ratings are blank. Now I can guess it's because I'm using userRating, and when disabled you cannot set. So use averageRating you'll say.

    <div class="product-review-rating" data-win-control="WinJS.UI.Rating" data-win-bind="winControl.averageRating: RatingValue WinJS.Binding.oneTime" data-win-options="{disabled: true}"></div>

    Now here is the UI.

    1) Note there are no values

    2) Note the 2nd rating, has 6 stars, although all the values are 1-5 in the code from the service.

    Now here is the same with disabled: false.

    Items show up, albeit that weird 6 star output.

    Again, this is not using a ListView, but just a normal div.

    <div id="ReviewsListing" style="height: 100%; width: 100%;background-color:white;"></div>

    And we're appending in a service callback. Here is a js snippet.

    var template = new WinJS.Binding.Template(document.getElementById("ReviewTemplate"));
    
    template.render({
        Alias: _alias,
        RatingValue: _ratingValue,
        Comment: _comment,
        CommentDate: _commentDate,
      }).then(function (element) {
      theListView.appendChild(element);
    });

    Now, if the rating is in a Template and is used in a ListView as an itemTemplate then it works fine, seems like this "code-way" to do it makes things work funky.
    • Edited by Harlequin Monday, March 5, 2012 5:53 PM Typo
    Monday, March 5, 2012 5:53 PM
  • Could you put together a repro of the issue for me?  Either use a blank app and post your code or modify one of the samples?

    -Jeff


    Jeff Sanders (MSFT)

    Monday, March 5, 2012 7:11 PM
    Moderator