CODEWITHSUNDEEP
kendo-uikendo-grid
Jonathan
Jonathan

Reputation: 1669

How to hide the expand/collapse icon for the detail grid in kendo ui

I am using kendo ui grid detail Template. In the grid i have a dropdown with some values like dropdown, textbox etc. If i add the new record then i don't want to show the expand/collapse icon. After selecting the dropdown and the selected value will be dropdown then only i want to show the expand/collapse icon. How can i able to do this using kendo ui. Hope you understand my quesion. I have tried to access that in the dataBound Event like this

     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();

                });
            }

Upvotes: 4

Views: 10235

Answers (6)

Murat Yıldız
Murat Yıldız

Reputation: 12060

Try this:

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();
}

Upvotes: 5

Fethi Wap
Fethi Wap

Reputation: 61

if you wonder how to do it with React without using jQuery, I ended up using cellRender props.

....
const cellRender = (tdElement, cellProps) => {
    if (cellProps.field === 'expanded') { // this is the expand column you want to hide
        if (cellProps.dataItem.ProductName !== 'Chai') { // Condition goes here. I disabled all expand icon if ProductName is not Chai
            return <td> </td>;
        }
    }
    return tdElement;
};

return (
    <Grid
      ...
        cellRender={cellRender}
      ...
    >
        <Column field="ProductName" title="Product" width="300px" />
        <Column field="ProductID" title="ID" width="50px" />
        <Column field="UnitPrice" title="Unit Price" width="100px" />
        <Column field="QuantityPerUnit" title="Qty Per Unit" />
    </Grid>
);```

Upvotes: 1

user11691578
user11691578

Reputation: 1

<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>

Upvotes: -1

Mister P
Mister P

Reputation: 1

To conditionally show the grid row details arrow, add a databound event to your grid that has the detail template. In the databound event, call this function:

                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
                        }
                    });
                }

Upvotes: -1

krypru
krypru

Reputation: 1742

If you use Kendo's MVC helper, it' way easier to do this that way:

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

It hides first default column (with icon) but in the same time it keeps other columns in right position.

Upvotes: 1

ShawnOrr
ShawnOrr

Reputation: 1329

Another option is to set the Width() to look like it's hidden.

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

Upvotes: 2

Related Questions