Skip to content

Commit 00d767b

Browse files
committed
Fix tables and examples in PanelBar's client-side objects articles
1 parent 3d48906 commit 00d767b

File tree

3 files changed

+118
-190
lines changed

3 files changed

+118
-190
lines changed

controls/panelbar/client-side-programming/radpanelbar-object.md

Lines changed: 33 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,37 @@ The following table lists the most important methods of the **RadPanelBar** clie
1919

2020
>caption  
2121
22-
| **Name** | **Parameters** | **Return Type** | **Description** |
22+
| Name | Parameters | Return Type | Description |
2323
| ------ | ------ | ------ | ------ |
24-
| **trackChanges** |none|none|Begins tracking changes to the panel items. Only changes to the items that occur between a call to **trackChanges** and **commitChanges** persist after a postback.|
25-
| **commitChanges** |none|none|Ends tracking changes to the panel items. Only changes to the items that occur between a call to **trackChanges** and **commitChanges** persist after a postback.|
24+
| **trackChanges** |none|none|Begins tracking changes to the panel items. Only changes to the items that occur between a call to **trackChanges** and **commitChanges** persist after a postback. See **Example 1**. |
25+
| **commitChanges** |none|none|Ends tracking changes to the panel items. Only changes to the items that occur between a call to **trackChanges** and **commitChanges** persist after a postback. Client side changes are available on the server side after postback. You can use the [ClientChanges]({%slug panelbar/client-side-programming/accessing-client-changes-on-the-server%}) property to access them. See **Example 1**. |
26+
| **disable** | none | none | Disables all items in the panel. Clicking on any item has no effect, child items cannot be opened. See **Example 2**. |
27+
| **enable** | none | none | Enables all items in the panel. |
28+
| **get_enabled** | none | boolean | True if the panel is enabled. To enable a panel, use the enable() method.|
29+
| **findItemByValue** |(string value)|[RadPanelItem]({%slug panelbar/client-side-programming/radpanelitem-object%})|Returns the first **RadPanelBarItem** object whose **Value** property is equal to the passed parameter.|
30+
| **findItemByText** |(string text)|[RadPanelItem]({%slug panelbar/client-side-programming/radpanelitem-object%})|Returns the first **RadPanelBarItem** object whose **Text** property is equal to the passed parameter.|
31+
| **findItemByUrl** |(string URL)|[RadPanelItem]({%slug panelbar/client-side-programming/radpanelitem-object%})|Returns the first **RadPanelBarItem** object whose **NavigateUrl** property is equal to the passed parameter.|
32+
| **findItemByAbsoluteUrl** |(string URL)|[RadPanelItem]({%slug panelbar/client-side-programming/radpanelitem-object%})|Returns the first **RadPanelBarItem** object whose **NavigateUrl** property is equal to the passed parameter. Note that the parameter should end with '/' like:var item = sender.findItemByAbsoluteUrl('http://www.test.com/');|
33+
| **findItemByAttribute** |(string attributeName, string value)|[RadPanelItem]({%slug panelbar/client-side-programming/radpanelitem-object%})|Returns the first **RadPanelBarItem** object with a custom attribute of the specified name that has the specified value.|
34+
| **get_items** |none|[RadPanelItemCollection]({%slug panelbar/client-side-programming/radpanelitemcollection-object%})|Returns the collection of root level items. See **Example 3**. |
35+
| **get_allItems** | none | Array | Gets a linear collection of all items. This includes all root and child items in the panel. See **Example 4**. |
36+
| **get_focusedItem** | none | [RadPanelItem]({%slug panelbar/client-side-programming/radpanelitem-object%}) | Returns the focused root level item. Null if no root level item has focus. |
37+
| **get_expandedItem** |none|[RadPanelItem]({%slug panelbar/client-side-programming/radpanelitem-object%})|Returns the last root level item that was expanded. Null if no root level items are expanded.|
38+
| **get_expandedItems** |none|Array|Returns an array of the **RadPanelBarItem** objects for every expanded item in the panel bar (including expanded child items).|
39+
| **get_selectedItem** |none|[RadPanelItem]({%slug panelbar/client-side-programming/radpanelitem-object%})|Returns the selected item if it exists. (It does not have to be a root level item). Null if the panel does not have a selected item.|
40+
| **get_selectedItems** |none|Array|Returns an array containing the selected items in the panel. Because the panel bar does not allow more than one item to be selected, the array always has 0 or 1 elements.|
41+
| **get_attributes** |none|Collection|Returns the collection of custom attributes for the panel.|
42+
| **get_element** |none|HTML Element|Gets the DOM element for the panel. See **Example 5**. |
43+
| **get_childListElement** | none | HTML Element | Gets the DOM element for the list of items in the panel. |
44+
| **enableEvents** |none|none|Enables the panel bar's client-side event emitting. Events are enabled by default.|
45+
| **disableEvents** |none|none|Disables the panel bar's client-side event emitting.|
46+
| **add_`<EventName>`** |(mixed eventHandler)|none|Attaches an eventHandler to the event with the name `<EventName>`. Note that client-side event names differ from their server-side counterparts. For more information, see [Client-Side Events]({%slug panelbar/client-side-programming/events%}). See **Example 6**. |
47+
| **remove_`<EventName>`** | (mixed eventHandler) | Boolean | Detaches an eventHandler from the event with the name `<EventName>`.Returns "True" if the eventHandler is found and detached, false otherwise.Note that client-side event names differ from their server-side counterparts. For more information, see [Client-Side Events]({%slug panelbar/client-side-programming/events%}). See **Example 7**. |
2648

27-
>tip Client side changes are available on the server side after postback. You can use the [ClientChanges]({%slug panelbar/client-side-programming/accessing-client-changes-on-the-server%}) property to access them.
28-
>
2949

3050

31-
````JavaScript
32-
51+
>caption Example 1: Add a new item and persist it after a postback.
52+
````JavaScript
3353

3454
function AddNewItem() {
3555
var panel = $find("<%= RadPanelBar1.ClientID %>");
@@ -42,11 +62,9 @@ function AddNewItem() {
4262

4363
````
4464

45-
| **Name** | **Parameters** | **Return Type** | **Description** |
46-
| ------ | ------ | ------ | ------ |
47-
| **disable** | none | none | Disables all items in the panel. Clicking on any item has no effect, child items cannot be opened. |
4865

4966

67+
>caption Example 2: Disable the **RadPanelBar**.
5068
````JavaScript
5169

5270
function Disablepanel() {
@@ -57,40 +75,8 @@ function Disablepanel() {
5775
````
5876

5977

60-
| **Name** | **Parameters** | **Return Type** | **Description** |
61-
| ------ | ------ | ------ | ------ |
62-
| **enable** | none | none | Enables all items in the panel. |
63-
64-
65-
````JavaScript
66-
67-
function Enablepanel() {
68-
var panel = $find("<%= RadPanelBar1.ClientID %>");
69-
panel.enable();
70-
}
71-
72-
````
73-
74-
75-
76-
77-
| **Name** | **Parameters** | **Return Type** | **Description** |
78-
| ------ | ------ | ------ | ------ |
79-
| **get_enabled** | none | boolean | True if the panel is enabled. To enable a panel, use the enable() method.|
80-
| **findItemByUrl** |(string URL)|[RadPanelItem]({%slug panelbar/client-side-programming/radpanelitem-object%})|Returns the first **RadPanelBarItem** object whose **NavigateUrl** property matches the parameter. |
81-
82-
>caution The **NavigateUrl** property is transformed to absolute URL on the client side, e.g. *"default.aspx"* is turned into: `http://mydomain.com/default.aspx`.
83-
>
84-
85-
| **Name** | **Parameters** | **Return Type** | **Description** |
86-
| ------ | ------ | ------ | ------ |
87-
| **findItemByValue** |(string value)|[RadPanelItem]({%slug panelbar/client-side-programming/radpanelitem-object%})|Returns the first **RadPanelBarItem** object whose **Value** property is equal to the passed parameter.|
88-
| **findItemByText** |(string text)|[RadPanelItem]({%slug panelbar/client-side-programming/radpanelitem-object%})|Returns the first **RadPanelBarItem** object whose **Text** property is equal to the passed parameter.|
89-
| **findItemByUrl** |(string URL)|[RadPanelItem]({%slug panelbar/client-side-programming/radpanelitem-object%})|Returns the first **RadPanelBarItem** object whose **NavigateUrl** property is equal to the passed parameter.|
90-
| **findItemByAbsoluteUrl** |(string URL)|[RadPanelItem]({%slug panelbar/client-side-programming/radpanelitem-object%})|Returns the first **RadPanelBarItem** object whose **NavigateUrl** property is equal to the passed parameter. Note that the parameter should end with '/' like:var item = sender.findItemByAbsoluteUrl('http://www.test.com/');|
91-
| **findItemByAttribute** |(string attributeName, string value)|[RadPanelItem]({%slug panelbar/client-side-programming/radpanelitem-object%})|Returns the first **RadPanelBarItem** object with a custom attribute of the specified name that has the specified value.|
92-
| **get_items** |none|[RadPanelItemCollection]({%slug panelbar/client-side-programming/radpanelitemcollection-object%})|Returns the collection of root level items.|
9378

79+
>caption Example 3: Get all root items and display their text value.
9480
````JavaScript
9581

9682
function showRootItems() {
@@ -105,11 +91,7 @@ function showRootItems() {
10591

10692

10793

108-
109-
| **Name** | **Parameters** | **Return Type** | **Description** |
110-
| ------ | ------ | ------ | ------ |
111-
| **get_allItems** | none | Array | Gets a linear collection of all items. This includes all root and child items in the panel. |
112-
94+
>caption Example 4: Get all items and display their text value.
11395
````JavaScript
11496

11597
function showAllItems() {
@@ -123,17 +105,7 @@ function showAllItems() {
123105

124106

125107

126-
127-
| **Name** | **Parameters** | **Return Type** | **Description** |
128-
| ------ | ------ | ------ | ------ |
129-
| **get_focusedItem** | none | [RadPanelItem]({%slug panelbar/client-side-programming/radpanelitem-object%}) | Returns the focused root level item. Null if no root level item has focus. |
130-
| **get_expandedItem** |none|[RadPanelItem]({%slug panelbar/client-side-programming/radpanelitem-object%})|Returns the last root level item that was expanded. Null if no root level items are expanded.|
131-
| **get_expandedItems** |none|Array|Returns an array of the **RadPanelBarItem** objects for every expanded item in the panel bar (including expanded child items).|
132-
| **get_selectedItem** |none|[RadPanelItem]({%slug panelbar/client-side-programming/radpanelitem-object%})|Returns the selected item if it exists. (It does not have to be a root level item). Null if the panel does not have a selected item.|
133-
| **get_selectedItems** |none|Array|Returns an array containing the selected items in the panel. Because the panel bar does not allow more than one item to be selected, the array always has 0 or 1 elements.|
134-
| **get_attributes** |none|Collection|Returns the collection of custom attributes for the panel.|
135-
| **get_element** |none|HTML Element|Gets the DOM element for the panel.|
136-
108+
>caption Example 5: Hide/show the **RadPanelBar**.
137109
````JavaScript
138110

139111
// hide the panel
@@ -153,15 +125,7 @@ function showpanel() {
153125

154126

155127

156-
157-
>caption  
158-
159-
| **get_childListElement** | none | HTML Element | Gets the DOM element for the list of items in the panel. |
160-
| ------ | ------ | ------ | ------ |
161-
| **enableEvents** |none|none|Enables the panel bar's client-side event emitting. Events are enabled by default.|
162-
| **disableEvents** |none|none|Disables the panel bar's client-side event emitting.|
163-
| **add_`<EventName>`** |(mixed eventHandler)|none|Attaches an eventHandler to the event with the name `<EventName>`. Note that client-side event names differ from their server-side counterparts. For more information, see [Client-Side Events]({%slug panelbar/client-side-programming/events%}).|
164-
128+
>caption Example 6: Add a handler to the OnClientItemBlur event.
165129
````JavaScript
166130

167131
function OnClientItemBlurHandler() {
@@ -177,12 +141,7 @@ function AttachBlurHandler() {
177141

178142

179143

180-
181-
| **Name** | **Parameters** | **Return Type** | **Description** |
182-
| ------ | ------ | ------ | ------ |
183-
| **remove_`<EventName>`** | (mixed eventHandler) | Boolean | Detaches an eventHandler from the event with the name `<EventName>`.Returns "True" if the eventHandler is found and detached, false otherwise.Note that client-side event names differ from their server-side counterparts. For more information, see [Client-Side Events]({%slug panelbar/client-side-programming/events%}). |
184-
185-
144+
>caption Example 7: Remove the OnClientItemBlur event's handler.
186145
````JavaScript
187146

188147
function OnClientItemBlurHandler() {

controls/panelbar/client-side-programming/radpanelitem-object.md

Lines changed: 65 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -19,71 +19,17 @@ The **RadPanelItem** object is returned by the **getItem** method of the [RadPan
1919

2020
>caption  
2121
22-
| **Name** | **Parameters** | **Return Type** | **Description** |
22+
| Name | Parameters | Return Type | Description |
2323
| ------ | ------ | ------ | ------ |
2424
| **findControl** |String|Object|Returns the client-side object of the Control with the specified ID nested in the Item's Template. The ID passed as an argument to the function MUST be the ID attribute of the nested Control.|
25-
| **disable** |none|none|Disables the item.|
26-
27-
````JavaScript
28-
29-
var panelBar = $find("<%= RadPanelBar1.ClientID %>");
30-
var panelItem = panelBar.findItemByText("Paris");
31-
panelItem.disable();
32-
33-
````
34-
35-
36-
37-
38-
| **Name** | **Parameters** | **Return Type** | **Description** |
39-
| ------ | ------ | ------ | ------ |
40-
| **enable** | none | none | Enables the item if it is disabled. |
41-
42-
43-
````JavaScript
44-
45-
var panelBar = $find("<%= RadPanelBar1.ClientID %>");
46-
var panelItem = panelBar.findItemByText("Paris");
47-
panelItem.enable();
48-
49-
````
50-
51-
| **Name** | **Parameters** | **Return Type** | **Description** |
52-
| ------ | ------ | ------ | ------ |
53-
| **get_isEnabled** | none | Boolean | Returns true if both the item and the panelbar are enabled. If one of them is disabled, get_isEnabled() will return false. |
25+
| **disable** |none|none|Disables the item. See **Example 1**. |
26+
| **enable** | none | none | Enables the item if it is disabled. |
27+
| **get_isEnabled** | none | Boolean | Returns true if both the item and the panelbar are enabled. If one of them is disabled, get_isEnabled() will return false. |
5428
| **get_enabled** |none|Boolean|Same as get_isEnabled.|
5529
| **set_enabled** |Boolean|none|Sets the enabled state of the item.|
56-
| **focus** |none|none|Moves focus to the item.|
57-
58-
````JavaScript
59-
60-
var panelBar = $find("<%= RadPanelBar1.ClientID %>");
61-
var panelItem = panelBar.findItemByText("Paris");
62-
panelItem.focus();
63-
64-
````
65-
66-
67-
68-
| **Name** | **Parameters** | **Return Type** | **Description** |
69-
| ------ | ------ | ------ | ------ |
70-
| **blur** | none | none | Removes focus from the item. |
71-
72-
73-
````JavaScript
74-
75-
var panelBar = $find("<%= RadPanelBar1.ClientID %>");
76-
var panelItem = panelBar.findItemByText("Paris");
77-
panelItem.blur();
78-
79-
````
80-
81-
82-
83-
84-
| **Name** | **Parameters** | **Return Type** | **Description** |
85-
| ------ | ------ | ------ | ------ |
86-
| **focusPreviousItem** | none | none | Moves focus to the previous item. |
30+
| **focus** |none|none|Moves focus to the item. See **Example 2**. |
31+
| **blur** | none | none | Removes focus from the item. See **Example 3**. |
32+
| **focusPreviousItem** | none | none | Moves focus to the previous item. |
8733
| **focusNextItem** |none|none|Moves focus to the next item.|
8834
| **focusFirstChild** |none|none|Moves focus to the first child of the item.|
8935
| **focusLastChild** |none|none|Moves focus to the last child of the item.|
@@ -102,30 +48,8 @@ panelItem.blur();
10248
| **get_panelBar** |none|[RadPanelBar]({%slug panelbar/client-side-programming/radpanelbar-object%})|Returns an instance of the panel bar that contains the item.|
10349
| **get_index** |none|Integer|Gets the zero-based index of the item inside its parent items collection.|
10450
| **get_level** |none|Integer|Gets the level of the item. Root level items are level 0.|
105-
| **get_attributes** |(none)|Collection|Returns the collection of custom attributes for the item.|
106-
107-
````JavaScript
108-
109-
var panelBar = $find("<%= RadPanelBar1.ClientID %>");
110-
var foundItem = panelBar.findItemByAttribute("Population", "0");
111-
var attributes = foundItem.get_attributes();
112-
var size = attributes.getAttribute("size");
113-
if (size) {
114-
attributes.setAttribute("Population", size);
115-
attributes.removeAttribute("size");
116-
}
117-
else {
118-
attributes.setAttribute("Population", "Unknown");
119-
}
120-
121-
````
122-
123-
124-
125-
126-
| **Name** | **Parameters** | **Return Type** | **Description** |
127-
| ------ | ------ | ------ | ------ |
128-
| **expand** | none | none | Expands the item and reveals its children if any. |
51+
| **get_attributes** |(none)|Collection|Returns the collection of custom attributes for the item. See **Example 4**. |
52+
| **expand** | none | none | Expands the item and reveals its children if any. |
12953
| **collapse** |none|none|Collapses the item if it is expanded.|
13054
| **get_expanded** |Boolean|boolean|Gets the expanded/collapsed state of a panel bar item|
13155
| **set_expanded** |Boolean|none|Expands /Collapses the item.|
@@ -136,13 +60,7 @@ else {
13660
| **get_value** |none|string|Returns the Value property of the item.|
13761
| **get_isSeparator** |none|boolean|Returns **true** the item is a separator (sever-side property IsSeparator = true)|
13862
| **get_navigateUrl** |none|string|Gets the URL of the Web page the panel item launches.|
139-
| **set_navigateUrl** |string|none|Sets the navigateURL property of the item. This is the URL of the Web page the item launches.|
140-
141-
>caution The **navigateUrl** property must be an absolute URL on the client side: e.g. " *http://mydomain.com/default.aspx"* not *"default.aspx".*
142-
>
143-
144-
| **Name** | **Parameters** | **Return Type** | **Description** |
145-
| ------ | ------ | ------ | ------ |
63+
| **set_navigateUrl** |string|none|Sets the navigateURL property of the item. This is the URL of the Web page the item launches. The **navigateUrl** property must be an absolute URL on the client side: e.g. " *http://mydomain.com/default.aspx"* not *"default.aspx".* |
14664
| **set_imageUrl** |string|none|Sets the URL of the image.|
14765
| **get_imageUrl** |none|string|Gets the URL of the image.|
14866
| **set_hoveredImageUrl** |string|none|Sets the URL of the image displayed when the mouse if over the item.|
@@ -167,6 +85,61 @@ else {
16785
| **hide** |none|none|Makes the item invisible.|
16886
| **set_visible** |boolean|none|Shows/Hides a RadPanelItem|
16987

88+
89+
90+
91+
>caption Example 1: Disable the item with text Paris.
92+
````JavaScript
93+
94+
var panelBar = $find("<%= RadPanelBar1.ClientID %>");
95+
var panelItem = panelBar.findItemByText("Paris");
96+
panelItem.disable();
97+
98+
````
99+
100+
101+
102+
>caption Example 2: Focus the item.
103+
````JavaScript
104+
105+
var panelBar = $find("<%= RadPanelBar1.ClientID %>");
106+
var panelItem = panelBar.findItemByText("Paris");
107+
panelItem.focus();
108+
109+
````
110+
111+
112+
113+
>caption Example 3: Remove the focus from the item.
114+
````JavaScript
115+
116+
var panelBar = $find("<%= RadPanelBar1.ClientID %>");
117+
var panelItem = panelBar.findItemByText("Paris");
118+
panelItem.blur();
119+
120+
````
121+
122+
123+
124+
>caption Example 4: Set an item's attribute.
125+
````JavaScript
126+
127+
var panelBar = $find("<%= RadPanelBar1.ClientID %>");
128+
var foundItem = panelBar.findItemByAttribute("Population", "0");
129+
var attributes = foundItem.get_attributes();
130+
var size = attributes.getAttribute("size");
131+
if (size) {
132+
attributes.setAttribute("Population", size);
133+
attributes.removeAttribute("size");
134+
}
135+
else {
136+
attributes.setAttribute("Population", "Unknown");
137+
}
138+
139+
````
140+
141+
142+
170143
# See Also
171144

172145
* [Client Side Overview]({%slug panelbar/client-side-programming/overview%})

0 commit comments

Comments
 (0)