summaryrefslogtreecommitdiff
path: root/demos/quickstart/protected/pages/JuiControls
diff options
context:
space:
mode:
authorDavid <ottodavid@gmx.net>2014-11-21 22:14:00 +0100
committerDavid <ottodavid@gmx.net>2014-11-21 22:14:00 +0100
commit6d52f5c4461bd26c4e1dea68686d88c71a9d3e22 (patch)
treed629ca00a7d2a902d5d7e6724abda9f7bbcbcc8a /demos/quickstart/protected/pages/JuiControls
parentac6eeca7dedbd74a60f507a8e7ec345394fb90aa (diff)
TJuiAutoComplete multiselection + quickstart doc
implemented Separator, minChars and Frequency properties, added the related quickstart parts
Diffstat (limited to 'demos/quickstart/protected/pages/JuiControls')
-rw-r--r--demos/quickstart/protected/pages/JuiControls/Home.page4
-rw-r--r--demos/quickstart/protected/pages/JuiControls/Samples/TJuiAutoComplete/Home.page45
-rw-r--r--demos/quickstart/protected/pages/JuiControls/Samples/TJuiAutoComplete/Home.php39
-rw-r--r--demos/quickstart/protected/pages/JuiControls/Widgets.page25
4 files changed, 112 insertions, 1 deletions
diff --git a/demos/quickstart/protected/pages/JuiControls/Home.page b/demos/quickstart/protected/pages/JuiControls/Home.page
index 2573b162..68765faa 100644
--- a/demos/quickstart/protected/pages/JuiControls/Home.page
+++ b/demos/quickstart/protected/pages/JuiControls/Home.page
@@ -80,6 +80,10 @@ For informations of the specific options of each interaction, follow jQuery-UI I
<a href="?page=JuiControls.Widgets#TJuiProgressbar">TJuiProgressbar</a>
displays a progress bar.
</li>
+ <li>
+ <a href="?page=JuiControls.Widgets#TJuiAutoComplete">TJuiProgressbar</a>
+ provides a list of suggestions on the current partial word typed in the textbox
+ </li>
</ul>
</com:TContent>
diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiAutoComplete/Home.page b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiAutoComplete/Home.page
new file mode 100644
index 00000000..1338b651
--- /dev/null
+++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiAutoComplete/Home.page
@@ -0,0 +1,45 @@
+<com:TContent ID="body">
+<h1>TJuiAutoComplete Samples</h1>
+
+
+<table class="sampletable">
+
+<tr><td class="samplenote">
+Simple Autocompleter:
+</td><td class="sampleaction">
+<com:TJuiAutoComplete
+ ID="AutoComplete"
+ OnSuggest="suggestNames"
+ OnSuggestionSelected="suggestionSelected1"
+ ResultPanel.CssClass="acomplete"
+ Suggestions.DataKeyField="id" >
+
+ <prop:Suggestions.ItemTemplate>
+ <li><%# $this->Data['name'] %></li>
+ </prop:Suggestions.ItemTemplate>
+</com:TJuiAutoComplete>
+<com:TActiveLabel ID="Selection1" />
+</td></tr>
+
+<tr><td class="samplenote">
+Autocompleter with multiple selection:
+</td><td class="sampleaction">
+<com:TJuiAutoComplete
+ ID="AutoComplete2"
+ OnSuggest="suggestNames"
+ OnSuggestionSelected="suggestionSelected2"
+ Separator=","
+ ResultPanel.CssClass="acomplete"
+ Suggestions.DataKeyField="id" >
+
+ <prop:Suggestions.ItemTemplate>
+ <li><%# $this->Data['name'] %></li>
+ </prop:Suggestions.ItemTemplate>
+</com:TJuiAutoComplete>
+(Use ',' to separate the selected suggestions)
+<com:TActiveLabel ID="Selection2" />
+</td></tr>
+
+</table>
+
+</com:TContent>
diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiAutoComplete/Home.php b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiAutoComplete/Home.php
new file mode 100644
index 00000000..c3fba3a9
--- /dev/null
+++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiAutoComplete/Home.php
@@ -0,0 +1,39 @@
+<?php
+
+class Home extends TPage
+{
+ public function suggestNames($sender,$param) {
+ // Get the token
+ $token=$param->getToken();
+ // Sender is the Suggestions repeater
+ $sender->DataSource=$this->suggestionsForName($token);
+ $sender->dataBind();
+ }
+
+ public function suggestionSelected1($sender,$param) {
+ $id=$sender->Suggestions->DataKeys[ $param->selectedIndex ];
+ $this->Selection1->Text='Selected ID: '.$id;
+ }
+
+ public function suggestionSelected2($sender,$param) {
+ $id=$sender->Suggestions->DataKeys[ $param->selectedIndex ];
+ $this->Selection2->Text='Selected ID: '.$id;
+ }
+
+ public function suggestionsForName($name) {
+ $allChoices = array(
+ array('id'=>1, 'name'=>'John'),
+ array('id'=>2, 'name'=>'Paul'),
+ array('id'=>3, 'name'=>'George'),
+ array('id'=>4, 'name'=>'Ringo')
+ );
+
+ if($name) {
+ return array_filter($allChoices, function ($el) use ($name) {
+ return stripos($el['name'], $name) !== false;
+ });
+ } else
+ return $allChoices;
+ }
+
+} \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/JuiControls/Widgets.page b/demos/quickstart/protected/pages/JuiControls/Widgets.page
index cf72d41d..cedec675 100644
--- a/demos/quickstart/protected/pages/JuiControls/Widgets.page
+++ b/demos/quickstart/protected/pages/JuiControls/Widgets.page
@@ -10,7 +10,7 @@ PRADO Jui widgets controls can be divided in two groups:
For informations of the specific options of each widget, follow jQuery-UI Widget <a href="http://api.jqueryui.com/category/widgets/">API Documentation</a> for the specific interaction.
</p>
-<a name="TJuiProgressbar"></a>
+<a name="TJuiProgressbar" />
<h2>TJuiProgressbar</h2>
<com:DocLink ClassPath="System.Web.UI.JuiControls.TJuiProgressbar" /> - <a href="http://api.jqueryui.com/progressbar/">jQuery UI API</a>
@@ -25,4 +25,27 @@ The panel takes the aspect of a progressbar ranging from a value of 0 to the val
<com:RunBar PagePath="JuiControls.Samples.TJuiProgressbar.Home" />
<br/>
+<a name="TJuiAutoComplete" />
+<h2>TJuiAutoComplete</h2>
+<com:DocLink ClassPath="System.Web.UI.JuiControls.TJuiAutoComplete" /> - <a href="http://api.jqueryui.com/autocomplete/">jQuery UI API</a>
+
+<p class="block-content">
+<tt>TJuiAutoComplete</tt> is an extension to <a href="?page=ActiveControls.ActiveTextBox">TActiveTextBox</a> based on jQuery-UI's <a href="http://jqueryui.com/autocomplete/">autocomplete</a> widget.
+</p>
+
+<p class="block-content">
+TJuiAutoComplete is an extended ActiveTextBox that provides a list of suggestions on the current partial word typed in the textbox. The suggestions are requested using callbacks. The <tt>Frequency</tt> and <tt>MinChars</tt> properties sets the delay and minimum number of characters typed, respectively, before requesting for sugggestions. An embedded <tt>TRepeater</tt> is used to Display the list of suggestions. It can be accessed and styled through the Suggestions property and its sub-properties.
+</p>
+
+<p class="block-content">
+On each request for suggestions, the <tt>OnSuggestion</tt> event will be raised. The event handler receives the entered token that can be used to build the list of suggestions and to <tt>dataBind()</tt> it to the Suggestions repeater.
+</p>
+
+<p class="block-content">
+When a suggestion is selected the <tt>OnSuggestionSelected</tt> event is raised, with the index of the selected suggestion contained in the parameter. Multiple selections can be performed in the same textbox. The selections must be separated by any characters specified with the <tt>Separator</tt> property.
+</p>
+
+<com:RunBar PagePath="JuiControls.Samples.TJuiAutoComplete.Home" />
+<br/>
+
</com:TContent>