RadTreeview

9 posts, 0 answers
  1. Srikrishna
    Srikrishna avatar
    5 posts
    Member since:
    Sep 2013

    Posted 03 Feb 2014 Link to this post

    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
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 03 Feb 2014 in reply to Srikrishna Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Srikrishna
    Srikrishna avatar
    5 posts
    Member since:
    Sep 2013

    Posted 04 Feb 2014 in reply to Shinu Link to this post

    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
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 04 Feb 2014 in reply to Srikrishna Link to this post

    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.
  6. Srikrishna
    Srikrishna avatar
    5 posts
    Member since:
    Sep 2013

    Posted 05 Feb 2014 Link to this post

    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
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 05 Feb 2014 in reply to Srikrishna Link to this post

    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.
  8. Srikrishna
    Srikrishna avatar
    5 posts
    Member since:
    Sep 2013

    Posted 06 Feb 2014 in reply to Shinu Link to this post

    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
  9. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 06 Feb 2014 in reply to Srikrishna Link to this post

    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.
  10. Srikrishna
    Srikrishna avatar
    5 posts
    Member since:
    Sep 2013

    Posted 07 Feb 2014 in reply to Shinu Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017