1
0
-1

Hi Team I have a form with a spreasheet whith two fields that work with cascading Drop down dependency between thems  Spreadsheet Cascading Drop-Down List , in other hand I'm trying to hide values to avoid duplicates in the second column as explain this note Spreadsheet Hide Selected Value from Cascading Drop-Down List  , but I doesn't working , it work very well only if I use it in the first column .

I suspect that the problem is becuase the second field type DropDown has a AJAX and the behavior is different to  the first field type DropDown without dependency. 




Debugging the JS code I note this:


  1. I get the error message Uncaught TypeError: data.source.indexOf is not a function
        at removeSource (

       2. The source variable which store the values from the column number 1 have this values  :

             function(query,process){var selected=hot.getSelected()[0];var row=selected[0];var col=selected[1];var meta=hot.getCellMeta(row,col);var o=meta.ajaxSourceOptions;var cf=o.OPTIONS_AJAX_CONTROL_FIELD.split(";");var cv="";for(var i in cf){if(cv!==""){cv+=";";}
cv+=hot.getDataAtRowProp(row,cf[i]);}
if(meta.ajaxControlValue===cv){var labels=[];for(var i=0;i<meta.keyOptions.length;i++){labels.push(meta.keyOptions[i].label.trim());}
process(labels);}else{$.getJSON(args.contextPath+"/web/json/app/"+o.OPTIONS_AJAX_APP_ID+"/"+o.OPTIONS_AJAX_APP_VERSION+"/form/options",{_dv:cv,_n:o.OPTIONS_AJAX_NONCE,_bd:o.OPTIONS_AJAX_BINDER_DATA},function(data){var labels=[];var keyOptions=[];for(var i=0,len=data.length;i<len;i++){labels.push(data[i].label.trim());keyOptions.push({value:data[i].value,label:data[i].label.trim()});}
hot.setCellMeta(row,col,"ajaxControlValue",cv);hot.setCellMeta(row,col,"keyOptions",keyOptions);process(labels);});}}


This is the JS code:


<script type="text/javascript">
    $(function(){
            var orig_pool = []; // we will keep a copy of "removed" element for restoring later
            var hot = FormUtil.getField("lista_deproductos").data("hot");
           console.log(hot);

source = hot.getSettings()['columns'][1]['source']; // we get all the dropdown option from column #1 of the table ("Continent"), call it "source"
            
                                                                 
            console.log("Fisrt Source:  " + source);
            hot.addHook('afterChange', function(change,type){   // set a hook / event listener to trigger after any change on the table
                if(type == 'edit'){ // if the change type is of type "edit", we proceed
                    data = {    // prepare the data object
                        source : source,
                        change : change,
                        orig_pool : orig_pool
                    }
                    if(change[0][3] != ''){ removeSource(data); }   // if the changed value is not empty, we remove the data from the "source"
                    else{ addSource(data); }    // otherwise, the change value is empty, meaning it is removed from the table
                                                // we need to add it back to the "source"
                                                //console.log("Source: " + source);
                }
            })
           
    })
     
    function removeSource(data){
        slice_index = data.source.indexOf(data.change[0][3]);   // find the index of the continent in the "source" array
        data.orig_pool.push(data.source.slice(slice_index,slice_index + 1)); // copy this value to our "original pool" of country
                                                                             // for use later in addSource()
        data.source.splice(data.source.indexOf(data.change[0][3]),1);   // splice the value out from "source" array
    }
     
    function addSource(data){
        data.orig_pool.splice(data.source.indexOf(data.change[0][2]),1) // splice the value out from "original pool" array
        if(data.change[0][2] != ''){    // if the initial value of the cell is not empty,
            data.source.push(data.change[0][2]);    // we add the value back to "source" array
            data.source.sort(); // sort the source array so it looks nice.
        }
    }
</script>


    CommentAdd your comment...

    1 answer

    1.  
      1
      0
      -1

      Hi, do check the lates update in the KB :  Spreadsheet Hide Selected Value from Cascading Drop-Down List
      I think the sample app and this KB initially caters for the continent column ONLY. Hence the reason why it works very well only if I use it in the first column .


      Ive checked the latest KB and notice the sample app and KB has catered for multi column now.Which the Continent and Climate columns 
      Best for you to try on your end and adjust the script accordingly based on your preferences.

        CommentAdd your comment...