Question

我正在尝试在HTML表格中实现一个Kendo进度条。所以，我能够在表格单元格中呈现进度条，但我无法将其绑定到名为“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; }
}

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

Answer 1

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

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

为网格使用 Ajax 数据源。这将允许在创建ProgressBars时在客户端上使用数据项对象 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>

在表格中，进度条ID的捕获方式如下：

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

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

由于

Kendo Progress bar不绑定到数据源

2 个答案: