kendo-ui - 如何在 kendo ui 中隐藏详细网格的展开/折叠图标

Question

我正在使用剑道 ui 网格详细信息模板。在网格中，我有一个下拉列表，其中包含一些值，例如下拉列表、文本框等。如果我添加新记录，那么我不想显示展开/折叠图标。选择下拉菜单后，所选值将是下拉菜单，然后我只想显示展开/折叠图标。我怎样才能使用剑道 ui 做到这一点。希望你能理解我的问题。我试图像这样在 dataBound 事件中访问它

     dataBound: function (e) {         

                var dataSource = this.dataSource;         
                this.element.find('tr.k-master-row').each(function() {

                    this.tbody.find("tr.k-master-row>.k-hierarchy-cell>a").hide();

                });
            }

Answer 1

尝试这个：

function dataBound() {
    var grid = this;

    //expand all detail rows
    grid.tbody.find("tr.k-master-row").each(function () {
        grid.expandRow($(this));
    })

    //remove hierarchy cells and column
    $(".k-hierarchy-cell").remove();
    $(".k-hierarchy-col").remove();
}

希望这可以帮助...

Answer 2

另一种选择是将 设置Width()为看起来像是隐藏的。

function dataBound() {
    $(".k-hierarchy-cell", "#gridName").width(0.1);
    $(".k-hierarchy-col", "#gridName").width(0.1);
}

Answer 3

如果你使用 Kendo 的 MVC 助手，这样做会更容易：

$(".k-hierarchy-cell").hide();
$(".k-hierarchy-col").remove();

它隐藏了第一个默认列（带有图标），但同时它使其他列保持在正确的位置。

Answer 4

<div id="example">
            <div id="grid"></div>

            <script type="text/x-kendo-template" id="template">
                some content
            </script>

            <script>
                $(document).ready(function() {
                    var element = $("#grid").kendoGrid({
                        dataSource: [
                          {FirstName: "name1", hasChildren: true},
                          {FirstName: "name2", hasChildren: false}
                        ],
                        height: 550,
                        sortable: true,
                        pageable: false,
                        detailTemplate: kendo.template($("#template").html()),
                        detailInit: detailInit,
                        dataBound: function(e) {
                            var items = e.sender.items();
                            items.each(function(){
                              var row = $(this);
                              var dataItem = e.sender.dataItem(row);
                              if(!dataItem.hasChildren){
                                row.find(".k-hierarchy-cell").html(""); //It will hide 
                              }

                            })
                        },
                        columns: [
                            {
                                field: "FirstName",
                                title: "First Name",
                                width: "120px"
                            }
                        ]
                    });
                });

                function detailInit(e) {

                }
            </script>

        </div>

Answer 5

要有条件地显示网格行详细信息箭头，请将数据绑定事件添加到具有详细信息模板的网格。在数据绑定事件中，调用此函数：

                dataBound: function (e) {                            // on data bound
                    var items = e.sender.items();                    // find all rows
                    items.each(function() {                          // for each row
                        var row = $(this);                           // 
                        var dataItem = e.sender.dataItem(row);       // get the data item of the row
                        if (!dataItem.HasChildren) {                 // check for children
                            row.find(".k-hierarchy-cell").html("");  // if no children, hide arrow
                        }
                    });
                }