Chunk
The ProgressBar component allows you to present the state of the progress in equally defined partitions:
This is enabled with the Type enumeration property and the ChunkCount setting:
@using Kendo.Mvc.UI
@(Html.Kendo().ProgressBar()
.Name("profileCompleteness")
.Type(ProgressBarType.Chunk)
.ChunkCount(5)
.Min(0)
.Max(5)
.Value(2)
)
@addTagHelper *, Kendo.Mvc
<kendo-progressbar chunk-count="5" enable="true" max="5" min="0" reverse="false" show-status="true" type="ProgressBarType.Chunk" name="profileCompleteness" value="2">
</kendo-progressbar>
The calculation of the completeness % percents can happen with the .value() API method and javascript logic depending on the total count of inputs in the form. Here is an example:
$(".forms input").change(function () {
var completeness = 5;
$(".forms input").each(function () {
if (this.value == "") {
completeness--;
}
});
pb.value(completeness);
$("#completed").text((completeness * 20) + "%");
});