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 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 in reply to Maja Link to this post

    I reproduce it here:

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

  3. Kendo UI is VS 2017 Ready
  4. Maja
    Maja avatar
    4 posts
    Member since:
    Aug 2016

    Posted 06 Oct Link to this post

    New fixed link for Dojo:

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

  5. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 07 Oct 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
Kendo UI is VS 2017 Ready