You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: controls/treeview/application-scenarios/data-binding/tutorial-on-using-databindings-to-create-a-hiearchical-treeview.md
+20-14Lines changed: 20 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -19,37 +19,43 @@ The following tutorial demonstrates how DataBindings can be used to map data ind
1. In a new AJAX-Enabled Web Application, drop a **RadTreeView** onto the default form.
22
+
- In a new AJAX-Enabled Web Application, drop a **RadTreeView** onto the default form.
23
23
24
-
1. Locate the "Database.mdb" Access database in the RadControls for ASP.NET AJAX suiteversion installation directory under \Live Demos\App_Data. The typical path is something like the following: \Telerik\RadControls for ASPNET <currentversion>\Live Demos\App_Data\Database.mdb
24
+
- Locate the "Database.mdb" Access database in the RadControls for ASP.NET AJAX suiteversion installation directory under \Live Demos\App_Data. The typical path is something like the following: \Telerik\RadControls for ASPNET <currentversion>\Live Demos\App_Data\Database.mdb
25
+
26
+
- Drag the "Database.mdb" file to the project in the Solution Explorer.
25
27
26
-
1. Drag the "Database.mdb" file to the project in the Solution Explorer.
1. Open the [Smart Tag]({%slug treeview/design-time/smart-tag%}) and set the **Skin** to **Vista** from the drop down list. Then select **<Newdatasource...>** from the **Choose Data Source** drop down list. *This step will display the Data Source Configuration Wizard.*
30
+
- Open the [Smart Tag]({%slug treeview/design-time/smart-tag%}) and set the **Skin** to **Vista** from the drop down list. Then select **<Newdatasource...>** from the **Choose Data Source** drop down list. *This step will display the Data Source Configuration Wizard.*
1. In the Data Source Configuration Wizard, "Choose a Data Source Type" page, select the **Access Database** icon and click the **OK** button. *This step will display the Configure Data Source Wizard.*
34
+
- In the Data Source Configuration Wizard, "Choose a Data Source Type" page, select the **Access Database** icon and click the **OK** button. *This step will display the Configure Data Source Wizard.*
1. In the "Configure the Select Statement" page of the wizard, choose "Items" from the drop down list. In the Columns area check the "*" to include all columns. Click the **Next** button.
42
+
- In the "Configure the Select Statement" page of the wizard, choose "Items" from the drop down list. In the Columns area check the "*" to include all columns. Click the **Next** button.
1. In the Solution Explorer, drag two icon images files to the project. For the purposes of this example the files are named "folderclosed.ico" and "folderopen.ico".
46
+
- In the Solution Explorer, drag two icon images files to the project. For the purposes of this example the files are named "folderclosed.ico" and "folderopen.ico".
42
47
43
-
1. In the Properties Window set **DataFieldID** to "ItemID" and the **DataFieldParentID** to "ParentID".
48
+
- In the Properties Window set **DataFieldID** to "ItemID" and the **DataFieldParentID** to "ParentID".
44
49
45
-
1. Open the RadTreeView Smart Tag and select the **Edit RadTreeView DataBindings** link. *This step will display the **NavigationItemBinding Collection Editor**
50
+
- Open the RadTreeView Smart Tag and select the **Edit RadTreeView DataBindings** link. *This step will display the **NavigationItemBinding Collection Editor**
46
51
47
-
1. In the **NavigationItemBinding Collection Editor** click the Add button four times to create four **RadTreeNodeBinding** objects. Set the properties for the RadTreeNodeBinding objects in order as follows:
52
+
- In the **NavigationItemBinding Collection Editor** click the Add button four times to create four **RadTreeNodeBinding** objects. Set the properties for the RadTreeNodeBinding objects in order as follows:
@@ -65,6 +71,6 @@ The following tutorial demonstrates how DataBindings can be used to map data ind
65
71
66
72
67
73
68
-
1. Click the OK button to close the **NavigationItemBinding Collection Editor.**
74
+
- Click the OK button to close the **NavigationItemBinding Collection Editor.**
69
75
70
-
1. Press **F5** to run the application. Move the mouse over first and second level nodes to observe the image change. Hover the mouse above the fourth level nodes to observe the size displayed in the tool tip.
76
+
- Press **F5** to run the application. Move the mouse over first and second level nodes to observe the image change. Hover the mouse above the fourth level nodes to observe the size displayed in the tool tip.
Copy file name to clipboardExpand all lines: controls/treeview/application-scenarios/general/setting-additional-properties-to-the-node-in-the-web-service.md
+53-31Lines changed: 53 additions & 31 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -35,26 +35,24 @@ public class RadTreeNodeData : ControlItemData
35
35
}
36
36
````
37
37
38
-
39
-
40
38
So, these are the only properties you can set to the child nodes added from Web Service.
41
39
42
40
Imagine that you need to set a property that is not available in the **RadTreeNodeData** class - e.g. ToolTip. There are two approaches to do this:
43
41
44
42
## First Approach - using a custom class
45
43
46
-
1. Create a class that inherits the **RadTreeNodeData** class and add the **ToolTop** property to it:
47
-
````C#
44
+
- Create a class that inherits the **RadTreeNodeData** class and add the **ToolTop** property to it:
Copy file name to clipboardExpand all lines: controls/treeview/context-menus/tutorial-on-creating-a-context-menu-at-design-time.md
+42-40Lines changed: 42 additions & 40 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,46 +10,48 @@ position: 1
10
10
11
11
# Tutorial on Creating a Context Menu at Design Time
12
12
13
-
14
-
15
-
##
16
-
17
13
The following tutorial demonstrates how to build and attach Context Menus to **RadTreeNodes**. The tutorial also shows how to respond to Context Menu clicks both from the server and client sides.
18
14
19
-
20
-
21
15
22
16
23
-
1. Add a **RadTreeView** control to a new web page.
17
+
- Add a **RadTreeView** control to a new web page.
18
+
19
+
- In the Properties Window, click the **ContextMenus** property ellipses button. *This step will display the RadTreeViewContextMenu Collection Editor dialog.*
24
20
25
-
1. In the Properties Window, click the **ContextMenus**property ellipses button. *This step will display the RadTreeViewContextMenu Collection Editor dialog.*
21
+
- Click the **Add** button to add a new **RadTreeViewContextMenu** item.
26
22
27
-
1. Click the **Add**button to add a new**RadTreeViewContextMenu**item.
23
+
- In the properties window on the right side of the dialog, set the **ID**property to "MyContextMenu". Locate the**Items**property and click the ellipses button. *This step will display the RadContextMenu Item Builder dialog.*
28
24
29
-
1. In the properties window on the right side of the dialog, set the **ID** property to "MyContextMenu". Locate the **Items** property and click the ellipses button. *This step will display the RadContextMenu Item Builder dialog.*
30
25
31
26
32
-
1. In the **RadContextMenuItem Builder** dialog click the **Add Root Item** button twice, select the second item and click the **Add Child Item** button twice.
27
+
- In the **RadContextMenuItem Builder** dialog click the **Add Root Item** button twice, select the second item and click the **Add Child Item** button twice.
28
+
33
29
34
30
35
-
1. Select the first item and set the **Text** property of the two root Items to "Edit" and "Add". Set the **Text** property of "Add" child Items to "Before" and "After". The **RadContextMenu Item Builder** dialog should look something like the screenshot below.
31
+
- Select the first item and set the **Text** property of the two root Items to "Edit" and "Add". Set the **Text** property of "Add" child Items to "Before" and "After". The **RadContextMenu Item Builder** dialog should look something like the screenshot below.
32
+
36
33
37
34
38
-
1. Click **OK** to close the **RadContextMenu Item Builder** dialog.
35
+
- Click **OK** to close the **RadContextMenu Item Builder** dialog.
39
36
40
-
1. Click **OK** to close the **RadTreeViewContextMenu Collection Editor** dialog.
37
+
- Click **OK** to close the **RadTreeViewContextMenu Collection Editor** dialog.
41
38
42
-
1. Open the RadTreeView Smart Tag and click the **Build RadTreeView** link. *This step will open the RadTreeView Item Builder.*
39
+
- Open the RadTreeView Smart Tag and click the **Build RadTreeView** link. *This step will open the RadTreeView Item Builder.*
40
+
41
+
- Click the **Add Root Node** button three times to create three **RadTreeNode** objects. Set the **ContextMenuID** property for all three items to "MyContextMenu".
43
42
44
-
1. Click the **Add Root Node** button three times to create three **RadTreeNode** objects. Set the **ContextMenuID** property for all three items to "MyContextMenu".
45
43
46
44
47
-
1. Click the events button the Properties Window for the RadTreeView. Locate the **ContextMenuItemClick** event and double-click. *This step will create a ContextMenuItemClick event handler and display the code view for it.*
45
+
- Click the events button the Properties Window for the RadTreeView. Locate the **ContextMenuItemClick** event and double-click. *This step will create a ContextMenuItemClick event handler and display the code view for it.*
46
+
48
47
49
48
50
-
1. In the **ContextMenuItemClick** event handler add the code below. *The code here handles the "Add Before" and "Add After" menu items. The "Edit" item will be handled on the client side in the following steps. Also notice the reference to **Telerik.Web.UI** used to support the **RadTreeNode** type.
51
-
````C#
52
-
using System;using Telerik.Web.UI;
49
+
- In the **ContextMenuItemClick** event handler add the code below. *The code here handles the "Add Before" and "Add After" menu items. The "Edit" item will be handled on the client side in the following steps. Also notice the reference to **Telerik.Web.UI** used to support the **RadTreeNode** type.
- In the Properties Window set the **RadTreeView****OnClientContextMenuItemClicking** property to "clientContextMenuItemClicking".
89
92
90
-
1. In the Properties Window set the **RadTreeView****OnClientContextMenuItemClicking**property to "clientContextMenuItemClicking".
93
+
- In the ASP.NET markup for the page add the script code below. This code gets references to the Context Menu Item that was clicked and the Node for that Context Menu Item. If the Menu Item text is "Edit" then the Node is put into editing state. **set_cancel()**is called to prevent the Postback. If you don't prevent the postback the refresh will end the Node editing, subsequently producing the following visual effect: Node opens for editing momentarily, then closes. Finally, the Menu is closed calling its hide() function.
91
94
92
-
1. In the ASP.NET markup for the page add the script code below. This code gets references to the Context Menu Item that was clicked and the Node for that Context Menu Item. If the Menu Item text is "Edit" then the Node is put into editing state. **set_cancel()** is called to prevent the Postback. If you don't prevent the postback the refresh will end the Node editing, subsequently producing the following visual effect: Node opens for editing momentarily, then closes. Finally, the Menu is closed calling its hide() function.
1. Press F5 to run the application. Click the "Add Before" and "Add After" Menu Items. Also notice that clicking the "Edit" Menu Item puts the Node into edit mode and that no postback occurs.
117
+
- Press F5 to run the application. Click the "Add Before" and "Add After" Menu Items. Also notice that clicking the "Edit" Menu Item puts the Node into edit mode and that no postback occurs.
0 commit comments