Skip to content

Instantly share code, notes, and snippets.

@saltavenger

saltavenger/jsbin.qiwep.css

Created March 24, 2014 20:53
Show Gist options
  • Save saltavenger/9748931 to your computer and use it in GitHub Desktop.
Save saltavenger/9748931 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.qiwep.css
.disabled{
color: #ccc;
}
Raw
jsbin.qiwep.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="cascading kendo multi-selects" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<label for="letter" class="label">Letters</label> <select id="letter" name="letter" class="kendoInput" multiple></select>
<label for="number" class="label disabled">Numbers</label>
<select id="number" name="number" class="kendoInput" multiple></select>
<label for="roman" class="label disabled">Roman Numerals</label> <select id="roman" name="roman" class="kendoInput" multiple></select>
</body>
</html>
Raw
jsbin.qiwep.js
var numberArray = {
"A": [
{ text: "1", value: "1"},
{ text: "2", value: "2"}
],
"B": [
{ text: "1", value: "1"},
{ text: "2", value: "2"},
{ text: "3", value: "3"}
],
"C": [
{ text: "2", value: "2"}
]
};
var romanArray = {
"1": [
{ text: "II", value: "II" },
{ text: "III", value: "III" }
],
"2": [
{ text: "I", value: "I" },
{ text: "II", value: "II" }
]
};
function updateCascade1(value){
//value = letter names, cascadeSource = array for kendo data
var cascadeSource = [];
if(value !== undefined && value !== null){
var multiArray = [];
//if one letter is chosen
if(value.length === 1){
//enable number multiselect
$('label[for="number"]').removeClass('disabled');
$("#number").data("kendoMultiSelect").enable();
cascadeSource = numberArray[value];
$('#number').data('kendoMultiSelect').setDataSource(cascadeSource);
}
//if more than one letter is chosen
else{
//disable and clear values number and roman
$('#number').data('kendoMultiSelect').setDataSource(cascadeSource);
$('label[for="number"]').addClass('disabled');
$('label[for="roman"]').addClass('disabled');
$("#number").data("kendoMultiSelect").value([]);
$("#roman").data("kendoMultiSelect").value([]);
$("#number").data("kendoMultiSelect").enable(false);
$("#roman").data("kendoMultiSelect").enable(false);
}
}
else{
//disable and clear values number and roman
$('#number').data('kendoMultiSelect').setDataSource(cascadeSource);
$('label[for="number"]').addClass('disabled');
$('label[for="roman"]').addClass('disabled');
$("#number").data("kendoMultiSelect").value([]);
$("#roman").data("kendoMultiSelect").value([]);
$("#number").data("kendoMultiSelect").enable(false);
$("#roman").data("kendoMultiSelect").enable(false);
}
}
function uniqueTest(arr) {
var n, i, r;
var arrResult = {},
unique = [];
//for object in array
for (i = 0, n = arr.length; i < n; i++) {
var item = arr[i];
/*take arrays in original array objects
* adds to new object in arrResult using text and value,
* if text and value are unique it creates a new object with the array,
* if duplicate it overwrites the contained array-- which doesn't matter because it's a duplicate.
*/
arrResult[item.text + " - " + item.value] = item;
}
i = 0;
for (item in arrResult) {
//takes text,value arrays out of objects and stores them in a new array "unique"
unique[i++] = arrResult[item];
}
return unique;
}
function updateCascade2(value){
//value = number names, cascadeSource = array for kendo data
var cascadeSource = [];
//clear roman input
$("#roman").data("kendoMultiSelect").value([]);
if(value !== undefined && value !== null){
//enable roman multiselect
$('label[for="roman"]').removeClass('disabled');
$("#roman").data("kendoMultiSelect").enable();
var multiArray = [];
//if one number is chosen
if(value.length === 1){
cascadeSource = romanArray[value];
if(cascadeSource !== undefined){
$('#roman').data('kendoMultiSelect').setDataSource(cascadeSource);
}
//if number isn't in the roman array
else{
cascadeSource = [];
$('#roman').data('kendoMultiSelect').setDataSource(cascadeSource);
}
}
//if more than one chosen
else{
//how many numbers
var howMany = value.length;
var count = 0;
var prevArray = [];
while(howMany > 0){
//get array based on index
var multiValue = value[count];
multiArray = romanArray[multiValue];
if(multiArray !== undefined){
//concatinate current array with previous array and add to datasource
cascadeSource = multiArray.concat(prevArray);
prevArray = multiArray;
}
howMany -= 1;
count ++;
}
//run unique test to get rid of duplicate objects
cascadeSource = uniqueTest(cascadeSource);
$('#roman').data('kendoMultiSelect').setDataSource(cascadeSource);
}
}
else{
//disable and clear roman multiselect
$('#roman').data('kendoMultiSelect').setDataSource(cascadeSource);
$('label[for="roman"]').addClass('disabled');
$("#roman").data("kendoMultiSelect").enable(false);
}
}
$(document).ready(function(){
$('#letter').kendoMultiSelect({
dataTextField: 'text',
dataValueField: 'value',
dataSource: [
{ text: "A", value: "A"},
{ text: "B", value: "B"},
{ text: "C", value: "C"}
],
change: function(e){
//on change retrieve values for numbers
updateCascade1($('#letter').val());
//refresh numbers multiselect
$('#number').data('kendoMultiSelect').refresh();
},
suggest: true
});
$('#number').kendoMultiSelect({
dataTextField: 'text',
dataValueField: 'value',
suggest: true,
enable: false,
change: function(e){
updateCascade2($('#number').val());
$('#roman').data('kendoMultiSelect').refresh();
}
});
$('#roman').kendoMultiSelect({
dataTextField: 'text',
dataValueField: 'value',
suggest: true,
enable: false
});
});
@saltavenger
Copy link
Author

cascading kendo multi-selects

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment