Kendo-Diagramm mit JSRender + Javascript-Funktion

Question

Ich habe ein Raster, in dem eine der Spalten ich eine Trendlinie mit Kendo-Diagramm zeichne. Das Problem ist, dass das Diagramm nur in einer der Zeilen angezeigt wird und wenn ich die Seite aktualisiere, ändert es die Position, in der die Grafik zeigt. Manchmal wird es überhaupt nicht angezeigt. (Screenshots im Anhang) Ich habe es versucht Übergeben von eindeutigen divIds, eindeutige Chartnamen an die JavaScript-Funktion ohne Glück. {{: ~ trend ('Mydiv', # parent.parent.data)}} Die einzige Sache, die ich vermisse, ist eine Return-Anweisung von Javascript-Funktion zu JsRender, die ich nicht als ein KendoChart zurückgeben kann Hier ist ein meiner JsRender Code und Javascript Hilfsfunktion. Auch einschließlich Screenshots der Trendlinie.

script id="customGridTemplate" type="text/x-jsrender"> 
<div class="table-wrapper dashboard-grid" id="main"> 
    {^{for data)}} 
    {{!-- Get Column Headers --}} 
    {{if #getIndex() == 0}} 
    <div class="table-head"> 
     {{props}} 
     {{for key}} 
     <div class="table-col"> 
      <div class="table-th">{{:}}</div> 
     </div> 
     {{/for}} 
     {{/props}} 
    </div> 
    {{/if}} 
    {{/for}} 
    {^{for data}} 
    <div class="table-row"> 
     {{!-- Get Rows --}} 
     {{props}} 
     {{for}} 

     <div class="table-col"> 
      <div class="table-th">{{if key=='' || key == null}} &nbsp;{{else}} {{>key}} {{/if}}</div> 
      <div class="table-td"> 
       {{if #getIndex() == 0}} 
       <img title="Summary" id="displaySummary" data-link="name{:prop}" src="/Images/InfoImgIcon.png" alt="" height="16" width="14" /> 
       {{if prop=='' || prop == null}} &nbsp; {{else}} {{:prop}} {{/if}} 
       {{else key=='Trend'}} 
      <div id="Mydiv">{{:~trend('Mydiv',#parent.parent.data)}}</div> 
       </div> 
       {{else key=='Status'}} 
       {{if prop=='-1'}} <div><img title="" id="imgSquare" src="/Images/square.svg" alt="" height="16" width="14" /></div> {{/if}} 
       {{if prop=='0'}} <div><img title="" id="imgTriangle" src="/Images/triangle.svg" alt="" height="16" width="14" /></div> {{/if}} 
       {{if prop=='1'}} <div><img title="" id="imgCircle" src="/Images/circle.svg" alt="" height="16" width="14" /></div> {{/if}} 
       {{else}} 
       {{if prop=='' || prop == null}} &nbsp; {{else}} {{:prop}} {{/if}}{{/if}} 
      </div> 
      <div class="clear"></div> 
     </div> 

     {{/for}} 
     {{/props}} 

    </div> 
    {{/for}}  
     </div>  

      <div class="modal fade" data-link="id{:~WidgetId}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
       <div class="modal-dialog modal-lg"> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
          <h4 class="modal-title" id="myModalLabel">Metric Summary</h4> 
         </div> 
         <div class="modal-body"> 
          <table class=" table table-striped table-condensed"> 
           <tbody> 
            <tr> 
             <td width="65%"> 
              <table width="100%"> 
               <tbody> 
                <tr> 
                 <td colspan="2"> 
                  <table> 
                   <tbody> 
                    <tr><td>Metric Definition:&nbsp;</td><td> {{:Summary.MetricDefinition}}</td></tr> 
                    <tr><td>Metric Owner:&nbsp;</td><td>{{:Summary.MetricOwner}}</td></tr> 
                   </tbody> 
                  </table> 
                 </td> 
                </tr> 
                <tr style="border-bottom: 1px solid #E8E8E8"><td colspan="2"></td></tr> 
                <tr> 
                 <td width="32%"> 
                  <ul type="square" style="color:#5cb85c"><li><span style="color:#000000">Highlights:</span></li></ul> 
                  {{for Summary}} 
                  {{props CommentaryHighlights}} 
                  {{>prop}}<br /> 
                  {{/props}} 
                  {{/for}} 
                 </td> 
                 <td width="32%"> 
                  <ul type="square" style="color: #d9534f;"><li><span style="color:#000000">Lowlights:</span></li></ul> 
                  {{for Summary}} 
                  {{props CommentaryLowlights}} 
                  {{>prop}}<br /> 
                  {{/props}} 
                  {{/for}} 
                 </td> 
                </tr> 
               </tbody> 
              </table> 
             </td> 
             <td width="35%" height="100%"> 
              <div><table><tbody><tr><td>Graph Filter</td><td> 
                          <select name="cars"> 
                           <option value="YoY">YoY</option> 
                           <option value="MoM">MoM</option>                          
                          </select> 
               </td></tr></tbody></table></div> 
              <div style="border: 1px solid #E8E8E8; height: 200px;"> 
               <div id="chart"></div> 
              </div> 

             </td> 
            </tr> 
           </tbody> 
          </table> 
         </div> 
         <div class="modal-footer"> 
          <button type="button" id="btnClose" class="btn btn-default" data-dismiss="modal">Close</button> 
         </div> 
        </div> 
       </div> 
      </div> 

-------- Ende JSRender Snippet -----------

---------- Beging HelperFunction Trend ------

function BindTrendLineChart(TrendDivId, MetricTrendData) { 
[![enter image description here][1]][1] 
var trendLineDataSource = TrendLineDataSource(MetricTrendData) 
$("#" + TrendDivId).kendoChart({ 
    dataSource: { 
     data: trendLineDataSource, 
     group: { 
      field: "data" 
     } 
    }, 
    series: [{   
     type: "line", 
     field: "value", 
     style: "smooth", 
     markers: { 
      visible: false 
     } 
    }], 
    categoryAxis: { 
     title: { 
      text: "" 
     }, 
     majorGridLines: { 
      visible: false 
     }, 
     majorTicks: { 
      visible: false 
     } 
    }, 
    valueAxis: { 
     max: 3, 
     title: { 
      text: "voltage" 
     }, 
     majorGridLines: { 
      visible: false 
     }, 
     visible: false 
    }, 
    chartArea: { 
     width: 100, 
     height: 30 
    }, 
    legend: { 
     position: "custom", 
     orientation: "horizontal", 
     visible: false 
    } 
}); 

}

Answer 1

Das Problem hierbei ist, dass Sie nicht berücksichtigt das Verarbeitungsmodell von JsViews genommen haben. Ihre {{:~trend('Mydiv',#parent.parent.data)}} Hilfsfunktion wird während des Renderns der Vorlage (die die erste Stufe der link(...)-Methode ist) aufgerufen. Erst danach wird die gerenderte Ausgabe in das DOM eingefügt.

Also, wenn Sie einfach einen JavaScript-Haltepunkt in Ihrem Code setzen hatten: $("#" + TrendDivId).kendoChart({... Sie würden sehen, dass $("#" + TrendDivId) kehrt null - seit diesen <div> noch nicht im DOM existiert.

Die korrekte Sache zu tun ist, das Diagramm darzustellen, nachdem Datenverbindung erfolgt worden ist. Ein guter Weg, dies zu tun, besteht darin, ein JsViews-Tag-Steuerelement für Kendo-Diagramme zu definieren und dann das Rendern des Diagramms im onAfterLink-Handler des Tag-Steuerelements durchzuführen.

// Define a kendochart tag 
$.views.tags("kendochart", { 
    onAfterLink: function(tagCtx, linkCtx) { 
    // Bind to the data-linked element, and pass the data argument 
    $(linkCtx.elem).kendoChart(tagCtx.args[0]); 
    } 
}); 

Sie können es dann so in der Vorlage verwenden:

<div data-link="{kendochart chartdata}"></div> 

Hier ist ein funktionierendes Beispiel: https://jsfiddle.net/BorisMoore/uvcrvepL/

Answer 2

DrillDownGrid.Cshtml

<script id="customGridTemplate" type="text/x-jsrender"> 

<div class="table-wrapper dashboard-grid" id="main"> 
    {^{for data)}} 
    {{!-- Get Column Headers --}} 
    {{if #getIndex() == 0}} 
    <div class="table-head"> 
     {{props}} 
     {{for key}} 
     <div class="table-col"> 
      <div class="table-th">{{:}}</div> 
     </div> 
     {{/for}} 
     {{/props}} 
    </div> 
    {{/if}} 
    {{/for}} 
    {^{for data}} 
    <div class="table-row"> 
     {{!-- Get Rows --}} 
     {{props}} 
     {{for}} 
     <div class="table-col"> 
      <div class="table-th">{{if key=='' || key == null}} &nbsp;{{else}} {{>key}} {{/if}}</div> 
      <div class="table-td"> 
       {{if #getIndex() == 0}} 
       <img title="Summary" id="displaySummary" data-link="name{:prop}" src="/Images/InfoImgIcon.png" alt="" height="16" width="14" /> 
       {{if prop=='' || prop == null}} &nbsp; {{else}} {{:prop}} {{/if}} 
       {{else key=='Trend'}} 
       <div> 

        <div id="Content">{{:~trend(#parent.parent.parent.parent.data.MetricId,#parent.parent.data)}}</div> 

---- ------------------------------ End Snippet ------------------ ------------------

Drilldowngrid.js:

function BindTrendLineChart(TrendDivId, MetricTrendData) { 
debugger; 
var app = { 
    chartdata: { 
     title: "", 
     seriesDefaults: { 
      type: "line", 
      style: "smooth" 
     }, 
     series: [ 
      { name: "Example Series", data: [.20, .30, .40, .50, .60, .70, .70, .70, .70, 1] } 
     ], 
     categoryAxis: { 
      title: { 
       text: "" 
      }, 
      majorGridLines: { 
       visible: false 
      }, 
      majorTicks: { 
       visible: false 
      } 
     }, 
     valueAxis: { 
      max: 3, 
      title: { 
       text: "voltage" 
      }, 
      majorGridLines: { 
       visible: false 
      }, 
      visible: false 
     }, 
     chartArea: { 
      width: 100, 
      height: 30 
     }, 
     legend: { 
      position: "custom", 
      orientation: "horizontal", 
      visible: false 
     } 
    } 
}; 

$.views.tags("kendochart", { // Define a kendochart tag 
    onAfterLink: function (tagCtx, linkCtx) { 
     $(linkCtx.elem).kendoChart(tagCtx.args[0]); // Bind to the data-linked element 
    } 
}); 
$.link.theTmpl("#Content", app); 

}