Индикатор прогресса Kendo не привязан к источнику данных

Question

Я пытаюсь реализовать индикатор прогресса Kendo в таблице HTML. Итак, пока я могу отображать индикатор выполнения внутри ячейки таблицы, но не могу связать его с атрибутом модели, который называется "Процент". Я использую item.Percentage в поле значения, но не могу привязать его к индикатору выполнения для изменения отображения в соответствии с процентным значением.

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; }
}

Пожалуйста, укажите мне в правильном направлении. Я не знаю, как связать атрибут процентного значения с индикатором выполнения для динамического отображения значения.

Answer 1

Наконец-то решил это. Надеюсь, что это поможет другим, кто пытается достичь того же.

<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>

Внутри таблицы идентификатор индикатора выполнения отображается следующим образом:

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

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

Спасибо

Answer 2

item.Percentage это выражение, которое доступно только на сервере, поэтому его нельзя использовать в коде JavaScript.

Чтобы добиться желаемого поведения, вам необходимо сделать следующее:

• используйте Ajax DataSource для Grid. Это позволит объектам элементов данных быть доступными на клиенте при создании ProgressBars http://docs.telerik.com/aspnet-mvc/helpers/grid/binding/ajax-binding

• код JavaScript уже извлекает dataItem как model, Так что используйте model.Percentage вместо item.Percentage в операторе инициализации ProgressBar.