MVVM attribute binding & progress element

[Dr.YSG]

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>

[Daniel]

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

[Dr.YSG]

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.

[Dr.YSG]

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

[Daniel]

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