如何在加载过程后为kendo网格添加迷你图?

时间:2013-08-15 14:23:31

标签: kendo-ui kendo-grid sparklines

伙计们我想知道在加载后添加迷你线到网格的方法,我自己使用了更改事件,但问题是在点击网格后,出现了迷你图!

为了澄清,我添加了一个关于我的项目的视频

http://jsfiddle.net/psot98/AxMHY/3/embedded/result/

Video

事件更改网格

      change: function (e) {
                $(".sparkline").kendoSparkline({

                    type: "area",

                    series: [{
                        name: "World",
                        data: [15.7, 16.7, 20, 23.5, 26.6, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5, 3.5],

                    }, {
                        name: 'New York',
                        data: [0.7, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5],

                    }],

                });
            }

2 个答案:

答案 0 :(得分:2)

怎么样:http://jsfiddle.net/vojtiik/AxMHY/4/embedded/result/ 您可以使用DataBound事件,因此一旦加载和绑定数据 - 您将显示您的花式图表。 http://docs.kendoui.com/api/web/grid#events-dataBound

dataBound : function (e) {
                  $(".sparkline").kendoSparkline({
                      type: "area",
                      series: [{
                          name: "World",
                          data: [15.7, 16.7, 20, 23.5, 26.6, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5, 3.5],

                      }, {
                          name: 'New York',
                          data: [0.7, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 4.1, 8.6, 2.5],
       }],

                  });
              }

答案 1 :(得分:0)

试试这个:

$.fn.kendoSparkline = function(options){
    // if the grid is not prepared just keep waiting 
    if($(this).find('.k-grid-header').length == 0){
        setTimeout(function(){
            $(this).lockColumn(count);
        },50);
        return;
    }
    // kendoSparkline logic
}

$('#kendoGrid').kendoGrid({...});
$(".sparkline").kendoSparkline({...});

此方法将检查网格是否已加载,并将继续等待它已加载。