Since I can't apply a node template client side I'm modifying the content element of each node as it's loaded. It's working well, but I'm having a bit of trouble getting the loading indicator to lay out right. I need it to appear BelowNodeText, but but since it appears so fast I'm not sure where it's being created so I can't style it correctly.
Right now what I'm doing is taking the content element, removing the text element (rtIn) and placing them in a table in the form of [content element | text element | additional column] which I put back in place of the content element. (the reason for splitting out the text element is that the css property text-overflow:ellipsis; doesn't work correctly if i leave the content element whole, I think due to the way the browser is calculating table size)
It seems like loading indicator is part of the text element? Is that correct? Is there a style applied to the loading indicator? Any information about it would be helpful.
Right now what I'm doing is taking the content element, removing the text element (rtIn) and placing them in a table in the form of [content element | text element | additional column] which I put back in place of the content element. (the reason for splitting out the text element is that the css property text-overflow:ellipsis; doesn't work correctly if i leave the content element whole, I think due to the way the browser is calculating table size)
It seems like loading indicator is part of the text element? Is that correct? Is there a style applied to the loading indicator? Any information about it would be helpful.
1 Answer, 1 is accepted
0
Hello Nick,
You can easily experiment with the loading indicator by "slowing down" the NodeExpand event handler. Putting "Thread.Sleep(1000)" should create a visible delay. Anyway here is the JavaScript routine which creates the loading indicator:
I think it will best answer your question. By the way you can use that method to programmatically show the loading status for a specific node. You can then hide it using "hideLoadingStatus" method. Here is a quick example:
$find("RadTreeView1").get_nodes().getNode(0).showLoadingStatus("Loading...", Telerik.Web.UI.TreeViewLoadingStatusPosition.AfterNodeText); //you can pass some html instead of "Loading..."
$find("RadTreeView1").get_nodes().getNode(0).hideLoadingStatus();
I hope this helps,
Albert
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
You can easily experiment with the loading indicator by "slowing down" the NodeExpand event handler. Putting "Thread.Sleep(1000)" should create a visible delay. Anyway here is the JavaScript routine which creates the loading indicator:
| showLoadingStatus : function (text, position) |
| { |
| this._loadingStatusElement = document.createElement("span"); |
| if (position == Telerik.Web.UI.TreeViewLoadingStatusPosition.BeforeNodeText) |
| { |
| this._loadingStatusElement.className = "rtLoadingBefore"; |
| this.get_textElement().insertBefore(this._loadingStatusElement, |
| this.get_textElement().firstChild); |
| } |
| else if (position == Telerik.Web.UI.TreeViewLoadingStatusPosition.AfterNodeText) |
| { |
| this._loadingStatusElement.className = "rtLoadingAfter"; |
| this.get_textElement().appendChild(this._loadingStatusElement); |
| }else if (position == Telerik.Web.UI.TreeViewLoadingStatusPosition.BelowNodeText) |
| { |
| this._loadingStatusElement.className = "rtLoadingBelow"; |
| this.get_textElement().appendChild(this._loadingStatusElement); |
| } |
| this._loadingStatusElement.innerHTML = text; |
| } |
I think it will best answer your question. By the way you can use that method to programmatically show the loading status for a specific node. You can then hide it using "hideLoadingStatus" method. Here is a quick example:
$find("RadTreeView1").get_nodes().getNode(0).showLoadingStatus("Loading...", Telerik.Web.UI.TreeViewLoadingStatusPosition.AfterNodeText); //you can pass some html instead of "Loading..."
$find("RadTreeView1").get_nodes().getNode(0).hideLoadingStatus();
I hope this helps,
Albert
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center