Client-Side checkboxes within a RadTreeview not decorated

[Frank]

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;
                }

[Dimitar Milushev]

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.

[Christian Sommer]

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

[Roland]

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.

[Christian Sommer]

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.

[Roland]

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.

[Christian Sommer]

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

[Roland]

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 :)

[Christian Sommer]

double post

[Christian Sommer]

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?

[Christian Sommer]

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.