Disable or removed Check box on certain nodes

[Rick Thompson]

Turning on Checkboxes is easy with the TreeView control (<object>.ShowCheckbox(true)) but is it possible to remove the checkbox or disable the checkbox on certain nodes?

For example I show a typical hierarchy and certain nodes the user can check to have information printed, others should not be printed and therefore a checkbox should not be available or, minimally, be disabled.

Thanks,

Rick

[Harikrishnan P]

Hi Rick,

Thanks for using Syncfusion products.

Currently in our Treeview component we do not have inbuilt option to achieve your requirement (Remove checkbox from certain nodes). But we can achieve your requirement from the following workaround solution.

Specify a unique class to the tree nodes in which checkboxes has to be removed. We can specify a class to the tree nodes using the property “htmlAttributes”. This property is used to set html attributes to the “li” element of the corresponding tree node. To use the “htmlAttributes” property lease refer below,

Using IDictionary pair specify the attributes that you want to add to the treenode. The specified attributes will be added to the corresponding “li” element.

 

@*Specify the attributes that you want to add to the "li" of the treenode in a IDictionary*@

 

@{IDictionary<string, object> parameters = new Dictionary<string, object>();

  parameters.Add("class", "removeCheck");

}

 

 

While initializing the items (tree nodes) of treeview, specify the object of IDictionary in HtmlAttributes field as shown below,

                   

        items.Add().Text("File").Children(child =>

                    {

                        child.Add().Text("New");

                        child.Add().Text("Open");

                        child.Add().Text("Save").HtmlAttributes(parameters);

                        child.Add().Text("Save As");

                        child.Add().Text("Print Preview");

                        child.Add().Text("Print");

                        child.Add().Text("Close");

                    });

 

 

Note: This “htmlAttribute” property will work in our latest version (12.2.0.42) before this version it will not work.

In the document.ready function find the elements with the specified class (here “removeCheck”). From the obtained “li” elements find the corresponding “span” elements (checkbox) associated with it and remove it. Please refer below.

 

<script>

    var treeobj, removeCheckbox, removeElement;

    $(function () {

        //Object for Treeview created

        treeobj = $("#tree").data("ejTreeView");

        //Find all the "li" elements in which the checkbox has to be removed based on the specified class

        removeCheckbox = $(treeobj.element).find(".removeCheck");

        //"each" function to remove the checkbox from each elements obtained

        removeCheckbox.each(function (i, val) {

            //For each "li" element find the span(checkbox) and remove it.

            removeElement = $(removeCheckbox[i]).find(".e-chkbox-wrap").first();

            if (!ej.isNullOrUndefined(removeElement) && removeElement.length != 0)

                //Checkbox removed using JQuery "remove".

                $(removeElement).remove();

        });

    });

script>

 

 

For your convenience, we have attached a sample in the following location to showcase your requirement.

Sample Location: Treeview Sample

Please get back to us if you would require any further assistance.

Regards,

HariKrishnan

[Dave Lewis]

Is there a way to use this same functionality of only showing checkboxes for certain nodes with ASP.NET Core, instead of ASP.NET MVC?

[Karthik Ravichandran]

Hi Dave, 

 

Thanks for contacting syncfusion support. 

 

We have checked your query.you can achieve your requirement by using the html-attribute API in Treeview Fields. Please refer the below code block. 

 

[controller] 

 

Dictionary<string, object> htmlattr = new Dictionary<string, object>(); 

htmlattr.Add("class", "chkbxdisable"); 

 

localData.Add(new TreeViewData { id = 1, name = "Discover Music", hasChild = true, expanded = true, htmlAttribute = htmlattr }); 

 

[csHtml] 

 

<ej-tree-view id="tree" show-checkbox="true" create="onTreeCreate"> 

    <e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid"     text="name" has-child="hasChild" expanded="expanded" html-attribute="htmlAttribute"></e-tree-view-fields> 

</ej-tree-view> 

 

 

[script] 

 

function onTreeCreate() { 

    //Object for Treeview created 

    treeobj = $("#tree").data("ejTreeView"); 

    removeCheckbox = $(treeobj.element).find(".chkbxdisable"); 

    removeCheckbox.each(function (i, val) { 

        removeElement = $(removeCheckbox[i]).find(".e-chkbox-wrap").first(); 

        if (!ej.isNullOrUndefined(removeElement) && removeElement.length != 0) 

            $(removeElement).remove(); 

    }); 

} 

 

 

For your convenience, we have prepared the sample and attached in the below link, 

 

Sample 

 

Please let us know if you need further assistance on this. 

 

Regards, 

Karthik R