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
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
9 Answers, 1 is accepted
0
Accepted
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:
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.
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 |
| { |
| width: 300px; |
| } |
| </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.
0
jonathan
Top achievements
Rank 1
Rank 1
answered on 28 Oct 2008, 09:16 AM
it worked, thanks very much.
0
jonathan
Top achievements
Rank 1
Rank 1
answered on 31 Oct 2008, 12:36 AM
hi,
i would like to ask a follow up question regarding this fix:
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
i would like to ask a follow up question regarding this fix:
| <style type="text/css"> |
| div.RadTreeView .rtEdit .rtIn input |
| { |
| width: 300px; |
| } |
| </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
0
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.
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.
0
jonathan
Top achievements
Rank 1
Rank 1
answered on 31 Oct 2008, 08:14 AM
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
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
0
Coldapoy
Top achievements
Rank 2
Rank 2
answered on 03 Nov 2008, 08:48 AM
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?
using the above function, can i get or set the attribute of the rad input's width?
thanks in advance team telerik..
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..
0
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.
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.
0
jonathan
Top achievements
Rank 1
Rank 1
answered on 04 Nov 2008, 05:47 AM
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
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
0
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.
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.