Get selected values from MultiCombo in Ext.NEt via JS - ext.net

I am using Ext.Net I have a form with a ComboBox which I have just changed to a MultiCombo.
Previously I used "SelectEnquiry.getValues()" to retrieve the selected item and pass it into a parameter used with a Button Direct Event.
How do I get the selected values when using the MultiCombo?
Combo Box Bit
<ext:MultiCombo runat="server" ID="SelectEnquiry" FieldLabel="Enquiry" AnchorHorizontal="95%" Editable="false" ValueField="Id" DisplayField="ProviderName" TypeAhead="true" Mode="Local" ForceSelection="true" TriggerAction="All" EmptyText="Select Enquiry" ValueNotFoundText="Select Enquiry" ItemSelector="div.list-item" SelectOnFocus="true" AllowBlank="false">
Button form submit bit
<ext:Button runat="server" ID="ButtonEmailTaskAccept" Text="OK">
<Listeners>
<Click Handler="if (PanelUnlinked.isVisible() && !$form.validate( [SelectProject, SelectEnquiry])) return false;">
</Click>
</Listeners>
<DirectEvents>
<Click Url='<%# Url.Action("CompleteEmailTask") %>' AutoDataBind="true"
Success="window.$messageBus.publish('task-admin', 'inbox-changed');
window.$messageBus.publish('task-admin', 'task-changed');
WindowAssignEmail.close()" Failure="$shell.requestFailedHandler(response, null)"
Json="true">
<EventMask ShowMask="true"></EventMask>
<ExtraParams>
<ext:Parameter Name="emailResponseId" Value="<%# Model.EmailResponse.Id %>" Mode="Value"
AutoDataBind="true" />
<ext:Parameter Name="enquiryId" Value="SelectEnquiry.getValues()" Mode="Raw" />
<ext:Parameter Name="documentList" Value="buildSelectionList()" Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>

With <ext:MultiCombo> you can just call .getValue() to return an Array of selected values. I'll look into adding .getValues() as well, so it's consistent with the <ext:ComboBox> api.
Edit
It appears the ComboBox does not have a client-side .getValues() function, so we won't be adding to the MultiCombo. Just use .getValue(), which is standardised across all Form Fields.

The problem seemed to be that it could not locate the control I was try to get the value from.
So managed to solve it by doing:
#{SelectEnquiry}.getSelectedValues()

Related

BootsFaces does not render area from ajax

I am trying to render a data table using ajax (BootsFaces) according to the values provided in the form. Unfortunately, desired part does not render. I can see the ajax request is going in the network tab, but it does not do anything (Area does not render and this searchPartialBean.getSearchList() method does not get called). Below is my code snippet. Is there any issue in the way I am doing it ?
<b:tab title="Search">
<h:form>
<b:row>
<b:column mediumScreen="7">
<b:inputText placeholder="Telephone number" label="Telephone number"
value="#{searchPartialBean.telephoneNumber}"/>
<b:inputText placeholder="First name" label="First Name"
value="#{searchPartialBean.firstName}"/>
<b:inputText placeholder="Last name" label="Last Name"
value="#{searchPartialBean.lastName}"/>
<b:commandButton look="primary" id="search-form-submit" value="Search"
update="serach-results-table"/>
</b:column>
<b:column mediumScreen="5">
<b:alert severity="info" title="Info">
This will contain the search help.
</b:alert>
</b:column>
</b:row>
<br />
<b:panel id="serach-results-table">
<b:dataTable rendered="#{searchPartialBean.valuesPresent}" value="#{searchPartialBean.getSearchList()}" var="patient">
<b:dataTableColumn label="Date" value="#{patient.firstName}"/>
</b:dataTable>
</b:panel>
</h:form>
</b:tab>
You've wrapped a form in a tab. Both widgets define a namespace, which, in turn, adds a prefix to the id of each widget within. Probably that's the problem.
My first approach would be to add a colon to indicate you're searching in the inner namespace:
update=":search-results-table"
If that doesn't work, you can use the recursive search expression of BootsFaces:
update="**:search-results-table"
However, my favorite approach is to use a CSS pseudo class like so:
update="#(.search-results-table)"
<b:panel styleClass="search-results-table">

In ext.net, how do I align a tabpanel button to the right?

I would like to align the button of the right, but keep the content tabs on the left. This is my code:
<ext:TabPanel ID="TabPanel1" runat="server" Height="295" Plain="true" DeferredRender="false" meta:resourcekey="TabPanel1Resource1">
<TabBar>
<ext:Button runat="server" Icon="ArrowOut" meta:resourcekey="fullscreenResource1">
<DirectEvents>
<Click OnEvent="edit_fullOpenAdd" />
</DirectEvents>
</ext:Button>
</TabBar>
<Defaults>
<ext:Parameter Name="autoScroll" Value="true" Mode="Raw" />
</Defaults>
<Items>
......the content ......
</Items>
</ext:TabPanel>
Any Ideas?
Thank you!
Edit: I was told to try tabCls: 'right-tab', but I do not know how to implement this.
Use TabStrip control.
Please see this example: http://examples.ext.net/#/TabPanel/TabStrip/Overview/

Adding dynamic column using trinidad by clicking on a link in JSF 1.2

<trh:tableLayout width="25%" borderWidth="3" cellSpacing="5"
halign="center" >
<h:commandLink action="#{dataBean.setInitial}" value="ShowView">
</h:commandLink>
<trh:rowLayout shortDesc="head">
<tr:panelHeader size="4" text="Id" />
<tr:forEach var="row" begin="0" end="#{dataBean.size}" items="#{dataBean.dataList}">
<tr:outputText value="#{row.id}" rendered="#{row.editable}"/>
</tr:forEach>
</trh:rowLayout>
<trh:rowLayout>
<tr:panelHeader size="4" text="Name" />
<tr:forEach var="row" begin="0" end="#{dataBean.size}" items="#{dataBean.dataList}">
<tr:outputText value="#{row.text}" rendered="#{row.editable}" />
</tr:forEach>
</trh:rowLayout>
</trh:tableLayout>
I am using trh tags in trinidad to display row wise data ..
and output is like...
Show View
ID 2 1
Name raj Narendra
I want to add a dynamic column in row wise by clicking on link show view..If i click back on show view it should hide that column...Please suggest me how to add rendered attribute and where it should be..
Why don't you use
Something like this:
<tr:commandLink action="#{dataBean.setInitial}" value="ShowView" id="showHideLink"/>
<tr:table value="#{dataBean.dataList}" var="row" id="itemTable" partialTrigger="showHideLink">
<tr:column rendered="#{row.column1Visible}" id="itemCol">
<tr:outputText value="#{row.text1}"/>
</tr:column>
<tr:column rendered="#{row.column2Visible}" id="itemCol">
<tr:outputText value="#{row.text2}"/>
</tr:column>
</tr:table>
In order to get the table to refresh when you click the link, set the partialTrigger property of the table to the id of the button.
To control the visibility of the columns you'll need to use the objects in the dataList.
For example, you could have the fields column1Visible and column2Visible in those objects (with public getters and setters).

Ext:BooleanColumn,when editing ,it shows true or false value

I have a grid and there is ext:BooleanColumn inside it,and I put a combobox for editing boolen colum.everything works fine ,except of this one .when I click boolen colum to edit,it shows false or true inside it,
I added a image what I trying to say.
how I can avoid this .thank you
and here is the my code :
<ext:BooleanColumn ID="BooleanColumn1" runat="server" DataIndex="BorcOdendimi" TrueText="odendi" Text="ödenme durumu"
FalseText="odenmedi" >
<Editor>
<ext:ComboBox runat="server" Text="odendi durumu" Editable="false">
<Items>
<ext:ListItem Text="Odendi" Value="1" />
<ext:ListItem Text="Odenmedi" Value="0" />
</Items>
</ext:ComboBox>
</Editor>
</ext:BooleanColumn>
To get it working the Values of the ComboBox's Items should match the values of a BooleanColumn. Currently, true/false (BooleanColumn's values) doesn't match 1/0 (ComboBox Items' values).
You can replace the existing ComboBox's Items with:
<ext:ListItem Text="Odendi" Value="true" Mode="Raw" />
<ext:ListItem Text="Odenmedi" Value="false" Mode="Raw" />
Answered in the Ext.NET forums thread.

How to Disable ToolTip without Removing the "title" attribute [ASP.NET]

I have 3 TextBoxes
<asp:TextBox ID="txtTitle" runat="server" class="txtFields" title="Title" />
<asp:TextBox ID="txtName" runat="server" class="txtFields" title="Name" />
<asp:TextBox ID="txtDescription" runat="server" class="txtFields" title="Description" />
I'm using the watermark plugin on these 3 TextBoxes:
jQuery('.txtFields').watermark();
This is the plugin:
http://code.google.com/p/jquery-watermark/
jQuery('.txtFields').watermark();
Uses the Title Attribute of the TextBox to Show the Watermark but the problem is that this also Generates ToolTips which is something I do Not want, is there anyway to disable the tooltips without removing the title attribute?
Or is there anyway to use custom attributes with this plugin? By that I mean making the plugin use another attribute instead of the title attribute.
Thank you.
Looks like watermark will allow you to specify any text to display in there, so you're not stuck with the title. Any attribute that you could select with jQuery you could use as the watermark value. The problem with that is there are no other attributes you could add in there and still have nice compliant code. Best bet is to give them a value, assign a variable that value, unset it and add watermark. Something like:
$('input').each(function() {
var wmark = $(this).val();
$(this).val('');
$(this).watermark(wmark);
});
Try adding UseAccessibleHeader = false
like this:
<asp:TextBox ID="txtTitle" runat="server" class="txtFields" title="Title" UseAccessibleHeader = false />

Resources