We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Disable or removed Check box on certain nodes

Thread ID:

Created:

Updated:

Platform:

Replies:

117332 Sep 29,2014 03:02 PM UTC Sep 12,2017 12:04 PM UTC ASP.NET MVC 3
loading
Tags: TreeView
Rick Thompson
Asked On September 29, 2014 03:02 PM UTC

Turning on Checkboxes is easy with the TreeView control (.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 [Syncfusion]
Replied On September 30, 2014 12:46 PM UTC

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
Replied On September 11, 2017 06:28 PM UTC

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 [Syncfusion]
Replied On September 12, 2017 12:04 PM UTC

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, 
 
 
Please let us know if you need further assistance on this. 
 
Regards, 
Karthik R

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;