This is a migrated thread and some comments may be shown as answers.

Select All option for filtered value doesn't work

3 Answers 612 Views

MultiSelect

This is a migrated thread and some comments may be shown as answers.

Maja asked on 05 Oct 2016, 07:33 AM

I have a problem with select all options for filtered value.

First, I cascade from dropdown

function KendoPartnerDropdown(selector, data, textVal, value){
$(selector).kendoDropDownList({
dataTextField: textVal,
dataValueField: value,
dataSource: data,
change:filterMultiSelect
});


}

function filterMultiSelect(){
var PartnerDropdown = $("#partner").data("kendoDropDownList");
var multiSelectBox = $("#portfoliosMultiSelect").data("kendoMultiSelect");
var partnerIndex = PartnerDropdown.dataItem().PartnerIndex;
var filters = buildMultiselectFilters(partnerIndex);

if(filters.length === 0){
multiSelectBox.dataSource.filter({});
multiSelectBox.value(getMultiselectValues(filteredDataValues(multiSelectBox.dataSource.data())));

}else{
multiSelectBox.tagList.empty();
multiSelectBox.dataSource.filter(filters);
// view() shows filtered data for multiselect.
var filterdata = multiSelectBox.dataSource.view();
//setting default value (depending on filtering)
multiSelectBox.value(getMultiselectValues(filteredDataValues(filterdata)));
}

updateMultiSelectCheckAllElementState();
}


function buildMultiselectFilters(partnerIndex) {
var filters = [];
if (partnerIndex !== 0){
filters.push({ field: "PartnerIndex", operator: "eq", value: partnerIndex });
}
if (!$("#showClosedCheckbox").is(":checked")){
filters.push({field:"CloseDate", operator: "neq", value: null});
}
return filters;
}

and then in multiselect is shown only corresponding filtered values.

Multiselect looks like this:

function kendoPortfolioMultiSelect(selector, data, textVal, value) {

$(selector).kendoMultiSelect({
dataTextField: textVal,
dataValueField: value,
placeholder: "Select portfolio/s",
dataSource: data,
headerTemplate: '<div class="dropdown-header k-widget k-header">' +
'<span>ALL</span>' +
'<span> <input type="checkbox" id="checkAll" checked onclick="toggleCheckAllState()"></span>' +
'</div>',
itemTemplate: '#:data.Number#<input type="checkbox" onclick = "multiselectItemClick(#:data.Index#)" class="multiSelectPortfolios" checked/></span>',
tagTemplate: ` # if (values.length < 2) { #
# for (var idx = 0; idx < values.length; idx++) { #
#:data.dataItems[idx].Number#
# } #
# } else { #
#:values.length# out of #:maxTotal#
# } # `,
tagMode:"single",
autoClose: false,
change: onMultiselectPortfoliosChange,
select: onSelect,
value: getMultiselectValues(data)
});
toggleCheckAllState();
showClosedClicked();

}

function onMultiselectPortfoliosChange(){
updateMultiSelectCheckAllElementState();
var currData = $("#currency").data("kendoDropDownList");
currData.value($("#portfoliosMultiSelect").data("kendoMultiSelect").value().RefCurrency);
}

function onSelect(e){
var input = e.item.children("input");
input.prop("checked", !e.item.hasClass("k-state-selected"));
updateMultiSelectCheckAllElementState();
}

function filteredDataValues(data){
var filteredDataPortf = [];
data.forEach(f=>{
filteredDataPortf.push({CloseDate:f.CloseDate, Index:f.Index, Language:f.Language, Number: f.Number, PartnerIndex:f.PartnerIndex, RefCurrency:f.RefCurrency});
})
return filteredDataPortf;
}

function onMultiselectPortfoliosChange(){
updateMultiSelectCheckAllElementState();
var currData = $("#currency").data("kendoDropDownList");
currData.value($("#portfoliosMultiSelect").data("kendoMultiSelect").value().RefCurrency);
}

function toggleCheckAllState(){
var multiSelect = $("#portfoliosMultiSelect").data("kendoMultiSelect");

if ( $("#checkAll").is( ":checked" ) ){
var filterdata = multiSelect.dataSource.view();
var newValues = getMultiselectValues(filteredDataValues(filterdata));
multiSelect.value(newValues);

$('.multiSelectPortfolios').prop("checked", true);

}else{
multiSelect.value(getMultiselectValues(filteredDataValues([])));
$('.multiSelectPortfolios').prop("checked", false);
}

multiSelect.trigger("change");
}

function multiselectItemClick(data) {
var multi = $("#portfoliosMultiSelect").data("kendoMultiSelect");

if($('.multiSelectPortfolios:checked').length === $('.multiSelectPortfolios').length){
$('#checkAll').prop('checked',true);
multi.value().splice(multi.value().length,0,data);
}else{
$('#checkAll').prop('checked',false);
var removeIndex = multi.value().indexOf(data);
multi.value().splice(removeIndex, 1);
}
}

function showClosedClicked() {
$('#checkAll').prop('checked',true);
filterMultiSelect();
}

function getMultiselectValues(data){
var values = new Array();
if (data[0] != null) {
for (var i = 0; i < data.length; i++) {
if (data[i] == null)
break;
values[i]=data[i].Index;
}
}
return values;
}

//----checking checkboxis (if it's checked)------/
function updateMultiSelectCheckAllElementState() {
var multiSelect = $("#portfoliosMultiSelect").data("kendoMultiSelect");

var items = multiSelect.ul.find("li");
$("#checkAll").prop('checked',true);
items.each(function () {
var element = $(this);
var input = element.children("input");
if (!input.prop("checked")){
$("#checkAll").prop('checked',false);
}
});

}

function toggleCheckAllState() select/deselect all item.

The things that I want:

1. when I cascade from dropdown list and get filtetred value, I want that filtered value/s is mark as selected (and ALL checkbox)

2. When I uncheck ALL from filtered multiselect and check ALL again I want that all FILTERED values are selected (this part throws me an error: Cannot read property 'Index' of undefined)

Thanks!

3 Answers, 1 is accepted

0

0

0

Tags

MultiSelect

Asked by

Answers by