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.
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
0
Hello,
Daniel
Telerik
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.
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.
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>
<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
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>
<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
Hello,
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
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;
};
Daniel
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!