combobox showing record linked to previous combobox selection
Date : March 29 2020, 07:55 AM
will be helpful for those in need Basically: You do not want to do things this way in WPF, use MVVM instead... If you must, i suggest you get the selected item either from sender or even better, the AddedItems property of e - i have no idea what this.Domain.Text points to, but it obviously changes after the event is fired. Though as i said you really want to use MVVM as much as possible when working with WPF, so using the pattern you'd simply have a CurrentDomain property and bind the ComboBox's SelectedItem and all the controls displaying the information to it.
|
ComboBox showing HTML as text
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further Html input element can't display HTML, so you need to change template add div. Div can be shown as an overlay over input. Best way to achieve this is by extending ComboBox: Ext.define('HtmlComboBox', {
extend: 'Ext.form.field.ComboBox',
fieldSubTpl: [ // note: {id} here is really {inputId}, but {cmpId} is available
'<input id="{id}" data-ref="inputEl" type="{type}" {inputAttrTpl}',
' size="1"', // allows inputs to fully respect CSS widths across all browsers
'<tpl if="name"> name="{name}"</tpl>',
'<tpl if="value"> value="{[Ext.util.Format.htmlEncode(values.value)]}"</tpl>',
'<tpl if="placeholder"> placeholder="{placeholder}"</tpl>',
'{%if (values.maxLength !== undefined){%} maxlength="{maxLength}"{%}%}',
'<tpl if="readOnly"> readonly="readonly"</tpl>',
'<tpl if="disabled"> disabled="disabled"</tpl>',
'<tpl if="tabIdx != null"> tabindex="{tabIdx}"</tpl>',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
'<tpl foreach="inputElAriaAttributes"> {$}="{.}"</tpl>',
' class="{fieldCls} {typeCls} {typeCls}-{ui} {editableCls} {inputCls}" autocomplete="off"/>',
// overlay element to show formatted value
'<div id="{cmpId}-overlayEl" data-ref="overlayEl"<tpl if="name"> name="{name}-overlayEl"</tpl> class="{fieldCls}-overlay {typeCls} {typeCls}-{ui} {inputCls}">{value}</div>',
{
disableFormats: true
}
],
forceSelection: true,
childEls: [
'overlayEl'
],
setRawValue: function(value) {
var me = this;
// set value in overlay
if (me.rendered) {
me.overlayEl.update(value);
}
return me.callParent([value]);
}
});
.x-form-text-wrap {
position: relative;
}
.x-form-field-overlay {
background-color: #ffffff;
position: absolute;
top: 0;
}
|
Cascading combobox with html table as datasource
Date : March 29 2020, 07:55 AM
To fix this issue I have some code that I am using to filter some user selections however I would like to use an existing html table as the datasource for the igcombo box as opposed to the javascript array. How can I accomplish this ? Here is my code: , I edited your code and this should work. <html>
<head>
<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<script>
$(function() {
var dsCountry, dsCascTowns, dsCountryCascading,
dsCountryCascading, dsStatesUSCascading, dsChargetypeBGCascading;
var array_return1 = [];
function getchargetypeForCombo()
{
$(".table__product tr").each(function() {
var td = $('td', this),
productitems = td.eq(0).text(),
productId = td.eq(1).text();
array_return1.push({
Product: productitems,
Chargetype: productId
});
});
return array_return1;
}
getchargetypeForCombo();
dsCountry = [{
txtCountry: "3Delta Level 3",
valCountry: "Ta"
}, {
txtCountry: "Account Updater",
valCountry: "Au"
}, {
txtCountry: "DCC",
valCountry: "Dc"
}];
dsCascChargetype = [{
keyCountry: "Ta",
txtChargetype: "ALL",
valChargetype: "AL"
}, {
keyCountry: "Ta",
txtChargetype: "3336",
valChargetype: "3336"
}, {
keyCountry: "Ta",
txtChargetype: "6064",
valChargetype: "6064"
}, {
keyCountry: "Ta",
txtChargetype: "6980",
valChargetype: "6980"
}, {
keyCountry: "Ta",
txtChargetype: "6081",
valChargetype: "6081"
}, {
keyCountry: "Au",
txtChargetype: "ALL",
valChargetype: "AL"
}, {
keyCountry: "Au",
txtChargetype: "3345",
valChargetype: "3345"
}, {
keyCountry: "Au",
txtChargetype: "3346",
valChargetype: "3346"
}, {
keyCountry: "Au",
txtChargetype: "6214",
valChargetype: "6214"
}, {
keyCountry: "Dc",
txtChargetype: "ALL",
valChargetype: "AL"
}, {
keyCountry: "Dc",
txtChargetype: "40",
valChargetype: "40"
}];
dsCascTowns = [{
keyChargetype: "NJ",
textTown: "Atlantic City",
valTown: "AtlanticCity"
}, {
keyChargetype: "NJ",
textTown: "Dover",
valTown: "Dover"
}, {
keyChargetype: "CA",
textTown: "Los Angeles",
valTown: "LosAngeles"
}, {
keyChargetype: "CA",
textTown: "San Francisco",
valTown: "San Francisco"
}, {
keyChargetype: "CA",
textTown: "San Diego",
valTown: "SanDiego"
}, {
keyChargetype: "IL",
textTown: "Chicago",
valTown: "Chicago"
}, {
keyChargetype: "NY",
textTown: "New York",
valTown: "NewYork"
}, {
keyChargetype: "NY",
textTown: "Buffalo",
valTown: "Buffalo"
}, {
keyChargetype: "FL",
textTown: "Miami",
valTown: " Miami"
}, {
keyChargetype: "FL",
textTown: "Orlando",
valTown: "Orlando"
}, {
keyChargetype: "SA",
textTown: "Sofia",
valTown: "Sofia"
}, {
keyChargetype: "SA",
textTown: "Pernik",
valTown: "Pernik"
}, {
keyChargetype: "PV",
textTown: "Plovdiv",
valTown: "Plovdiv"
}, {
keyChargetype: "PV",
textTown: "Asenovgrad",
valTown: "Asenovgrad"
}, {
keyChargetype: "V",
textTown: "Varna",
valTown: "Varna"
}, {
keyChargetype: "V",
textTown: "Kavarna",
valTown: "Kavarna"
}, {
keyChargetype: "V",
textTown: "Balchik",
valTown: "Balchik"
}, {
keyChargetype: "Y",
textTown: "Yambol",
valTown: "Yambol"
}, {
keyChargetype: "Y",
textTown: "Kermen",
valTown: "Kermen"
}, {
keyChargetype: "Y",
textTown: "Elhovo",
valTown: "Elhovo"
}, {
keyChargetype: "Y",
textTown: "Bolyarovo",
valTown: "Bolqrovo"
}, ];
$(function() {
$("#comboCountry").igCombo({
textKey: "Product",
valueKey: "Product",
dataSource: getProductForCombo(),
selectionChanged: function(evt, ui) {
var filteredCascChargetype = [];
if (ui.items && ui.items[0]) {
var itemData = ui.items[0].data;
/*if (itemData.Pvalue == "US") {
$("#state").css("display", "none");
$("#Chargetype").css("display", "block");
} else {
$("#state").css("display", "none");
$("#Chargetype").css("display", "block");
} */
filteredCascChargetype = array_return1.filter(function(Chargetype) {
return Chargetype.Product == itemData.Product;
});
}
var $comboChargetype = $("#comboChargetype");
$comboChargetype.igCombo("deselectAll", {}, true);
$comboChargetype.igCombo("option", "dataSource", filteredCascChargetype);
$comboChargetype.igCombo("dataBind");
var disableChildCombo = filteredCascChargetype.length == 0;
$comboChargetype.igCombo("option", "disabled", disableChildCombo);
},
itemsRendered: function(evt, ui) {
ui.owner.deselectAll();
}
});
$("#comboChargetype").igCombo({
valueKey: "Chargetype",
textKey: "Chargetype",
dataSource: [],
allowCustomValue: true,
disabled: true,
filteringCondition: "startsWith",
multiSelection: {
enabled: true
}
});
/* selectionChanged: function(evt, ui) {
var filteredCascTown = [];
if (ui.items && ui.items[0]) {
var itemData = ui.items[0].data;
var filteredCascTown = dsCascTowns.filter(function(town) {
return town.keyChargetype == itemData.valChargetype;
});
}
var $comboTown = $("#comboTown");
$comboTown.igCombo("deselectAll");
$comboTown.igCombo("option", "dataSource", filteredCascTown);
$comboTown.igCombo("dataBind");
var disableChildCombo = filteredCascTown.length == 0;
$comboTown.igCombo("option", "disabled", disableChildCombo);
}
});
$("#comboTown").igCombo({
valueKey: "valTown",
textKey: "textTown",
disabled: true
});
/* $("#comboTable").igCombo({
valueKey: "value",
textKey: "value",
dataSource: getProductForCombo()
}); */
/* $("#comboChargeType").igCombo({
valueKey: "value",
textKey: "value",
dataSource: getProductForCombo()
}); */
function getProductForCombo()
{
var array_return = [];
$(".table__product td:nth-child(1)").each(function(){
array_return.push({ "Product" : $(this).html(), "valProduct" : $(this).html() });
});
return array_return;
}
getProductForCombo();
});
});
</script>
</head>
<body>
<table class="table__product">
<tr>
<th>Product</th>
<th>Chargetype</th>
<th>Description</th>
</tr>
<tr>
<td>Apple</td>
<td>3384</td>
<td>iPhone</td>
</tr>
<tr>
<td>Samsung</td>
<td>8800</td>
<td>Galaxy</td>
</tr>
<tr>
<td>LG</td>
<td>8684</td>
<td>V20</td>
</tr>
<tr>
<td>Google</td>
<td>8179</td>
<td>Pixel</td>
</tr>
<tr>
<td>Google</td>
<td>1</td>
<td>Pixel</td>
</tr>
<tr>
<td>Blackberry</td>
<td>4554</td>
<td>Storm</td>
</tr>
<tr>
<td>Motorolla</td>
<td>6764</td>
<td>Z force</td>
</tr>
</table>
<div class="group-container overHidden" id="before">
<IFRAME class="frame" id=iframe1 name="iframe1" style="display: none" src="about:blank"></IFRAME>
<form method="post" target="iframe1" action="SubmitToSomeFile" id="frm" accept-charset=UTF-8 name="frm">
<div class="overHidden">
<!-- <div class="comboTable">
<div>Table</div>
<span id="comboTable"></span>
</div> -->
<!-- <div class="comboChargeType">
<div>ChargeType</div>
<span id="comboChargeType"></span>
</div> -->
<div class="comboGroup">
<div>Product</div>
<span id="comboCountry"></span>
</div>
<div class="comboGroup2">
<div id="state">
<br />
</div>
<div id="Chargetype">ChargeType</div>
<span id="comboChargetype"></span>
</div>
<!-- <div class="comboGroup">
<div>Town</div>
<span id="comboTown"></span>
</div> -->
</div>
<br>
<br>
<INPUT type="submit" class="button" name="submit" value="Run" id=button2 onClick="_submit_form();">
</form>
<!-- frame goes here -->
</div>
<div id="after" style="width:99%;border:gray 1px solid;display:none;background-color:#ccc;Padding:5px;height:100px;">Thank you</div>
<!-- Some Content After the form. -->
<script language="JavaScript">
function _submit_form(){
/**** To hide and display frame ****/
/* document.getElementById('before').style.display = 'none'; */
/* document.getElementById('after').style.display = 'block'; */
var text1 = $("#comboCountry").igCombo("text");
var text2 = $("#comboChargetype").igCombo("text");
/* To handle text for one or multiple chargetypes */
if (text2.indexOf(',') >= 0) {
document.getElementById("after").innerHTML = "Your Product is " + text1 + "! Your ChargeTypes are " + text2;
} else {
document.getElementById("after").innerHTML = "Your Product is " + text1 + "! Your ChargeType is " + text2;
}
return true
}
</script>
</body>
</html>
|
Get ComboBox selected value from a list which has two types of objects and the combobox is only showing one of them
Tag : chash , By : liquidx
Date : March 29 2020, 07:55 AM
I wish this helpful for you Don't add the names of your objects to the list. Add the actual objects themselves instead; then combobox.SelectedItem immediately contains everything you need without requiring any lookup at all, since it'll be the full object. The filling of the data: this.combobox.Items.Clear();
foreach (Vehicle veh in this.GetVehiclesList())
{
// assuming "type" is a string variable filled up by some other selected value.
if (!String.Equals(type, typeof(veh).ToString()))
continue;
this.combobox.Items.Add(veh);
}
public override String ToString()
{
return this.GetVehicleName()
}
private void combobox_SelectedIndexChanged(Object sender, EventArgs e)
{
// "as" is a "try cast": if the object is not the expected type it will become null.
this.VehicleToShow = this.combobox.SelectedItem As Vehicle;
if (this.VehicleToShow == null)
return; // maybe add code to clear UI
this.vehicle_name_textbox.Text = this.VehicleToShow.GetVehicleName();
// fill in the rest
}
|
WPF Datagrid Showing Second DB Table As ComboBox Options
Tag : chash , By : deanschang
Date : March 29 2020, 07:55 AM
I hope this helps . Here's what that combobox should end up looking like, I think. The x:Name property isn't needed. I doubt that IsEditable is needed either. <DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<ComboBox
IsEditable="True"
SelectedValuePath="Status"
DisplayMemberPath="Description"
SelectedValue="{Binding Status}"
/>
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
<Window
x:Class="blah blah"
...stuff...
>
<Window.Resources>
<CollectionViewSource
x:Key="StatusItems"
/>
</Window.Resources>
<ComboBox
x:Name="StatusCombo"
SelectedValuePath="Status"
DisplayMemberPath="Description"
ItemsSource="{Binding Source={StaticResource StatusItems}}"
/>
Dim statusCVS As CollectionViewSource = FindResource("StatusItems")
Dim com2 As String = "SELECT * FROM tmfCNCComponentStatus_threed"
Dim AdptStatus As New SqlDataAdapter(com2, con)
AdptStatus.Fill(ds, "dbo.tmfCNCComponentStatus_threed")
Dim statusRows = ds.Tables("dbo.tmfCNCComponentStatus_threed").Rows
Dim statuses As New List(Of Object)
For Each row As DataRow In statusRows
statuses.Add(New With {
.Status = CInt(row("CNCComponentStatusKey")),
.Description = CStr(row("Description"))
})
Next
statusCVS.Source = statuses
Dim statuses = From row In ds.Tables("dbo.tmfCNCComponentStatus_threed")
.Rows.Cast(Of DataRow)
Select New With {
.Status = CInt(row("CNCComponentStatusKey")),
.Description = CStr(row("Description"))
}
statusCVS.Source = statuses
SelectedValue="{Binding Status}"
item 0:
Status = 1
Description = Dog
item 1:
Status = 2
Description = Cat
SelectedValue="{Binding Status}"
|
Boards Message :
Related QUESTIONS :