This is a migrated thread and some comments may be shown as answers.

MVVM attribute binding & progress element

4 Answers 151 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Dr.YSG
Top achievements
Rank 2
Dr.YSG asked on 17 Jun 2013, 06:03 PM
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>

4 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 19 Jun 2013, 11:36 AM
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!
0
Dr.YSG
Top achievements
Rank 2
answered on 19 Jun 2013, 01:56 PM
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.

0
Dr.YSG
Top achievements
Rank 2
answered on 19 Jun 2013, 01:57 PM
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






0
Accepted
Daniel
Telerik team
answered on 21 Jun 2013, 02:47 PM
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!
Tags
MVVM
Asked by
Dr.YSG
Top achievements
Rank 2
Answers by
Daniel
Telerik team
Dr.YSG
Top achievements
Rank 2
Share this question
or