Kendo Grid模板與JQuery的迷你圖

有沒有人有一個如何將JQuery Sparklines插件集成到Kendo Grid模板的例子？Kendo Grid模板與JQuery的迷你圖

我認爲這是很簡單的事，但每次我這樣做：模板：<span class="inlinebar">75,25,0,100</span> 只值75,25,0,100顯示在網格中，而不是實際的火花。

如果有人可以發佈樣本或解決方案，我將不勝感激。謝謝！

代碼示例：

<script> 
$('.inlinebar').sparkline('html', {type: 'bullet'});  
$(document).ready(function() {            
     $("#grid").hide(); 

     var grid = $("#grid").kendoGrid({ 
       dataSource: { 
        transport: { 
         read: { 
          url: "/Services/testService", 
          dataType: "json", 
          type: "GET", 
          data: {         
          } 
         } 
        }, 
        schema: { 
         model: { 
          fields: { 
           field1: {type: "number"}, 
           field2: {type: "number"}, 
           field3: {type: "number"} 
          } 
         }     
        }, 
        pageSize: 15 
       }, 
       selectable:"cell", 
       toolbar: kendo.template($("#template").html()), 
       height: 350,     
     filterable: true,   
     scrollable: true, 
     sortable: true,     
     pageable: true, 
       columns: [ 
        {field: "field1", title: "Field 1"}, 
        {field: "field2", title: "Field 2", template:'<span class="inlinebar">75,25,0,100</span>'}, 
        {field: "field3", title: "Field 3"} 
        ]       
        });

來源

2012-08-27 RizcoTech

您的Kendo Grid是否支持ajax？你如何設置Sparkline（在文檔準備期間;完成Kendo綁定）？一些代碼會有幫助。 –

用代碼示例更新原始問題 – RizcoTech

有幾個問題，你的代碼。

沒有使用類正確的jQuery選擇$('inlinebar').sparkline('html', {type: 'bullet'});
既然你加載通過AJAX你的數據，你的火花劍道UI網格之前執行（在前面inlinebar缺少.）曾經有一個機會初始化，因此它現在如何不會起作用。您需要在Kendo的dataBound事件中執行sparkline代碼（請參閱http://docs.kendoui.com/api/web/grid#events）。這樣數據和你的跨度在sparkline執行的時間就在那裏。

來源

2012-08-27 18:41:03

1）修復了在實際代碼中修復的問題。 2）好的，我看到你在說什麼，但我不知道如何將模板添加到網格的特定列，在這種情況下。你有任何可以證明這一點的片段或樣本？非常接近這將是非常有益的。 – RizcoTech

你不需要改變任何有關你的模板設置，只需要移動sparkline init代碼（''（'inlinebar'）。sparkline（'html'，{type：'bullet'}）;''dataBound'內部事件 –

謝謝！ – RizcoTech

Kendo Grid模板與JQuery的迷你圖

回答

相關問題