mydea / handsontable-chosen-editor

Use a chosen select field in a Handsontable.
http://mydea.github.io/handsontable-chosen-editor/
MIT License
63 stars 36 forks source link

Custom value and update value in javascript #1

Open lesonunique opened 8 years ago

lesonunique commented 8 years ago

Hello,

I'm interested in your custom renderer but I just have two questions:

Is it possible to allow the user to enter a custom value (not present in the data)?

And, how can I update the values of a cell? setDataAtCell(row, col, value, source) no longer works with the custom renderer Chosen editor.

Thank you in advance. Cordially.

Vincent LEVEQUE

mydea commented 8 years ago

No, because this is a select box, it is not possible to add custom values. You could possibly do something like this manually and call this.$textarea.trigger("chosen:updated"); to trigger a rerender of the chosen field, but I am not sure how to do this in a nice way.

I would accept a PR adding setDataAtCell support - that would certainly be nice to have, I simply do not have the time to do it right now.

lesonunique commented 8 years ago

I will try to create a function like setDataAtCell for Chosen.

Do you know in which direction am I looking? At what point are added element?

Thank you

mehkar commented 7 years ago

My solution: there is no need to chosen.trigger:

function ChosenSelect(instance, td, row, col, prop, value, cellProperties) {
    var selectedId;
    var optionsList = cellProperties.chosenOptions.data;

//if exist get initial value -------------------
    if(saved_filter[prop])
        value=saved_filter[prop];
//---------------------------------------------

    var values = (value + "").split(",");
    var value = [];
    for (var index = 0; index < optionsList.length; index++) {
        if (values.indexOf(optionsList[index].id + "") > -1) {
            selectedId = optionsList[index].id;
            value.push(optionsList[index].label);
        }
    }
    value = value.join(", ");

    Handsontable.TextCell.renderer.apply(this, arguments);
}
Rolok commented 7 years ago

mydea, thanks again for having made this. I've been using it for a while now -- including using both id and value in one case. I recently had a request to allow adding values that didn't already exist. I've got something that mostly works... I modified a section of the handsontable-chosen-editor file. I'm sure you'll recognize where, from the first line of the code here.

In handsontable I pass no_results_text: 'Press Enter to add new entry:' for this column. I also put together a list of distinct values in all the columns when I first load the page, and that's the data that gets passed in.

Any/all feedback appreciated.

if(e.keyCode === Handsontable.helper.KEY_CODES.ENTER /*|| e.keyCode === Handsontable.helper.KEY_CODES.BACKSPACE*/) {
    if($(this).val()) {
        var enteredValue = $(self.TEXTAREA_PARENT).find("input").val();
        e.preventDefault(); 
        e.stopPropagation();                            
        var newValueObject = [];
        newValueObject = JSON.parse('{"id":"' + enteredValue + '","label":"' + enteredValue + '"}');                        
        var add = 1;
        var entryLength = 0;
        for ( i = 0; i < allRejectsObject.length; i++ ){
            // check to see if the new value is contained in an existing list.                          
            entryLength = enteredValue.length;
            if (entryLength <= JSON.stringify(allRejectsObject[i].id).length){
            // the id of the allRejectsObject includes double quotes, so check for 1 rather than 0 if looking for start.
                if (JSON.stringify(allRejectsObject[i].id).toLowerCase().indexOf(enteredValue.toLowerCase()) !== -1 ){
                    add = 0;
                    e.preventDefault();
                }
            }
        }
        if (add == 1) {
            allRejectsObject.push(newValueObject);
            var el = null;
            el = $("<option />");
            el.attr("value", enteredValue);
            el.html(enteredValue);
            el.attr("selected", true);
            self.$textarea.append(el);
            self.close();
            self.finishEditing();
        }       
    } else {
        e.preventDefault();
        e.stopPropagation();
        self.close();
        self.finishEditing();
    }
}
mydea commented 7 years ago

I'm sorry, but I'm currently not actively adding new features to this project. I'm willing to merge PRs though.