This is a migrated thread and some comments may be shown as answers.

RadTreeview

8 Answers 133 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Srikrishna
Top achievements
Rank 1
Srikrishna asked on 03 Feb 2014, 03:21 PM
I have a treeview and I have enabled the checkbox next to each node. The problem I am facing - is with multi select . Users dont want the 'Multiselect' feature. For example , if you select USA (parent)  user should only be able to selct One State e.g TEXAS and not more than that. If he wants to select NEW York then the previous selection TEXAS should be unchecked and New York should be checked.

I am using the following in my ASPX. I see that multiselect= true / false is working only when the user clicks the 'NODE' (I mean on the text e.g TEXAS) .. But in my case I have checkbox next to each node .. I mean checkbox next to TEXAS , NEWYORK.... I am not able to restrict users from checking multiple checkboxs in the same level. I mean users are able to select TEXAS and New york checkboxes irrespective of multiselect= true / false settings.

I am using webservice ondemand load feature to load the XML (I am using a physcial XML file)

Please provide me an example , how to do it . If not atleast provide me an sample how to highlight LAST selected NODE.

                                <telerik:RadTreeView ID="RadTreeView1" runat="server" Width="100%" Height="475px"
                                                     OnNodeCheck="RadTreeView1_NodeCheck"
                                                     PersistLoadOnDemandNodes="true" LoadingStatusPosition="BelowNodeText"
                                                     OnClientNodeChecked="CheckboxChecked"
                                                     OnClientNodeCollapsed="nodeCollapsed"
                                                     CheckBoxes="true" TriStateCheckBoxes="true" MultipleSelect="false" OnClientMouseOver="onMouseOver" style="white-space:normal;" >
                                                     <ExpandAnimation Type="none"></ExpandAnimation>
                                                     <CollapseAnimation Type="none"></CollapseAnimation>
                                                     <WebServiceSettings Path="NodeWebService.asmx" Method="GetTreeViewNodes">
                                                     </WebServiceSettings>
                                                     <Nodes>
                                                        <telerik:RadTreeNode Text="Pipeline" Value="Pipeline" ExpandMode="WebService">
                                                        </telerik:RadTreeNode>
                                                     </Nodes>
                                </telerik:RadTreeView>

Thanks
Sri

8 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 04 Feb 2014, 05:45 AM
Hi Srikrishna,

You can handle the OnClientNodeChecking event of RadTreeView to achieve your scenario. Please have a look into the following JavaScript.

JavaScript:
<script type="text/javascript">
    function OnClientNodeChecking1(sender, args) {
        if (args.get_node().get_checked() == false) {
            if (sender.get_checkedNodes().length > 0)
                args.set_cancel(true);
        }
    }
</script>

Let me know if you have any concern.
Thanks,
shinu.
0
Srikrishna
Top achievements
Rank 1
answered on 04 Feb 2014, 01:52 PM
Hi Shinu,
   Thank you for the reply. I tried , I facing the following issue with the above fix 
   I was able to select 'texas' then it never allowed me to select 'New york' . I would like to the user to have an option to select 'new york' but in the mean time 'texas' should get unchecked (fyi , texas , new york are in same levels ).

   With your fix , it is not allowing the user to change the selection .
   
   Please let me know , if you have any suggestions

Thanks
Sri
0
Shinu
Top achievements
Rank 2
answered on 05 Feb 2014, 03:25 AM
Hi Srikrishna,

Please try the following JavaScript which works fine at my end.

JavaScript:
<script type="text/javascript">
    function OnClientNodeChecking1(sender, args) {
        if (args.get_node().get_checked() == false) {
            if (sender.get_checkedNodes().length > 0)
                for (var i = 0; i < sender.get_checkedNodes().length; i++) {
                    if (sender.get_checkedNodes()[i].get_level()== args.get_node().get_level())
                        sender.get_checkedNodes()[i].uncheck();
                }
        }
    }
</script>

Thanks,
Shinu.
0
Srikrishna
Top achievements
Rank 1
answered on 05 Feb 2014, 01:05 PM
Shinu,
   It worked awesome... really really a very big thanks . I struggled with this for couple of weeks with very basic JS skills, you made my day.
   If you have time , could you let me know - how to highlight the Selected Nodes with some background color ? . I mean Background color for the all checked Nodes... in this case it would be highlighting 'USA' (Country) and 'Texas' (state).

Thanks
Sri
0
Shinu
Top achievements
Rank 2
answered on 06 Feb 2014, 03:50 AM
Hi Srikishna,

Please have a look into the following code snippet to set the background color for the checked nodes.

CSS:
<style type="text/css">
    .Check
    {
        background-color: Red !important;
    }
    .UnCheck
    {
        background-color: White !important;
    }
</style>

JavaScript:
<script type="text/javascript">
    function OnClientNodeChecking1(sender, args) {
        args.get_node().set_cssClass("Check");
        if (args.get_node().get_checked() == false) {
            if (sender.get_checkedNodes().length > 0)
                for (var i = 0; i < sender.get_checkedNodes().length; i++) {
                    if (sender.get_checkedNodes()[i].get_level() == args.get_node().get_level()) {
                        sender.get_checkedNodes()[i].set_cssClass("UnCheck");
                        sender.get_checkedNodes()[i].uncheck();
                    }
                }
        }
    }
</script>

Thanks,
Shinu.
0
Srikrishna
Top achievements
Rank 1
answered on 06 Feb 2014, 03:27 PM
Shinu.
   Thank you for the input. This is what happening, If I try to use this - when I change the selection from 'Texas' to 'New york' - for a moment (may be for a second)  it highlights Texas Node with 'White' and turns to normal color (which is very good) but doesnt highlight 'New York' (because code doesnt call check css).

   But when user clicks 'New York' , I would like to highlight 'New York - including its parents' with some color example 'Red' and what to keep it highlighted for ever untill user changes the state again to 'texas'.
   If this not possible , i would prefer to get 'new york' & 'its parents' get highligted with 'red' for atleast a second as Uncheck behavior.

   I tried something , but it was highlighting all 'new yorks' parent nodes but not the 'new york' for a second. I have pasted my code , help me when you find time

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="CPHHeader">
    <style type="text/css">
        .Check
        {
            background-color: Red !important;
        }
        .UnCheck
        {
            background-color: White !important;
        }
    </style>
</asp:Content>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" OnAjaxRequest="RadAjaxManager1_AjaxRequest" >
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ClickedNodeLabel"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadCodeBlock ID="cb1" runat="server">
        <script type="text/javascript">
            function AjaxRequestButton(arguments) {
                var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
                ajaxManager.ajaxRequestWithTarget('<%= ClickedNodeLabel.UniqueID %>', '');
            }
        </script>
    </telerik:RadCodeBlock>
   
    <telerik:RadScriptBlock runat="Server" ID="RadScriptBlock1">
        <script type="text/javascript">
            function OnClientNodeChecking1(sender, args) {
                if (args.get_node().get_checked() == false) {
                    if (sender.get_checkedNodes().length > 0) {
                        for (var i = 0; i < sender.get_checkedNodes().length; i++) {
                            if (sender.get_checkedNodes()[i].get_level() == args.get_node().get_level()) {
                                sender.get_checkedNodes()[i].set_cssClass("UnCheck");
                                sender.get_checkedNodes()[i].uncheck();
                            }
                            else {
                                sender.get_checkedNodes()[i].set_cssClass("Check");  --This is highlighting all the Newyork parents for a second but not the New york
                            }
                        }
                    }
                }
            }
            function onMouseOver(sender, e) {
                var node = e.get_node();
                node.onmouseover = null;
            }
            function nodeCollapsed(sender, args) {
                //Clear the nodes populated on demand
                resetNode(args.get_node());
                setTimeout(function () {
                    //break your function into smaller pieces that can be called separately.
                }, 5);
            }
            function resetNode(node) {
                node.get_nodes().clear();
                node.set_expandMode(Telerik.Web.UI.TreeNodeExpandMode.WebService);
            }
            function CheckboxChecked(sender, args) {
                var childNodes = args.get_node().get_nodes();
                var isChecked = args.get_node().get_checked();
                UpdateAllChildren(childNodes, isChecked);
                var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
                //Send an Ajax request containing the JSON representation of the clicked node. The AjaxRequest will be fired in codebehind.
                ajaxManager.ajaxRequest(args.get_node().toJsonString());
            }
            function UpdateAllChildren(nodes, checked) {
                var i;
                var test;
                for (i = 0; i < nodes.get_count(); i++) {
                    if (checked) {
                        nodes.getNode(i).check();
                    }
                    else {
                        nodes.getNode(i).set_checked(false);
                    }
                    if (nodes.getNode(i).get_nodes().get_count() > 0) {
                        UpdateAllChildren(nodes.getNode(i).get_nodes(), checked);
                    }
                }
            }
            function clientNodeChecked(sender, eventArgs) {
                var childNodes = eventArgs.get_node().get_nodes();
                var isChecked = eventArgs.get_node().get_checked();
                UpdateAllChildren(childNodes, isChecked);
            }
        </script>
    </telerik:RadScriptBlock>
Thanks
Sri

Thanks
Sri
0
Shinu
Top achievements
Rank 2
answered on 07 Feb 2014, 04:06 AM
Hi SriKrishna,

Please have a look into the sample code snippet which works fine at my end.

ASPX:
<telerik:RadTreeView ID="RadTreeView1" runat="server" CheckBoxes="true" OnClientNodeChecking="OnClientNodeChecking1">
    <Nodes>
        <telerik:RadTreeNode Text="Node1">
            <Nodes>
                <telerik:RadTreeNode Text="Node1.1">
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Node1.2">
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeNode>
        <telerik:RadTreeNode Text="Node2">
            <Nodes>
                <telerik:RadTreeNode Text="Node2.1">
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Node2.2">
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeNode>
    </Nodes>
</telerik:RadTreeView>

JavaScript:
<script type="text/javascript">
    function OnClientNodeChecking1(sender, args) {
        if (args.get_node()._getChildren().get_count() == 0) {
            var node = args.get_node().get_parent().get_text();
            sender.findNodeByText(node).set_cssClass("Check")
        }
        args.get_node().set_cssClass("Check");
        if (args.get_node().get_checked() == false) {
            if (sender.get_checkedNodes().length > 0)
                for (var i = 0; i < sender.get_checkedNodes().length; i++) {
                    if (sender.get_checkedNodes()[i].get_level() == args.get_node().get_level()) {
                        sender.get_checkedNodes()[i].set_cssClass("UnCheck");
                        sender.get_checkedNodes()[i].uncheck();
                    }
                }
        }
    }
</script>

CSS:
<style type="text/css">
    .Check
    {
        background-color: Red !important;
    }
    .UnCheck
    {
        background-color: White !important;
    }
</style>

Thanks,
Shinu.
0
Srikrishna
Top achievements
Rank 1
answered on 07 Feb 2014, 11:48 PM
Shinu,
  This one worked . It did highlight Texas , its parent USA but not grand parents ...
   But this is more than what I expected , when I posted this thread. 

  Thank you for your timely and great help. Have a nice day

Thanks
Sri
Tags
TreeView
Asked by
Srikrishna
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Srikrishna
Top achievements
Rank 1
Share this question
or