2013-07-22 9 views
11

Ho un grafico KendoUI generato con JavaScript. C'è un modo per cancellare la trama con un comando? Allo scopo di mostrare un'immagine "Caricamento in corso ..." mentre si attende che DataSource legga dati remoti.Grafico KendoUI - come faccio a mostrare l'animazione mentre carico i dati?

Grazie

+0

C'è un esempio completo per questo sul sito docs Telerik: http://docs.telerik.com/kendo -ui/dataviz/chart/how-to/show-overlay-while-loading –

+0

Penso che lo abbiano incluso come parte della loro libreria ora. Non era il caso 2 anni fa ... Grazie per il link! –

risposta

19

visualizzare e nascondere l'animazione di carico è:

// Display progress 
kendo.ui.progress($("#loading"), true); 

// Hide progress 
kendo.ui.progress($("#loading"), false); 

quindi si dovrebbe utilizzare requestStart e requestEnd eventi nel DataSource per sapere quando per mostrare o nascondere l'animazione progresso.

Il DataSource della Carta sarebbe:

dataSource : { 
    transport : { 
     read: { 
      url:... 
     } 
    }, 
    sort  : { 
     field: "year", 
     dir : "asc" 
    }, 
    requestStart: function() { 
     kendo.ui.progress($("#loading"), true); 
    }, 
    requestEnd : function() { 
     kendo.ui.progress($("#loading"), false); 

    } 
}, 

Esempio qui: http://jsfiddle.net/OnaBai/kcptr/

+0

Questa è una soluzione pulita! L'unico problema è che l'immagine di caricamento si blocca nel mezzo della pagina - Ho diversi grafici sulla pagina, quindi l'immagine di caricamento deve essere contenuta all'interno dell'area del grafico stesso: http://jsfiddle.net/ningencat/kcptr/ 2/Come andresti a risolvere il problema? Grazie –

+2

Il problema è che il contenitore del caricamento deve avere un posizionamento impostato relativo. Prova questo: http://jsfiddle.net/OnaBai/kcptr/3/ – OnaBai

+0

+1 Ottima risposta. Grazie! –