更改kendo網格行模板中的特定div類

Question

我正在運行一個項目，我在其中使用kendo網格行模板。 下面是我的html代碼格：

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> 
 
     

在爲DIV類名「dvImage」上述腳本有時數據不存在，因此它仍然包含這些空間。

我GOOGLE了很多東西，一定要知道，如果我們可以找到onDataBound事件這個div類的話，我可以檢查這個div沒有數據，則可以隱藏這個div的特定行。但是當我嘗試這隻爲第一行我能夠隱藏其他行的數據仍然是包含空間。 歡迎您提出任何建議。

Answer 1

如果我正確理解你的要求，如果圖像不存在，那麼你想要其餘的行細節佔用剩餘的空間？如果這不正確，請糾正我。

假如是這樣的話，那麼你可以真正改變你的模板是這樣的：

以前

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

#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"> 
#}# 

我已經把一個演示後你看看這裏：http://dojo.telerik.com/eMiMa/2

（在演示中，我已經告訴電網隱藏的照片對每個偶數行擴大細節電網採取了兩列，而不是1列）

這種變化根本是看你的模板什麼，檢查imagelink值是否有效，如果不是，則它只是展開細節div，以便佔用最大空間。如果圖像確實存在，那麼它會正常處理模板。

爲了使dimensions保持不變，您的下一個部分的開放div將包含在條件格式中，以便爲您應用正確的間距。

如果要求是隻隱藏整個行，那麼你可以將這個條件檢查模板的頂部和隱藏整個行。如果這是期望的結果，那麼我可以更新答案來反映這一點。