剣道プログレスバーがデータソースにバインドされていません

Question

剣道の進行状況バーを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; } 
} 

正しい方向を指してください。 Progressbarにパーセント値属性をバインドして、値を動的に表示する方法がわかりません。

Answer 1

最後にこれを解決しました。これを達成しようとしている他の人たちにこれが役立つことを願っています。プログレスバーのIDは次のようにキャプチャされ、テーブル内

<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を使用しています。これは、進捗バーは、JavaScriptコードが既にmodelとしてデータ項目を取得し http://docs.telerik.com/aspnet-mvc/helpers/grid/binding/ajax-binding

• 作成されたときに、データ項目オブジェクトは、クライアントで利用できるようになります。したがって、の代わりにmodel.PercentageをProgressBar初期設定ステートメントで使用してください。