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

If I understand your requirements correctly if the image doesn't exist then you want the rest of the row details to take up the rest of the space? If this is not correct the please correct me.

Assuming this is the case then you can actually change your template like this:

Before

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

After

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

I have put together a demo for you to look at here: http://dojo.telerik.com/eMiMa/2

(in the demo I have told the grid to hide the photo for every even row and expand the details grid to take up two columns rather than 1 column)

What this change simply does is look at your template and checks to see if the imagelink value is valid and if it isn't then it simply expands the detail div for you to take up the maximum space. If the image does exist then it processes the template as normal.

In order to keep the dimensions the same the opening div for your next section is contained within the conditional formatting so that it applies the correct spacing for you.

If the requirement is to just hide the entire row then you can move this conditional check to the top of the template and hide the entire row. If this is the desired outcome then I can update the answer to reflect this.

更改kendo网格行模板

1 个答案: