How to hide detail indicator based on a rows ID?

[Chris]

I have a grid that uses detailInit, right now I am able to change color of the row to blue when the row's given ID is equal to 0, its at this point that I need to hide the detail indicator as well, I have tried a few different things but haven't been able to successfully remove the indicator. Here is the code for my grid, and you can see where I am adding the color blue to the row and I have a comment there where I am trying to remove the detail indicator

$("#CatalogGrid").kendoGrid({
        dataSource: {
            data: catalogData
        },
        schema: {
            model: {
                id: "globalGroupID",
            }
        },

        columns: [
           { field: "globalGroupLevel", title: "globalGroupLevel", hidden: true },
           { field: "globalGroupName", title: "Group Name", width: 350 },
           { field: "isRequired", title: "*", width: 20 },
           { field: "optionName", title: "Option Name" },
           { title: "Description" },
           { title: "Price" }
        ],

        change: function (e) {
            onSelectedRowClick();
        },
        scrollable: true,
        pageable: false,
        selectable: "row",
        height: 500,
        dataBound: function (e) {
            var data = this.dataSource.data();

            $.each(data, function (i, row) {
                if (row.get("globalGroupLevel") == 0) {
                    var element = $('tr[data-uid="' + row.uid + '"] ');
                    element.addClass("colored-row");
// Trying to remove detail indicator when globalGroupID is equal to 0
                    element.removeClass("k-icon k-minus");
                }
            });

        },
        detailInit: detailInit,
        detailExpand: function (e) {
            groupID = this.dataItem(e.masterRow).get("globalGroupID");
        },
    });
}
var groupID;

function detailInit(e) {
    var masterRow = e.masterRow;
    var globalID = e.data.globalGroupID;

    $("<div/>").appendTo(e.detailCell).kendoGrid({
        dataSource: {
            transport: {
                read: URLParams.GetTheGlobalGroupOptions + "?id=" + e.data.globalGroupID + "&sectionid=" + isThereASectionID
            },
        },
        scrollable: false,
        selectable: "row",
        filterable: "row",
        filter: { field: "globalGroupID", operator: "eq", value: e.data.globalGroupID },
        change: function (e) {

            // get detail row
            var detailRow = this.dataItem(this.select());
            var optionName = detailRow.get("OptionName") // Change this stuff to populate into the correct columns
            var optionID = detailRow.get("OptionID");

            $("#CatalogGrid").getKendoGrid().dataItem(masterRow).set("optionName", optionName);

            ShowAndHideGroups(0);

            ProcessGlobalOption(optionID, globalID);

            //ShowAndHideGroups(0);
        },
        columns: [
            { field: "OptionID", title: "Option ID", hidden: true },
            {
                field: "OptionName", title: "Option Name", filterable: {
                    cell: {
                        showOperators: false,
                        operator: "contains"
                    }
                }
            },
            { field: "OptionDescription", title: "Description" },
            { field: "OptionPriceComment", title: "Price" }
        ]
    });
}

[Dimiter Madjarov]

Hello Chris,

You should access the expand arrow and remove/hide it in order to achieve the desired result.
E.g.

element.find(".k-hierarchy-cell a").remove();

Let me know if this was the information that you were looking for.

Regards,
Dimiter Madjarov
Telerik

 

 

[Chris]

Thanks Dimiter,

That worked perfectly, its much appreciated.