Skip to content

Commit 66e7288

Browse files
veselintsveselints
committed
Fix TabStrip broken Client-side programming tables
1 parent c0425a3 commit 66e7288

File tree

5 files changed

+247
-291
lines changed

5 files changed

+247
-291
lines changed

‎controls/tabstrip/client-side-programming/radmultipage-object.md‎

Lines changed: 24 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -10,66 +10,55 @@ position: 5
1010

1111
# RadMultiPage Object
1212

13+
##
1314

14-
Telerik RadMultiPage exposes a client-side API to manage the switching of the pages. The client-side **RadMultiPage** object has a method named **get_pageViews**, which returns a RadPageViewCollection of all pageviews contained within the multipage.
15-
16-
17-
## RadMultiPage client-side object
18-
19-
20-
>caption  
15+
Telerik **RadMultiPage** exposes a client-side API to manage the switching of the pages. The client-side **RadMultiPage** object has a method named **get_pageViews**, which returns a RadPageViewCollection of all PageViews contained within the MultiPage.
2116

2217
| **Name** | **Parameters** | **Return Type** | **Description** |
2318
| ------ | ------ | ------ | ------ |
24-
| **get_visible** |none|Boolean|Returns true if the multipage is visible.|
19+
| **get_visible** |none|Boolean|Returns true if the MultiPage is visible. See **Example 1**.|
20+
| **set_visible** | Boolean | none | Shows/Hides the MultiPage. See **Example 2**. |
21+
| **get_selectedPageView** | none | RadPageView | Returns the currently selected PageView. See **Example 3**. |
22+
| **get_pageViews** | none | RadPageViewCollection | Returns a collection of all PageViews. See **Example 4**. |
23+
| **findPageViewByID** | String | RadMultiPage | Gets the first RadMultiPage instance, whose id corresponds to the passed parameter. See **Example 5**. |
24+
| **get_selectedIndex** | none | Integer | Returns the index of the selected PageView. |
25+
| **set_selectedIndex** |Integer|none|Sets the SelectedIndex of the MultiPage.|
26+
| **get_element** |none|HTML Element|Gets the DOM element for the MultiPage.|
2527

26-
````JavaScript
28+
29+
>caption Example 1. Retrieve visibility status of RadMultiPage 
30+
31+
````JavaScript
2732
var multiPage = $find("<%=RadMultiPage1.ClientID %>");
28-
if(multiPage.get_visible())
29-
{
33+
if(multiPage.get_visible()) {
3034
alert("visible");
31-
}
32-
else
33-
{
35+
} else {
3436
alert("invisible");
3537
}
3638
````
3739

38-
>caption  
39-
40-
| **set_visible** | Boolean | none | Shows/Hides the multipage. |
41-
| ------ | ------ | ------ | ------ |
40+
>caption Example 2. Toggle visibility status of RadMultiPage 
4241
4342
````JavaScript
4443
var multiPage = $find("<%=RadMultiPage1.ClientID %>");
45-
if(multiPage.get_visible())
46-
{
44+
if(multiPage.get_visible()) {
4745
multiPage.set_visible(false);
48-
}
49-
else
50-
{
46+
} else {
5147
multiPage.set_visible(true);
5248
}
5349
````
5450

55-
>caption  
56-
57-
| **get_selectedPageView** | none | RadPageView | Returns the currently selected pageview. |
58-
| ------ | ------ | ------ | ------ |
51+
>caption Example 3. Get selected PageView 
5952
60-
````XML
53+
````JavaScript
6154
var multiPage = $find("<%=RadMultiPage1.ClientID %>");
6255
var pageView = multiPage.get_selectedPageView();
63-
if(pageView)
64-
{
56+
if(pageView) {
6557
alert("The ID of the selected RadPageView is " + pageView.get_id());
6658
}
6759
````
6860

69-
>caption  
70-
71-
| **get_pageViews** | none | RadPageViewCollection | Returns a collection of all pageviews. |
72-
| ------ | ------ | ------ | ------ |
61+
>caption  Example 4. Get all PageViews 
7362
7463
````JavaScript
7564
var multiPage = $find("<%=RadMultiPage1.ClientID %>");
@@ -80,10 +69,7 @@ for(i=0; i<multiPage.get_pageViews().get_count();i++)
8069
}
8170
````
8271

83-
>caption  
84-
85-
| **findPageViewByID** | String | RadMultiPage | Gets the first RadMultiPage instance, whose id corresponds to the passed parameter. |
86-
| ------ | ------ | ------ | ------ |
72+
>caption  Example 5. Find a PageView by ID 
8773
8874
````JavaScript
8975
var multiPage = $find("<%=RadMultiPage1.ClientID %>");
@@ -92,9 +78,3 @@ if(pageView)
9278
pageView.set_selected(true);
9379
````
9480

95-
>caption  
96-
97-
| **get_selectedIndex** | none | Integer | Returns the index of the selected pageview. |
98-
| ------ | ------ | ------ | ------ |
99-
| **set_selectedIndex** |Integer|none|Sets the SelectedIndex of the multipage.|
100-
| **get_element** |none|HTML Element|Gets the DOM element for the multipage.|

‎controls/tabstrip/client-side-programming/radpageview-object.md‎

Lines changed: 23 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -10,37 +10,34 @@ position: 4
1010

1111
# RadPageView Object
1212

13+
##
1314

14-
The **RadPageView**object is returned by the **getPageView** method of the RadPageView collection.
15+
The **RadPageView** object is returned by the **getPageView()** method of the RadPageView collection.
16+
17+
The following table lists the most important methods:
18+
19+
| Name | Parameters | Return Type | Description |
20+
| ------ | ------ | ------ | ------ |
21+
| **select** |none|none|Selects the PageView.|
22+
| **unselect** |none|none|Deselects the PageView.|
23+
| **get_selected** |none|Boolean|Returns true if the PageView is selected.|
24+
| **set_selected** |Boolean|none|Selects/deselects the PageView.|
25+
| **get_multiPage** |none|RadMultiPage|Gets the MultiPage containing the PageView.|
26+
| **get_index** |none|Integer|Returns the index of the PageView.|
27+
| **get_element** |none|DOM|Gets the DOM element for the PageView.|
28+
| **get_id** |none|Integer|Gets the ID of the PageView. See **Example 1**.|
29+
| **show** |none|none|Shows the PageView.|
30+
| **hide** |none|none|Hides the PageView.|
31+
| **get_contentUrl** |none|none|Gets the URL of the page that is opened in the PageView.|
32+
| **set_contentUrl** |String|none|Sets the URL of the page that is opened in the PageView.|
33+
34+
35+
>caption Example 1. Get the IDs of all PageViews in a RadMultiPage
1536
1637
````JavaScript
1738
var multiPage = $find("<%=RadMultiPage1.ClientID %>");
18-
var i;
19-
for(i=0; i<multiPage.get_pageViews().get_count();i++)
20-
{
39+
for(var i = 0; i < multiPage.get_pageViews().get_count(); i++) {
2140
alert(multiPage.get_pageViews().getPageView(i).get_id());
2241
}
2342
````
2443

25-
26-
## RadPageView client-side object
27-
28-
The following table lists the most important methods:
29-
30-
31-
>caption  
32-
33-
| Name | Parameters | Return Type | Description |
34-
| ------ | ------ | ------ | ------ |
35-
| **select** |none|none|Selects the pageview.|
36-
| **unselect** |none|none|Unselects the pageview.|
37-
| **get_selected** |none|Boolean|Returns true if the pageview is selected.|
38-
| **set_selected** |Boolean|none|Selects/Unselects the pageview.|
39-
| **get_multiPage** |none|RadMultiPage|Gets the MultiPage containing the pageview.|
40-
| **get_index** |none|Integer|Returns the index of the pageview.|
41-
| **get_element** |none|DOM|Gets the DOM element for the pageview.|
42-
| **get_id** |none|Integer|Gets the ID of the pageview.|
43-
| **show** |none|none|Shows the pageview.|
44-
| **hide** |none|none|Hides the pageview.|
45-
| **get_contentUrl** |none|none|Gets the URL of the page that is opened in the pageview.|
46-
| **set_contentUrl** |String|none|Sets the URL of the page that is opened in the pageview.|

‎controls/tabstrip/client-side-programming/radtab-object.md‎

Lines changed: 61 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -12,40 +12,17 @@ position: 2
1212

1313
##
1414

15-
The **RadTab** object is returned by the **getTab** method of the [RadTabCollection object]({%slug tabstrip/client-side-programming/radtabcollection-object%}). It is also exposed by the eventArgs of many [client-side events]({%slug tabstrip/client-side-programming/events%}). The following table lists the most important methods:
16-
17-
18-
>caption  
15+
The **RadTab** object is returned by the **getTab()** method of the [RadTabCollection object]({%slug tabstrip/client-side-programming/radtabcollection-object%}). It is also exposed by the eventArgs of many [client-side events]({%slug tabstrip/client-side-programming/events%}). The following table lists the most important methods of the **RadTab** object:
16+
 
1917

2018
| **Name** | **Parameters** | **Return Type** | **Description** |
2119
| ------ | ------ | ------ | ------ |
22-
| **findControl** |String|Object|Returns the client-side object of the Control with the specified ID nested in the Tab's Template. The ID passed as an argument to the function MUST be the ID attribute of the nested Control.|
23-
| **disable** |none|none|Disables the tab.|
24-
25-
````JavaScript
26-
var tabStrip = $find("<%= RadTabStrip1.ClientID %>");
27-
var tab = tabStrip.findTabByText( "Paris");
28-
tab.disable();
29-
````
30-
31-
32-
>caption  
33-
34-
| **enable** | none | none | Enables the tab if it is disabled. |
35-
| ------ | ------ | ------ | ------ |
36-
37-
````JavaScript
38-
var tabStrip = $find( "<%= RadTabStrip1.ClientID %>");
39-
var tab = tabStrip.findTabByText( "Paris");
40-
tab.enable();
41-
````
42-
43-
>caption  
44-
45-
| **get_isEnabled** | none | Boolean | Returns true if both the tab and the tabstrip are enabled. If one of them is disabled, get_isEnabled() will return false. |
46-
| ------ | ------ | ------ | ------ |
47-
| **get_enabled** |none|Boolean|Same as get_isEnabled.|
48-
| **set_enabled** |Boolean|none|Sets the enabled state of the tab.|
20+
| **findControl** |String| Object|Returns the client-side object of the Control with the specified ID nested in the Tab's Template. The ID passed as an argument to the function MUST be the ID attribute of the nested Control.|
21+
| **disable** |none|none| Disables the tab if it is enabled. See **Example 1**.|
22+
| **enable** | none | none | Enables the tab if it is disabled. |
23+
| **get_isEnabled** | none | bool | Returns true if both the tab and the tabstrip are enabled. If one of them is disabled, get_isEnabled() will return false. |
24+
| **get_enabled** |none|bool|Same as get_isEnabled.|
25+
| **set_enabled** |bool|none|Sets the enabled state of the tab. See **Example 2**. |
4926
| **get_tabs** |none|RadTabCollection|Gets the child tabs of the current tab.|
5027
| **get_nextSibling** |none|RadTab|Returns the next sibling of the tab. If the tab is last, returns null.|
5128
| **get_previousSibling** |none|RadTab|Returns the previous sibling of the tab. If the tab is first, returns null.|
@@ -56,30 +33,8 @@ tab.enable();
5633
| **set_pageViewID** |string|none|Sets the ID of the pageview.|
5734
| **get_index** |none|Integer|Gets the zero based index of the tab inside the parent tabs collection.|
5835
| **get_level** |none|Integer|Gets the level of the tab. Root level tabs are first level.|
59-
| **get_attributes** |(none)|Collection|Returns the collection of custom attributes for the tab.|
60-
61-
````JavaScript
62-
var tabStrip = $find("<%= RadTabStrip1.ClientID %>");
63-
var foundTab = tabStrip.findTabByAttribute( "Population", "0");
64-
var attributes = foundTab.get_attributes();
65-
var size = attributes.getAttribute( "size");
66-
if (size)
67-
{
68-
attributes.setAttribute( "Population", size);
69-
attributes.removeAttribute( "size");
70-
}
71-
else
72-
{
73-
attributes.setAttribute( "Population", "Unknown" );
74-
}
75-
76-
````
77-
78-
79-
>caption  
80-
81-
| **get_visible** | none | boolean | Returns **true** if the tab is visible or **false** otherwise. |
82-
| ------ | ------ | ------ | ------ |
36+
| **get_attributes** |none|Collection|Returns the collection of custom attributes for the tab. See **Example 3**. |
37+
| **get_visible** | none | boolean | Returns **true** if the tab is visible or **false** otherwise. |
8338
| **set_visible** |boolean|none|Shows/Hides a tab.|
8439
| **set_text** |string text|none|Sets the text of the tab.|
8540
| **get_text** |none|string text|Returns the text of the tab.|
@@ -91,15 +46,11 @@ else
9146
| **select** |none|none|Selects the tab.|
9247
| **unselect** |none|none|De-selects the tab.|
9348
| **get_navigateUrl** |none|string|Gets the URL of the Web page the tab launches.|
94-
| **set_navigateUrl** |string|none|Sets the navigateURL property of the tab. This is the URL of the Web page the tab launches.
95-
96-
>caution The **navigateUrl** property must be an absolute URL on the client side: e.g., `http://mydomain.com/default.aspx" not `default.aspx`.
97-
>
98-
|
99-
| **get_imageUrl** |none|(string imageUrl)|Gets the URL of the image.|
100-
| **set_imageUrl** |(string imageUrl)|none|Sets the URL of the image.|
101-
| **get_hoveredImageUrl** |none|(string imageUrl)|Gets the URL of the image displayed when the mouse if over the tab.|
102-
| **set_hoveredImageUrl** |(string imageUrl)|none|Sets the URL of the image displayed when the mouse if over the tab.|
49+
| **set_navigateUrl** |string|none|Sets the navigateURL property of the tab. This is the URL of the Web page the tab launches. The **navigateUrl** parameter should be passed as an absolute URL on the client side: e.g., `http://mydomain.com/default.aspx" not `default.aspx`. |
50+
| **get_imageUrl** |none|string|Gets the URL of the image.|
51+
| **set_imageUrl** |string|none|Sets the URL of the image.|
52+
| **get_hoveredImageUrl** |none|string|Gets the URL of the image displayed when the mouse if over the tab.|
53+
| **set_hoveredImageUrl** |string|none|Sets the URL of the image displayed when the mouse if over the tab.|
10354
| **get_element** |none|HTML Element|Gets the root DOM element of the tab (LI).|
10455
| **get_linkElement** |none|HTML Element|Gets the anchor DOM element of the tab(A).|
10556
| **get_imageElement** |none|HTML Element|Gets the image DOM element of the tab. If the server side ImageUrl property is not set,returns null.|
@@ -108,9 +59,53 @@ else
10859
| **scrollIntoView** |none|none|Scrolls to the tab.|
10960
| **click** |none|none|Simulate user click on a tab.|
11061

62+
>caution Changes to the tab made using these methods do not persist after a postback unless surrounded by a call to the **trackChanges()** and the **commitChanges()** methods of the tab strip object.
63+
>
64+
65+
>caption Example 1. Disable tab
66+
67+
````JavaScript
68+
function disableTab() {
69+
var tabStrip = $find("<%= RadTabStrip1.ClientID %>");
70+
var tab = tabStrip.findTabByText("Paris");
71+
tab.disable();
72+
}
73+
````
74+
75+
>caption Example 2. Enable tab
76+
11177
````JavaScript
112-
var tabStrip = $find("<%=RadTabStrip1.ClientID %>");
113-
tabStrip.get_tabs().getTab(tabStrip.get_tabs().get_count()-1).scrollIntoView();
78+
function enableTab() {
79+
var tabStrip = $find( "<%= RadTabStrip1.ClientID %>");
80+
var tab = tabStrip.findTabByText( "Paris");
81+
tab.set_enabled(true);
82+
}
83+
````
84+
85+
>caption Example 3. Access the attributes collection of the tab
86+
87+
````JavaScript
88+
function manipulateAttributes() {
89+
var tabStrip = $find("<%= RadTabStrip1.ClientID %>");
90+
var foundTab = tabStrip.findTabByAttribute( "Population", "0");
91+
var attributes = foundTab.get_attributes();
92+
var size = attributes.getAttribute( "size");
93+
if (size) {
94+
attributes.setAttribute( "Population", size);
95+
attributes.removeAttribute( "size");
96+
} else {
97+
attributes.setAttribute( "Population", "Unknown" );
98+
}
99+
}
100+
````
101+
102+
>caption Example 4. Scroll into view the last tab
103+
104+
````JavaScript
105+
function scrollToTheLastTab() {
106+
var tabStrip = $find("<%=RadTabStrip1.ClientID %>");
107+
tabStrip.get_tabs().getTab(tabStrip.get_tabs().get_count()-1).scrollIntoView();
108+
}
114109
````
115110

116111

0 commit comments

Comments
 (0)