Kendo 进度条未绑定到数据源

Question

我正在尝试在 HTML table 中实现 Kendo 进度条。所以，到目前为止，我能够在 table 单元格内呈现进度条，但我无法将它绑定到名为 "Percentage" 的模型属性。我在值字段中使用 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; }
}

请指出正确的方向。我不知道如何将百分比值属性绑定到 Progressbar 以动态显示该值。

Answer 1

item.Percentage 是仅在服务器上可用的表达式，因此不能在 JavaScript 代码中使用。

要实现所需的行为，您需要执行以下操作：

为网格使用 Ajax 数据源。这将允许数据项对象在创建 ProgressBar 时在客户端可用 http://docs.telerik.com/aspnet-mvc/helpers/grid/binding/ajax-binding
JavaScript 代码已将 dataItem 检索为 model。所以在 ProgressBar 初始化语句中使用 model.Percentage 而不是 item.Percentage

Answer 2

终于解决了这个问题。希望这会帮助其他正在努力实现同样目标的人。

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

在 table 中，进度条 ID 是这样捕获的：

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

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

谢谢

Kendo 进度条未绑定到数据源

Kendo Progress bar not binding to datasource

asp.net-mvc

kendo-ui

kendo-asp.net-mvc

kendo-progressbar