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

Select All option for filtered value doesn't work

3 Answers 215 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Maja
Top achievements
Rank 1
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

Sort by
0
Maja
Top achievements
Rank 1
answered on 06 Oct 2016, 06:17 AM

I reproduce it here:

http://dojo.telerik.com/UQUdu/3

0
Maja
Top achievements
Rank 1
answered on 06 Oct 2016, 07:40 AM

New fixed link for Dojo:

http://dojo.telerik.com/UQUdu/6

0
Georgi Krustev
Telerik team
answered on 07 Oct 2016, 08:25 AM
Hello Maja,

The widget throws an exception because it is not marked as `filtered`. Check this how to demo that demonstrates how to filter widget manually:

http://docs.telerik.com/kendo-ui/controls/editors/multiselect/how-to/filter-datasource-manually

Regards,
Georgi Krustev
Telerik by Progress
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
Tags
MultiSelect
Asked by
Maja
Top achievements
Rank 1
Answers by
Maja
Top achievements
Rank 1
Georgi Krustev
Telerik team
Share this question
or