Select All option for filtered value doesn't work

4 posts, 0 answers
  1. Maja
    Maja avatar
    4 posts
    Member since:
    Aug 2016

    Posted 05 Oct 2016 Link to this post

    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!

     

     

     

     

  2. Maja
    Maja avatar
    4 posts
    Member since:
    Aug 2016

    Posted 06 Oct 2016 in reply to Maja Link to this post

    I reproduce it here:

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

  3. Maja
    Maja avatar
    4 posts
    Member since:
    Aug 2016

    Posted 06 Oct 2016 Link to this post

    New fixed link for Dojo:

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

  4. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3717 posts

    Posted 07 Oct 2016 Link to this post

    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.
     
Back to Top