Mvc Multiselect component and checkbox

Posted by: info on 3 May 2021, 8:22 pm EST

    • Post Options:
    • Link

    Posted 3 May 2021, 8:22 pm EST

    Hi I’m facing a weird problem trying to check via javascript a multiselect component:

    
    // ms is the multiselect object
        function setClasseProdottoPostback(ms, s){
            if ( ms == null || s == ''  ){
                return false;
            }
            var k = s.split('|');
            if ( k.lentgh < 1 ){
                return false;
            }
            var cv = ms.collectionView;
            if ( cv == null) return false;
            if ( cv.items.length < k.length) return false; // error
            for(var i=0; i<k.length; i++) {
                for (var j = 0; j < cv.items.length; j++){
                    if ( cv.items[j].Codice == k[i] ) {
                        cv.items[j].$checked = true;
                        break;
                    }
                }
            }
            ms.invalidate();
            return true;
        }
    /// the Html helper: ///
                                <div class="col-md-5" style="margin-top:7px">
                                    @(Html.C1().MultiSelect()                                    
                                        .Id("msClasseProdotto")
                                        .Placeholder("Selezionare le classi prodotto")
                                        .HeaderFormat("{count} selezionati")
                                        .Bind(Model.ClasseMerceologicaList).Width(320)
                                        .DisplayMemberPath("Descrizione")
                                        .SelectedValuePath("Codice")
                                        .CheckedIndexes(arr_clp)
                                        .IsEditable(false)
                                        .IsRequired(false)
                                        .OnClientSelectedIndexChanged("cb_ClasseProdIndexChanged")
                                        .OnClientCheckedItemsChanged("cb_ClasseProdCheckedChanged")
                                    //.ItemFormatter("cb_ClasseProdItemFormatter")
                                    )
    
                                </div>
    
    
    

    It seems that multiselect ignore javascript code setting property item.$checked=true of an item. My items recordset has not field for checkbox. As a workaround I used “CheckIndexes()” method and c# code to create an int array for it, but this works only for postback.

    I remind that old component (2019) worked fine.

    What I’m missing?

  • Posted 5 May 2021, 12:34 am EST

    Hello,

    To implement the above requirement, we may perform the following:

    To check the checkboxes, we may add $checked = true (or the property defined in CheckedMemberPath of multiSelect) property to the given object in sourceCollection of collectionView.

    To add the given items in the selected items list, we may have to add the given object in the checkedItems property of multiSelect.

    Once, we have performed the above operations, we may refresh the collectionView using the refresh() method, which will update the changes in control.

    Please refer to the below code snippet:

     function updateCheckBox(e) {
            let itr;
            let model = @Html.Raw(Json.Encode(Model));
            let control = wijmo.Control.getControl('#multiSelect');
            cvItems = control.collectionView.sourceCollection;
    
            if (e.target.id == "oddCheck") {
                itr = 0;
            }
            else if (e.target.id == "evenCheck") {
                itr = 1;
            }
            else
            {
                for (itr = 0; itr < cvItems.length; itr++) {
                    delete cvItems[itr].selected;
                }
                control.checkedItems.splice(0, control.checkedItems.length);
    
                document.querySelector('#evenCheck').removeAttribute("disabled");
                document.querySelector('#oddCheck').removeAttribute("disabled");
    
                control.collectionView.refresh();
                return;
            }
    
            for (; itr < model.length; itr = itr + 2) {
                cvItems[itr].selected =true;
    
                model[itr].selected = true;
                control.checkedItems.push(model[itr]);
            }
            control.collectionView.refresh();
            e.target.disabled = true
    
        }
    

    Regards,

    Manish Gupta

    MultiSelect_Data_Binding__.zip

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels