Node Editing Problem

10 posts, 1 answers
  1. jonathan
    jonathan avatar
    23 posts
    Member since:
    Jun 2008

    Posted 28 Oct 2008 Link to this post

    http://demos.telerik.com/aspnet/prometheus/TreeView/Examples/Functionality/NodeEditing/DefaultCS.aspx

    Hi,

    In the link above; please follow this steps:
    1. Select Cooking Node from Books Node, then click F2.
    2. Place the cursor on the end of text, and type at least 10 letter A.

    Result:
    The Cooking  text disappears. After clicking Enter button. The CookingAAAAAAAAAA appears again.

    Comments:
    Is there a way to set the maximum size of the textbox? such a way it WON'T LOOK LIKE the Cooking text disappeared while editing the node?

    A good example whould be:
    if (node text contains only a single letter) then (you edited it). You want to change it to a sentence, then you'll have a problem going back to the previous words you have typed, because you can't see them.

    Thanks,
    Regards,
    Jonathan
  2. Answer
    Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 28 Oct 2008 Link to this post

    Hi jonathan,

    You can set the width of the input element when you edit a node by adding these lines in the <head> section of the page:

    <style type="text/css"
    div.RadTreeView .rtEdit .rtIn input 
        width300px
    </style> 

    I hope this helps.

    All the best,
    Veselin Vasilev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. jonathan
    jonathan avatar
    23 posts
    Member since:
    Jun 2008

    Posted 28 Oct 2008 Link to this post

    it worked, thanks very much.
  4. jonathan
    jonathan avatar
    23 posts
    Member since:
    Jun 2008

    Posted 30 Oct 2008 Link to this post

    hi,

    i would like to ask a follow up question regarding this fix:
    <style type="text/css"
    div.RadTreeView .rtEdit .rtIn input 
        width300px
    </style> 

    Is it possible that the width will not always be 300px?
    meaning, when i'm expanding my tree, the width of each node is shortend, so that each level of the treeview has different width?

    thanks,
    regards,
    jonathan
  5. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 31 Oct 2008 Link to this post

    Hi jonathan,

    I am afraid this is not possible with the current implementation of RadTreeView.

    We plan to add an event in the future version of the control which will fire just before the edit textbox appears on the screen, and you will be able to change its properties. I cannot tell you a timeframe for this, but I hope it will be ready for the SP1 of the Q3 release.

    Greetings,
    Veselin Vasilev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. jonathan
    jonathan avatar
    23 posts
    Member since:
    Jun 2008

    Posted 31 Oct 2008 Link to this post

    hi Veselin,

    is it possible to change the property of the node, before the user is able to edit? lets say OnClientNodeClicked or any other events?

    i have a follow up question, is it possible to know the level of the node OnClientNodeClicked? so that when i add a style it will be based on the node level?

    thanks,
    regards,
    jonathan
  7. Coldapoy
    Coldapoy avatar
    34 posts
    Member since:
    Jul 2008

    Posted 03 Nov 2008 Link to this post

    hi telerik team,

    is there any work around as for now? like... dynamically change the width of the rad input inside the rad treeview node?

    function getCustomAttributes() 
       var tree = $find("<%= RadTreeView1.ClientID %>");        
       var node = tree.get_selectedNode(); 
       if(node) 
       { 
          var attributes = node.get_attributes(); 
          attributes.setAttribute("AttributeName", AttributeValue); 
          var attribute1 = attributes.getAttribute("AttributeName"); 
           
       } 
    }
     
    using the above function, can i get or set the attribute of the rad input's width?

    thanks in advance team telerik..
  8. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 03 Nov 2008 Link to this post

    Hi jonathan,

    You can use the get_level() method of the node to retrieve its level. But in onClientNodeClicked event you cannot change any property relevant to the editing of the node.

    Regards,
    Veselin Vasilev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  9. jonathan
    jonathan avatar
    23 posts
    Member since:
    Jun 2008

    Posted 03 Nov 2008 Link to this post

    hi Veselin Vasilev,

    i was able to fix this by creating many styles like this:
    <style type="text/css">
     div.RadTreeView .rtEdit .node0 input {  width: 300px; }
     div.RadTreeView .rtEdit .node1 input {  width: 200px; }
     div.RadTreeView .rtEdit .node2 input {  width: 100px; }
    </style>

    and assigning each node with different class through for loop on the CS file.
    Note:
    1. the code above is just a sample and not from my code
    2. the sample code is able to fix width of the root and 2 level node on the radTreeView
    3. and if the user adds extra nodes or expands the treeview, there'll be a problem with the width of the input of the level 3 nodes.

    can you suggest any implementation that would automatically add another style when the treeview is expanded and the node.Level becomes 3.

    thanks,
    regards,
    jonathan
  10. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 07 Nov 2008 Link to this post

    Hi Jonathan,

    A better approach would be to resize the input box dynamically, as the user types (this is a common ux pattern).

    The following script demonstrates the approach, using jQuery (which has been included in the latest Telerik.Web.UI release):

    $.extend ({
                textWidth: function(text) {
                    if (!$.textWidth.dummySizer) {
                        $.textWidth.dummySizer =
                            $('<span>' + text + '</span>')
                                .css({
                                    position: 'absolute',
                                    top: '-40px',
                                    left: '-3000px',
                                    font: '9px Verdana,sans-serif' /* the font of the used in the treeview */
                                })
                                .appendTo(document.body);
                    }
                    else {
                        $.textWidth.dummySizer.text(text);
                    }

                    return $.textWidth.dummySizer.width();
                }
            });

    $('.RadTreeView input').keyup(function(event) {
                        var input = $(this);
                        input.width ($.textWidth(input.val()));
                    });

    Regards,
    Alex
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Back to Top