更改剑道网格行模板中的特定 div 类

Question

我正在运行一个使用剑道网格行模板的项目。 下面是我的 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”脚本中，有时数据不存在，所以它仍然包含那些空间。

我用谷歌搜索了很多东西并知道如果我们可以在 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

（在演示中，我告诉网格隐藏每个偶数行的照片并展开详细信息网格以占用两列而不是一列）

此更改所做的只是查看您的模板并检查imagelink 值是否有效，如果不是，则它只是扩展详细信息 div 以占用最大空间。如果图像确实存在，那么它会照常处理模板。

为了保持dimensions 相同，下一部分的开头 div 包含在条件格式中，以便为您应用正确的间距。

如果要求只是隐藏整行，那么您可以将此条件检查移动到模板的顶部并隐藏整行。如果这是预期的结果，那么我可以更新答案以反映这一点。