MVVM attribute binding & progress element

5 posts, 1 answers
  1. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 17 Jun 2013 Link to this post

    I have an HTML5 <progress> element where I want both the value and the max driven by the VM.

    I have tried this on a couple browsers, and it seems that attribute values for MAX and VALUE are fetched at init, but are not later updated. Is this something that can be driven dynamically? My fallback will have to be JQuery.

    <div class="Part">
        <progress id="ProgressBar"
            data-bind="attr: { max: TotalSize, value: TileCount }"></progress>100%
    </div>
  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 19 Jun 2013 Link to this post

    Hello,

    You should use the observable object set method to update the value. If you are already using the set method then check this jsBin example and let me know if I am missing something.

    Regards,
    Daniel
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 19 Jun 2013 Link to this post

    I was guessing this was a short NO answer, So I apologize for not providing enough information.

    Yes, I know that VM's need to be accessed by set(), get(). So I am not having problems with the value attribute, which  I am updating that way.

    1.<div class="Part Line">
    2.    <progress
    3.        id="ProgressBar"
    4.        class="Stretch"
    5.        data-bind="attr: { max: TotalFiles, value: TileCount }"></progress
    6.    <span class="Fixed">100%</span>
    7.</div>


    However, the max attribute is coming from a calculated function in the VM which is getting it's value from the aggregate sum of a DataSource bound to a Grid.

  5. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 19 Jun 2013 Link to this post

    I was guessing this was a short NO answer, So I apologize for not providing enough information.

    Yes, I know that VM's need to be accessed by set(), get(). So I am not having problems with the value attribute, which  I am updating that way.

            <div class="Part Line">
                <progress
                    id="ProgressBar"
                    class="Stretch"
                    data-bind="attr: { max: TotalFiles, value: TileCount }"></progress>&nbsp;
                <span class="Fixed">100%</span>
            </div>

    However, the max attribute is coming from a calculated function in the VM which is getting it's value from the aggregate sum of a DataSource bound to a Grid. An additional wrinkle is that the Grid is editable, and you can delete rows, so the column which has the aggregate (TotalFiles) is going to change as the grid is edited.

    What I guess I am doing is exploring how good your DataBinding is. Yes, I can do this in Jquery, but it is good to see if MVVM binding can handle it.

        var totalFiles = function () {
            if ($.isEmptyObject(this.LayerTable.aggregates())) return 0;
            return this.LayerTable.aggregates().FileCount.sum;
        };

    I am unable to use code formatting, do to a bug in the forums that claims this is "illegal posts". I have someone else looking into that.
    http://www.kendoui.com/forums/framework/general-discussions/invalid-post-content-.aspx






  6. Answer
    Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 21 Jun 2013 Link to this post

    Hello,

    You should use the get method to get the dataSource in order to update the attribute when the Grid data is changed:

    var totalFiles = function () {
        var table = this.get("LayerTable");
        if ($.isEmptyObject(table.aggregates())) return 0;
        return table.aggregates().FileCount.sum;
    };
    I posted my reply in the support ticket that I believe is on the same topic with more detailed information on this matter. Regards,
    Daniel
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready