Feedback
 
Did this article resolve your question/issue?

   

Your feedback is appreciated.

Please tell us how we can make this article more useful. Please provide us a way to contact you, should we need clarification on the feedback provided or if you need further assistance.

Characters Remaining: 1025

 


Article

Fields: How to remove the checkbox option from root level taxa of the HierarchicalTaxonField control

« Go Back

Information

 
Article Number000099474
EnvironmentProduct: Sitefinity
Version: 10.x, 11.x, 12.x
OS: All supported OS versions
Database: All supported Microsoft SQL Server versions
Question/Problem Description
How to remove the root taxa's checkbox from the tree view of the HierarchicalTaxonField?

Checkboxes enabled
Steps to Reproduce
Clarifying Information
Error Message
Defect/Enhancement Number
Cause
Resolution
In order to achieve this functionality, the HierarchicalTaxonSelector template needs to be modified. The template provides the ability to plug into the RadTreeBinder functions that populate the tree view used by the field control. The function below shows how this is being achieved:
Telerik.Sitefinity.Web.UI.RadTreeBinder.prototype._bindFlatCollection = function (data) {
        data = this.DeserializeData(data);

        if (!this._nodeClickedAdded) {
            var binder = this;
            this._treeView.add_nodeClicking(function (sender, args) {
                binder.invokeClickHandler(binder, sender, args)
            });
            this._nodeClickedAdded = true;
        }

        this._treeView.trackChanges();

        var parentNode = this._getParentNode();

        parentNode.get_nodes().clear();
        var len = data.Items.length;

        if (len > 0 && (data.FoldersContext || data.TaxonomyContext)) {
            var levels = {};
            var hierarchyLevelContext;
            var beginLinkToAdd = null;
            var endLinkToAdd = null;

            var firstItem = data.Items[0];
            var levelKey = firstItem.ParentId != null ? firstItem.ParentId : "00000000-0000-0000-0000-000000000000";

            //check if taxonomy
            levelKey = levelKey == "00000000-0000-0000-0000-000000000000" && firstItem.ParentTaxonId != null ? firstItem.ParentTaxonId : levelKey;

            if (levels[levelKey]) {
                hierarchyLevelContext = levels[levelKey];
            }
            else {
                var context = data.FoldersContext || data.TaxonomyContext;
                hierarchyLevelContext = context.filter(function (obj) {
                    return obj.Key == levelKey;
                })[0];

                if (hierarchyLevelContext) {
                    levels[levelKey] = hierarchyLevelContext.Value;
                    if (levels[levelKey].Skip > 0) {
                        beginLinkToAdd = { key: levelKey, level: levels[levelKey] };
                    }
                    if (levels[levelKey].Take > 0 && (levels[levelKey].Skip + levels[levelKey].Take < levels[levelKey].Total)) {
                        endLinkToAdd = { key: levelKey, level: levels[levelKey] };
                    }
                }
            }
        }

        if (beginLinkToAdd) {
            var textNodeTitle = this._loadMoreText;
            var beginShowMoreNode = this._createTextNode(textNodeTitle, { hierarchyLevelContext: beginLinkToAdd.level, linkType: "begin" }, this._getLoadMoreCss());
            var parentNodeCollection = parentNode.get_nodes();
            parentNodeCollection.add(beginShowMoreNode);
        }

        for (var bc = 0; bc < len; bc++) {
            var dataItem = data.Items[bc];

            this._itemDataBindingHandler(dataItem);

            var parentNodeCollection = parentNode.get_nodes();
            var node = this._createNode(dataItem, bc, data.IsGeneric);
            
            if (node._dataItem.ParentTaxonId == null || node._dataItem.ParentTaxonId == undefined) {
                node.set_checkable(false);
            }            

            parentNodeCollection.add(node);

            var element = node.get_element();
            var key = node.get_value();

            var compoundKey = [];
            compoundKey[this._getItemKeyName()] = key;

            this._raiseItemDomCreated(compoundKey, dataItem, bc, element);
            this._itemDataBoundHandler(compoundKey, dataItem, bc, element);
        }

        if (endLinkToAdd) {
            var textNodeTitle = String.format(this._loadMoreTemplate, this._loadMoreText);
            var nodeText = this._supportsTaxonomyChildPaging ? textNodeTitle : this._loadMoreText;
            var endShowMoreNode = this._createTextNode(nodeText, { hierarchyLevelContext: endLinkToAdd.level, linkType: "end" }, this._getLoadMoreCss());
            var parentNodeCollection = parentNode.get_nodes();
            endShowMoreNode.set_checkable(false);
            parentNodeCollection.add(endShowMoreNode);
        }

        this._treeView.commitChanges();
        this._dataBoundHandler(data);
    }

A working sample has been attached to this article. In order to set it up please use the steps below:
1. Download the CustomHierarchicalTaxonSelector.ascx file and place it in the root of the Sitefinity project
2. Include the file in the project through Visual Studio if needed.
3. Build and run Sitefinity in the browser
4. Go to Administration -> Settings -> Advanced -> Controls -> ViewMap and create a new one
5. Type in the following values:
  • HostType - Telerik.Sitefinity.Taxonomies.Web.UI.Hierarchical.HierarchicalTaxonSelector
  • LayoutTemplatePath - ~/CustomHierarchicalTaxonSelector.ascx

6. Save the change and restart the application pool

After this, the field should look like so:

Checkboxes disabled

Workaround
Notes
Last Modified Date11/8/2019 9:14 AM