How to hide detail indicator based on a rows ID?

3 posts, 0 answers
  1. Chris
    Chris avatar
    19 posts
    Member since:
    Feb 2016

    Posted 07 Feb 2016 Link to this post

    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" }
            ]
        });
    }
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 09 Feb 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Chris
    Chris avatar
    19 posts
    Member since:
    Feb 2016

    Posted 09 Feb 2016 in reply to Dimiter Madjarov Link to this post

    Thanks Dimiter,

    That worked perfectly, its much appreciated. 

Back to Top