Kendo Progress bar, не связанный с datasource

Question

Я пытаюсь реализовать индикатор выполнения Kendo в таблице HTML. Итак, далеко я могу отобразить индикатор выполнения внутри ячейки таблицы, но я не могу привязать его к атрибуту model, называемому «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

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

<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. Это позволит элемента данных объектов должны быть доступны на клиенте, когда индикаторы выполнения созданы http://docs.telerik.com/aspnet-mvc/helpers/grid/binding/ajax-binding

• код JavaScript уже извлекает DataItem в model. Поэтому используйте model.Percentage вместо item.Percentage в инструкции инициализации ProgressBar.