Client-Side checkboxes within a RadTreeview not decorated

11 posts, 0 answers
  1. Frank
    Frank avatar
    1 posts
    Member since:
    Apr 2009

    Posted 17 Nov 2009 Link to this post

    Hello,

    we've experienced a problem with the formdecorator control when using client-side-scripting.
    If we add new nodes to a radtreeview on the client-side these checkboxes were not decorated.

    For better understanding we have attached an example.
    Could you please help us solving this issue.

    function addNode(parentNode,nodeText,nodeValue,nodeCheckable,nodeChecked)
                    {
                        var treeView= $find("navTree");
                        
                        treeView.trackChanges();
                        
                        //Instantiate a new client node
                        var node = new Telerik.Web.UI.RadTreeNode();
                        //Set its text
                        
                        node.set_text(nodeText);
                        node.set_value(nodeValue);
                        if (!nodeCheckable) { node.set_checkable(nodeCheckable); }
                        if (nodeCheckable && nodeChecked) { node.check() }
                        node.set_postBack(false);
                       
                         //Add the new node as the child of the selected node or the treeview if no node is selected
                        if (!parentNode) {
                            parentNode = treeView.get_selectedNode() || treeView;
                        }
                        parentNode.get_nodes().add(node);
                        
                        //Expand the parent if it is not the treeview
                        if (parentNode != treeView && !parentNode.get_expanded()) {
                            parentNode.set_expanded(true);
                        }
                        treeView.commitChanges();
                        return false;
                    }

  2. Dimitar Milushev
    Admin
    Dimitar Milushev avatar
    555 posts

    Posted 19 Nov 2009 Link to this post

    Hello Frank,

    Unfortunately this scenario is not supported. The FormDecorator cannot detect these new checkboxes and can only decorate content added through postback or AJAX requests.

    Best wishes,
    Dimitar Milushev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Christian Sommer
    Christian Sommer avatar
    19 posts
    Member since:
    Sep 2009

    Posted 19 Nov 2009 Link to this post

    Hello Dimitar,

    is there any way to manipulate any innerHTML to get the Checkbox decorated?

    ... Or is it possible to add a new node with a combination of ajaxRequest and Client-Side-Scripting?
    e. g.: ajaxrequest.GetDecoratedNode(NodeName, NodeValue), etc?

    Do you have any Idea?

    Kind regards

    Christian
  5. Roland
    Roland avatar
    156 posts
    Member since:
    Feb 2009

    Posted 24 Nov 2009 Link to this post

    You can do that manually if you need using javascript.

    In order to achieve this, you would need to take a look how does the decorated checkbox look like and then create similar structure.

    Normal checkbox:
    <input id="CheckBoxList1_0" type="checkbox" checked="checked" name="CheckBoxList1$0"/> 
    <label for="CheckBoxList1_0">Classic</label> 

    Decorated:

    <input id="CheckBoxList1_0" class="rfdRealInput" type="checkbox" checked="checked" name="CheckBoxList1$0" _rfddecoratedid="_rfdSkinnedCheckBoxList1_0"/> 
    <label id="_rfdSkinnedCheckBoxList1_0" class=" rfdCheckboxChecked" for="CheckBoxList1_0">Classic</label> 
     


    So you would only add the css classes and this should work.
  6. Christian Sommer
    Christian Sommer avatar
    19 posts
    Member since:
    Sep 2009

    Posted 25 Nov 2009 Link to this post

    Hello @all,

    with 5 lines of code I can manage the first step - like Roland sugessted.

    var

     

    decoratedCheckbox = '<div class="rtTop"><span class="rtSp"></span><input _rfddecoratedid="_rfdSkinnedRadFormDecorator12345678" id="RadFormDecorator12345678" class="rfdRealInput" type="checkbox"><label class="rfdCheckboxUnchecked" id="_rfdSkinnedRadFormDecorator12345678" unselectable="on" for="RadFormDecorator12345678">&nbsp;</label><span class="rtIn">NODETEXT</span></div>'

     

     

    var undecoratedCheckbox='<div class="rtBot"><span class="rtSp"></span><input class="rtChk" type="checkbox"><span class="rtIn">NODETEXT</span></div>'

     

     

    var tmpdecorated = decoratedCheckbox.replace(/NODETEXT/, CreatedNode.get_text())

     

     

    var tmpundecorated = undecoratedCheckbox.replace(/NODETEXT/, CreatedNode.get_text())

     

     

    CreatedNode.get_element().innerHTML = CreatedNode.get_element().innerHTML.replace(tmpundecorated, tmpdecorated);

    My problem now is, that the checkbox does not change it's skin from unchecket to checked.
    Klicking the mainpulated checkbox fires the "checked-event" and the checked-value is changed.

    Any ideas?

    Thanks.

  7. Roland
    Roland avatar
    156 posts
    Member since:
    Feb 2009

    Posted 25 Nov 2009 Link to this post

    The checkbox will not change its skin by itself. Normally form decorator handles it, but now you need to change css classes yourself by attaching to chekced event.
  8. Christian Sommer
    Christian Sommer avatar
    19 posts
    Member since:
    Sep 2009

    Posted 26 Nov 2009 Link to this post

    Hi Roland,

    you're all right.

    I've already managed that, the same way.
    Actually I do not understand the concept of Formdacorator, because the style of the checkbox is only manageg by the label element.

    But the target is the way.
    We wanted to create a decorated checkbox within the treenode withour reloading the tree.
    And we've done.

    Thank you Roland for your support.

    Best regards.

    Christian
  9. Roland
    Roland avatar
    156 posts
    Member since:
    Feb 2009

    Posted 26 Nov 2009 Link to this post

    I am glad to hear that :)

    Form decorator decorates element using javascript on page load.

    Please mark the post that helped you as answer, so others may find the proper posts faster :)
  10. Christian Sommer
    Christian Sommer avatar
    19 posts
    Member since:
    Sep 2009

    Posted 14 Dec 2009 Link to this post

    double post
  11. Christian Sommer
    Christian Sommer avatar
    19 posts
    Member since:
    Sep 2009

    Posted 14 Dec 2009 Link to this post

    Hello Roland,
    hello  @all,

    unfortunatly we've not yet reached our target.

    Now the checkboxes are decorated, but its not longer possible to select the node,
    or to edit it.

    Select-Property could be set at the click-event, of course, unselect is not that easy, but possible two.

    But how manage edit-mode?

    Is there any convention of setting the id of the new control, 
    that the behavier of the node-text keeps the same than it is bevor manually decorating it?

    Or is there anything else I've to watch out?

    I'm getting this error, if I try to initiate rename:
    Fehler: uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMNSHTMLInputElement.setSelectionRange]"  nsresult: "0x80004005 (NS_ERROR_FAILURE)"  location: "JS frame :: https://service.sommer-gossmann.com/Kundencockpit_Test/ScriptResource.axd?d=bgH1YNsVbihZaG_-ggR0vHR9OzPtyGfTQXOLIuvPrStzqxiSAyhoigzB5-ZFnZeiHk_WjeQxwtZpge73Eh0_hw2&t=ffffffffccc25f5b :: anonymous :: line 477"  data: no]

    Any suggestions, how to solve that?
  12. Christian Sommer
    Christian Sommer avatar
    19 posts
    Member since:
    Sep 2009

    Posted 17 Dec 2009 Link to this post

    Hello,
     
    I've tinkerd a lot of workarounds, now.

    But I respectfully ask telerik to implement a real Formdecorator support for client-scripting.
    Why? Because tha tinkering is nothing I want to do, if I'm using controls for developing.
    Well, I think you'd agree, and so I belive you'll deploy a solution.


    Otherwise,
    You have to manage every case - MouseOver, MouseOut, KeyPressing, Clicking, Checking, and so on.
    That's realy tricky, because If you've created the Input-Tag for editing the node, the other events of the tree are still fireing,
    while you are editing your node. So you have to cancel them.

    There is still a problem in the treeview:
    If I press Enter after renaming, an I don't change the text of the node.
    I get this error.
    Fehler: this._postBackSettings is null
    Quelldatei: http://service.sommer-gossmann.com/Kundencockpit_Test/ScriptResource.axd?d=JGMhylLh0xeGtYU3M7ddA1uLbayPZtWkw4h1gMs13kpj0xTu_r2wNbhA77g_UZl0_nIH8zVh_xnRN-XNGy-3_2Fp9rVtI9tQw_QgWz-d1Io1&t=1b55d91b
    Zeile: 5

    I've I change the text, I can rename as often as I want to.
    But if I press enter whithout changing the value of the input-field, this error accours at least if I do this twice.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017