Kendo Progress bar not binding to datasource

Question

I am trying to implement a Kendo progress bar in the HTML table. So, far I am able to render the progress bar inside the table cell but I am unable to bind it to the model attribute called "Percentage". I am using item.Percentage in the value field but, unable to bind it to the progress bar for a change in the display according to the percent value.

Relevant part of the HTML table cell:
<td align="center">
                    @*<div id="profileCompleteness"></div>*@
                    <div class='progress'></div>

                    @Html.DisplayFor(modelItem => item.Percentage)


                </td> 

Javascript:
<script>
    $(".progress").each(function(){
        var row = $(this).closest("tr");
        var model = grid.dataItem(row);

        $(this).kendoProgressBar({
            value: item.Percentage,
            min:0,
            max: 1100,
            type:"chunk"
        });
    });


</script>

Model

 public class MainScreenViewModel
    {
        private IMainScreenRepository mainScreenRepository;

        #region Properties
        [Required]

        public decimal ReportId { get; set; }
        public string ReportDescription { get; set; }

        public string Status { get; set; }

        public string Percentage { get; set; }
}

Please point me in the right direction. I don't know how to bind the percent value attribute to the Progressbar to display the value dynamically.

Answer 1

item.Percentage is an expression that is available on the server only, so it cannot be used in JavaScript code.

To achieve the desired behavior, you need to do the following:

• use an Ajax DataSource for the Grid. This will allow data item objects to be available on the client when the ProgressBars are created http://docs.telerik.com/aspnet-mvc/helpers/grid/binding/ajax-binding

• the JavaScript code already retrieves the dataItem as model. So use model.Percentage instead of item.Percentage in the ProgressBar initialization statement.

Answer 2

Finally solved this. Hope this will help others who are trying to achieve the same.

<script>
        $(document).ready(function () {
            debugger;
            $(".dashboard-table tr.trReport").each(function () {
                debugger;
                var row = $(this).closest("tr");
                var hiddenPercentageId = row[0].id + "_percentage";
                var hiddenProgress = row[0].id + "_progress";
                var progressValue = $('.dashboard-table tr#' + row[0].id + ' input[name="' + hiddenPercentageId + '"]')[0].value;

                $(".dashboard-table tr#" + row[0].id + " div#" + hiddenProgress).kendoProgressBar({
                    value: ((progressValue == undefined || progressValue == null) ? '-1' : progressValue),
                    min: 0,
                    max: 36
                });
            });
        });
    </script>

Inside the table the progress bar id is captured like this:

<td align="center" id="@(item.Percentage)">
                    @Html.Hidden(item.ReportId + "_percentage", item.Percentage)

                    <div class='progress' id="@(item.ReportId + "_progress")"></div>
                </td>

Thanks