Ändern Sie bestimmte Div-Klasse in Kendo Raster Zeile Vorlage

Question

Ich bin ein Projekt ausgeführt, wo ich Kendo Grid Zeilenvorlage verwenden. Unten ist mein html Netzcode:

table id="grid" style="width:100%"> 
 
       <colgroup> 
 
        <col class="photo" /> 
 
        <col class="details" /> 
 
        <col /> 
 
       </colgroup> 
 
       <thead style="display:none"> 
 
        <tr> 
 

 
         <th> 
 
          Details 
 
         </th> 
 

 
        </tr> 
 
       </thead> 
 
       <tbody> 
 
        <tr> 
 
         <td colspan="3"></td> 
 
        </tr> 
 
       </tbody> 
 
      </table> 
 
      <script id="rowTemplate" type="text/x-kendo-tmpl"> 
 
       <tr> 
 
        <td style="width:30%"> 
 
        div class="row"> 
 
          <div id="dvImage" class="col-sm-4" style="width:118px"> 
 
           #= imagelink # 
 
          </div> 
 
          <div class="col-sm-8" style="width:400px"> 
 
           <span class="name" style="font-size:14px; color:green">#: Link #</span> 
 
           
 
          </div> 
 
         </div> 
 
        </td> 
 
       </tr> 
 
      </script> 
 
     

In dem obigen Skript für div class name "dvImage" für manchmal Daten nicht vorhanden ist, so dass es enthalten ist immer noch jene Raum.

Ich googelte viele Dinge und lernte, dass, wenn wir diese div-Klasse im onDataBound-Ereignis finden können, dann kann ich überprüfen, ob dieses div keine Daten haben kann dann dieses div für bestimmte Zeile ausblenden. aber wenn ich das nur für die erste Reihe probierte, bin ich in der Lage, die Daten für andere Reihen noch zu verstecken, es enthielt Raum. Alle Vorschläge sind willkommen.

Answer 1

Wenn ich Ihre Anforderungen richtig verstehe, wenn das Bild nicht existiert, dann möchten Sie, dass der Rest der Zeilen den Rest des Platzes einnimmt? Wenn das nicht stimmt, korrigiere mich bitte.

Unter der Annahme, dies der Fall ist, dann können Sie tatsächlich Ihre Vorlage wie folgt ändern:

Vor

<div id="dvImage" class="col-sm-4" style="width:118px"> 
#= imagelink # 
</div> 

Nach

#if(data.imagelink === null || data.imagelink === ""){# 
<div class="col-sm-12" style="width:518px"> 
#} else {# 
<div id="dvImage" class="col-sm-4" style="width:118px"> 
    #= imagelink # 
    </div> 
<div class="col-sm-8" style="width:400px"> 
#}# 

ich zusammengestellt haben eine Demo für Sie hier zu sehen: http://dojo.telerik.com/eMiMa/2

(in der Demo habe ich das Gitter erzählt das Foto für jede gerade Zeile und erweitern Sie die Details Raster auszublenden zwei Spalten zu übernehmen, anstatt 1-Säule)

Was einfach diese Änderung an der Vorlage sieht und Überprüft, ob der Wert imagelink gültig ist. Ist dies nicht der Fall, wird das Detail-Div erweitert, damit Sie den maximalen Speicherplatz einnehmen können. Wenn das Bild existiert, verarbeitet es die Vorlage als normal.

Um die dimensions gleich zu halten, ist das öffnende div für den nächsten Abschnitt in der bedingten Formatierung enthalten, so dass es den richtigen Abstand für Sie anwendet.

Wenn nur die gesamte Zeile ausgeblendet werden soll, können Sie diese Bedingungsprüfung an den Anfang der Vorlage verschieben und die gesamte Zeile ausblenden. Wenn dies das gewünschte Ergebnis ist, kann ich die Antwort aktualisieren, um dies zu reflektieren.