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:
<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, dsDistrictBGCascading;
dsCountry = [{
txtCountry: "3Delta Level 3",
valCountry: "Ta"
}, {
txtCountry: "Account Updater",
valCountry: "Au"
}, {
txtCountry: "DCC",
valCountry: "Dc"
}];
dsCascDistrict = [{
keyCountry: "Ta",
txtDistrict: "ALL",
valDistrict: "AL"
}, {
keyCountry: "Ta",
txtDistrict: "3336",
valDistrict: "3336"
}, {
keyCountry: "Ta",
txtDistrict: "6064",
valDistrict: "6064"
}, {
keyCountry: "Ta",
txtDistrict: "6980",
valDistrict: "6980"
}, {
keyCountry: "Ta",
txtDistrict: "6081",
valDistrict: "6081"
}, {
keyCountry: "Au",
txtDistrict: "ALL",
valDistrict: "AL"
}, {
keyCountry: "Au",
txtDistrict: "3345",
valDistrict: "3345"
}, {
keyCountry: "Au",
txtDistrict: "3346",
valDistrict: "3346"
}, {
keyCountry: "Au",
txtDistrict: "6214",
valDistrict: "6214"
}, {
keyCountry: "Dc",
txtDistrict: "ALL",
valDistrict: "AL"
}, {
keyCountry: "Dc",
txtDistrict: "40",
valDistrict: "40"
}];
dsCascTowns = [{
keyDistrict: "NJ",
textTown: "Atlantic City",
valTown: "AtlanticCity"
}, {
keyDistrict: "NJ",
textTown: "Dover",
valTown: "Dover"
}, {
keyDistrict: "CA",
textTown: "Los Angeles",
valTown: "LosAngeles"
}, {
keyDistrict: "CA",
textTown: "San Francisco",
valTown: "San Francisco"
}, {
keyDistrict: "CA",
textTown: "San Diego",
valTown: "SanDiego"
}, {
keyDistrict: "IL",
textTown: "Chicago",
valTown: "Chicago"
}, {
keyDistrict: "NY",
textTown: "New York",
valTown: "NewYork"
}, {
keyDistrict: "NY",
textTown: "Buffalo",
valTown: "Buffalo"
}, {
keyDistrict: "FL",
textTown: "Miami",
valTown: " Miami"
}, {
keyDistrict: "FL",
textTown: "Orlando",
valTown: "Orlando"
}, {
keyDistrict: "SA",
textTown: "Sofia",
valTown: "Sofia"
}, {
keyDistrict: "SA",
textTown: "Pernik",
valTown: "Pernik"
}, {
keyDistrict: "PV",
textTown: "Plovdiv",
valTown: "Plovdiv"
}, {
keyDistrict: "PV",
textTown: "Asenovgrad",
valTown: "Asenovgrad"
}, {
keyDistrict: "V",
textTown: "Varna",
valTown: "Varna"
}, {
keyDistrict: "V",
textTown: "Kavarna",
valTown: "Kavarna"
}, {
keyDistrict: "V",
textTown: "Balchik",
valTown: "Balchik"
}, {
keyDistrict: "Y",
textTown: "Yambol",
valTown: "Yambol"
}, {
keyDistrict: "Y",
textTown: "Kermen",
valTown: "Kermen"
}, {
keyDistrict: "Y",
textTown: "Elhovo",
valTown: "Elhovo"
}, {
keyDistrict: "Y",
textTown: "Bolyarovo",
valTown: "Bolqrovo"
}, ];
$(function() {
$("#comboCountry").igCombo({
textKey: "txtCountry",
valueKey: "valCountry",
dataSource: dsCountry,
selectionChanged: function(evt, ui) {
var filteredCascDistrict = [];
if (ui.items && ui.items[0]) {
var itemData = ui.items[0].data;
if (itemData.valCountry == "US") {
$("#state").css("display", "none");
$("#district").css("display", "block");
} else {
$("#state").css("display", "none");
$("#district").css("display", "block");
}
filteredCascDistrict = dsCascDistrict.filter(function(district) {
return district.keyCountry == itemData.valCountry;
});
}
var $comboDistrict = $("#comboDistrict");
$comboDistrict.igCombo("deselectAll", {}, true);
$comboDistrict.igCombo("option", "dataSource", filteredCascDistrict);
$comboDistrict.igCombo("dataBind");
var disableChildCombo = filteredCascDistrict.length == 0;
$comboDistrict.igCombo("option", "disabled", disableChildCombo);
},
itemsRendered: function(evt, ui) {
ui.owner.deselectAll();
}
});
$("#comboDistrict").igCombo({
valueKey: "valDistrict",
textKey: "txtDistrict",
dataSource: [],
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.keyDistrict == itemData.valDistrict;
});
}
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
});
});
});
</script>
</head>
<body>
<table border cellpadding="1">
<tr>
<td colspan="2">
<table cellpadding="0" width="100%">
<tr>
<td>PAGE 1</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="bottom">PRODUCT</td>
<td align="right" valign="bottom">CHARGETYPE</td>
</tr>
<tr>
<td>Google</td>
<td align="right">5954</td>
</tr>
<tr>
<td></td>
<td align="right">5456</td>
</tr>
<tr>
<td></td>
<td align="right">9057</td>
</tr>
<tr>
<td></td>
<td align="right">5658</td>
</tr>
<td>Apple</td>
<td align="right">5254</td>
</tr>
<tr>
<td></td>
<td align="right">5136</td>
</tr>
<tr>
<td></td>
<td align="right">6757</td>
</tr>
<tr>
<td></td>
<td align="right">6158</td>
</tr>
<td>Samsung</td>
<td align="right">5884</td>
</tr>
<td></td>
<td align="right">0096</td>
</tr>
<tr>
<td></td>
<td align="right">7777</td>
</tr>
<tr>
<td></td>
<td align="right">8181</td>
</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="comboGroup">
<div>Product</div>
<span id="comboCountry"></span>
</div>
<div class="comboGroup2">
<div id="state">
<br />
</div>
<div id="district">ChargeType</div>
<span id="comboDistrict"></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 = $("#comboDistrict").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>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>