2016-04-15 15 views
0

私は剣道グリッド行テンプレートを使用しているプロジェクトを1つ実行しています。時々データが、それはまだだ、これらのスペースを含めるように、存在しないためのdivクラス名「dvImage」のための上記のスクリプトで剣道グリッド行テンプレートの特定divクラスを変更する

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> 
 
     

: は、以下の私のhtmlグリッドコードです。

私は多くのことを捜して、onDataBoundイベントでこのdivクラスを見つけることができたら、このdivにデータがないかどうかを確認して、特定の行のこのdivを非表示にすることができることを知りました。しかし、私はこれを最初の行だけにしようとすると、まだそれはスペースを含んでいた他の行のためのデータを非表示にすることができます。 すべての提案を歓迎します。

答えて

1

画像が存在しない場合、要件を正しく理解していれば、残りの行の詳細が残りの領域を占めるようにしたいですか?これが正しくない場合は、私を修正してください。私が一緒のためのデモを入れている

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

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

:これは、あなたが実際にこのようなあなたのテンプレートを変更することができそうであると仮定すると、

ここをクリックしてください:http://dojo.telerik.com/eMiMa/2

は(デモで私も2列ではなく、1列を取るために、行と詳細グリッドを展開するすべてのための写真を非表示にするグリッドを言った)

この変更は、単にあなたのテンプレートを見ているん何とimagelinkの値が有効かどうかを確認し、値が有効でない場合は、単に最大のスペースを取るためにdetail divを展開します。イメージが存在する場合、イメージは通常通りテンプレートを処理します。

dimensionsを同じままにするには、次のセクションの開始divが条件付き書式に含まれているため、正しいスペースが適用されます。

行全体を非表示にする必要がある場合は、この条件付きチェックをテンプレートの先頭に移動して行全体を非表示にすることができます。これが望ましい結果であれば、これを反映するように答えを更新することができます。

+0

こんにちはDavid、あなたの回答をお寄せいただきありがとうございます。あなたの解決策を試してみましたが、いくつかの構文がありませんでしたので、無効なテンプレートの問題が発生しました。ありがとう、私はあなたの答えをupvotingです。 – Vikash

+0

喜んで助けました。私は不足している括弧を修正しました。デモはうまくいったはずです。 –

関連する問題