Kendo進度條不綁定到數據源

Question

我想在HTML表中實現一個Kendo進度條。所以，我能夠在表格單元格內渲染進度條，但我無法將其綁定到名爲「百分比」的模型屬性。我在值字段中使用了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; } 
} 

請指點我正確的方向。我不知道如何將percent value屬性綁定到Progressbar以動態顯示值。

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> 

進度條的ID被捕獲這樣的表內：

<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代碼中使用。

爲了達到所期望的行爲，你需要做到以下幾點：

• 使用阿賈克斯數據源的網格。這將允許數據項的對象可在客戶端上創建的ProgressBars時 http://docs.telerik.com/aspnet-mvc/helpers/grid/binding/ajax-binding

• 的JavaScript代碼已經取回的DataItem作爲model。因此在ProgressBar初始化語句中使用model.Percentage而不是item.Percentage。