Getting Template Text of a Node ?

[Joel Kraft]

Hello,

I am working with a RadTreeView using a node template. It is databound against a datatable.

<TELERIK:RadTreeView ID="tvOrgChart" runat="server"
    DataValueField="staffmemberid" DataTextField="title" DataFieldID="staffmemberid" DataFieldParentID="supervisor">
    <NodeTemplate>
        <strong><%# Eval("casualname") %>,</strong> <em><%# Eval("title") %></em> <small>[<%# Eval("staffclassname") %>]</small>
    </NodeTemplate>
</TELERIK:RadTreeView>

 

My initial question was supposed to be how can I enable editing on this tree so that only the "title" attribute is edited. It turns out that by adding DataTextField="title", that this functionality is built in!! Pretty cool!

But I do have a problem. When the edit is complete, the node still displays the original text of the template, without any of the updates to the title field. There is a great Outlook-like example showing how to implement ClientNodeEditStart and ClientNodeEdited to restore a message counter after a rename.I attempted to use this pattern.

I want to get the original displayed text, save it, and, after the edit, replace the old title with the new title. Here is the problem... in the ClientNodeEditStart event, the .get_text() does not actually return the text that is displayed on the node! With DataTextField defined, it returns the value of the specified column. Without a text value defined, it returns "System.Data.DataRowView".

How can I get the HTML that is displayed by the node??

Joel

[Joel Kraft]

I have since figured out that I can use node.get_contentElement.innerHTML to the entire HTML of the list item... it's not exactly what I want, but it's closer.

Here is the issue now... although the framework actually automatically changes my template value to reflect my edit (another pleasant surprise), that the value is lost on postback. When the postback occurs to call OnNodeEdit, the information that is returned contains the value of the template with the value from before the update... and therefore overwrites the correct value that the client had prepared.

So I'd like to restore it... I tried saving it (the value is correct in savetext) and restoring afterward:

function NodeEdited(sender, args)
{
    var node = args.get_node();
    var savetext = node.get_contentElement().innerHTML;
    sender.trackChanges();
    node.set_text(node.get_text());
    sender.commitChanges();
    node.get_contentElement().innerHTML = savetext;
}

 

But this is apparently too soon, because the value still gets overwritten. So I tried to build in a little delay... but this also doesn't work. The postback must redo the tree enough that none of the references are correct anymore.

TypeError: savetree.findNodeByValue(...).get_contentElement(...) is null

function NodeEdited(sender, args)
{
    var node = args.get_node();
    var savetext = node.get_contentElement().innerHTML;
    var saveval = node.get_value();
    var savetree = node.get_treeView();
    setTimeout(function () { savetree.findNodeByValue(saveval).get_contentElement().innerHTML = savetext }, 500);
}

 

So now I need to figure out one of these:

1. How can I change the HTML of the node on the client after the AJAX postabck?
2. How can I change the HTML of the node on the server side, so the postback returns the updated value? I can change the text, but not the value.

Joel

[Joel Kraft]

Well I figured out a way to do it on the server that isn't clean, but gets me past my problem for the moment:

args.Node.Controls[0].As<DataBoundLiteralControl>().SetDataBoundString(1, args.Text);

 

Basically the first control in a nodes control collection is a DataBoundLiteralControl object that contains the bits for creating the template text. You can use the for-internal-framework-use-only SetDataBoundString function to change the various parts of it. This is hugely fragile, but it did let me update just the chunk I wanted.

Still curious what the "right" way to do it on the server and client are...