mydea / handsontable-chosen-editor Goto Github PK

View Code? Open in Web Editor NEW

62.0 8.0 36.0 13 KB

Use a chosen select field in a Handsontable.

Home Page: http://mydea.github.io/handsontable-chosen-editor/

License: MIT License

JavaScript 93.92% HTML 6.08%

handsontable-chosen-editor's Introduction

Handsontable-chosen-editor

Use a chosen select field in a Handsontable.

View Demo

Dependencies

jQuery
Handsontable
Chosen
handsontable-chosen-editor.js (This is the Handsontable Editor)

Usage

 new Handsontable(document.getElementById("handsontable"), {
    data: data,
    columns: [
        {
            renderer: customDropdownRenderer,
            editor: "chosen",
            width: 150,
            chosenOptions: {
                data: [
                    {
                        id: "SPOT",
                        label: "Spot"
                    }, {
                        id: "AFLOAT",
                        label: "Afloat"
                    }, {
                        id: "PREORDER",
                        label: "Preorder"
                    }, {
                        id: "FORWARD",
                        label: "Forward"
                    }
                ]
            }
        },
        {
            renderer: customDropdownRenderer,
            editor: "chosen",
            width: 150,
            chosenOptions: {
                multiple: true,
                data: [
                    {
                        id: "1",
                        label: "Catuai"
                    }, {
                        id: "2",
                        label: "Bourbone"
                    }, {
                        id: "3",
                        label: "Geisha"
                    }
                ]
            }
        }
    ]
});
    
function customDropdownRenderer(instance, td, row, col, prop, value, cellProperties) {
    var selectedId;
    var optionsList = cellProperties.chosenOptions.data;

    if(typeof optionsList === "undefined" || typeof optionsList.length === "undefined" || !optionsList.length) {
        Handsontable.cellTypes.text.renderer(instance, td, row, col, prop, value, cellProperties);
        return td;
    }

    var values = (value + "").split(",");
    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.cellTypes.text.renderer(instance, td, row, col, prop, value, cellProperties);
    return td;
}

Basically, use "chosen" as editor and customDropdownRenderer as renderer. In the chosenOptions, you can set multiple: true if you want to have a multiple select. The data property has to be an array consisting of objects with an id and a label field. You can also use a different renderer. The example renderer (customDropdownRenderer) will simply output a comma separated list of the appropriate labels.

handsontable-chosen-editor's People

Contributors

Stargazers

Watchers

handsontable-chosen-editor's Issues

Trying to use on cells function

Hi,

I'm trying to use this plugin on cells functions, that way:

` cells: (row, col, prop) => {
let cellMeta = {};

    if (row === 0) {
        // cellMeta.type = 'dropdown';
        // cellMeta.source = _.map(this.metalayerFields, (field) => field.alias);
        cellMeta = {
          renderer: this.customDropdownRenderer,
          editor: 'chosen',
          width: 150,
          chosenOptions: {
            data: _.map(this.metalayerFields, (field) => {
              return { id: field.id, label: field.alias };
            })
          }
        };
        cellMeta.className = 'first-row-blue';
    } else if (row === 1) {
      cellMeta.readOnly = true;
      cellMeta.className = 'second-row-grey';
    }

    return cellMeta;
  }`

But I'm having this error:

Uncaught Error: No editor registered under name "chosen"

Any help? Thanks.

Copy cell data

Is it possible to copy cell label instead of the value? I have a dropdown with numeric id as a value and it has text label which is displayed in the cell. But when I copy cell text it copies numeric value.

focus problems

value: function focus() {
// Add an empty space to texarea. It is necessary for safari to enable "copy" command from menu bar.
this.mainElement.value = ' ';
this.mainElement.select();
}

In version 4.0.0 they updated this function and it causes this TypeError: this.mainElement.select is not a function when you focus cell which is using this editor.

Any idea how to fix it please?

how can i use copy AND paste function?

when i use this editor, the copy and paste will not work? how can i deal with this condition ? Please

Getting error when trying to use remove_col

sorry

Is it possible to have a default selected value?

Is it possible to have a value already selected when the table loads? I am getting data from the database and if there is a matching value with one of the dropdown values, I want to display it. Can this be achieved? How can this be done?

License

Hi Mydea,

Could you tell me under what license your code exists?

Thanks in advance

Uncaught TypeError: Cannot read property 'renderer' of undefined at customDropdownRenderer

I am using latest Handsontable and I have this error at
Handsontable.TextCell.renderer(instance, td, row, col, prop, value, cellProperties);

It was working with older versions of Handsontable though.

I want to use this plugin in angular, can you update an angular version,thanks.

error in angular v14 and handsontable 12.1

I want to use this plugin in angular, can you update an angular version,thanks.

Save data

Hi guys !

I try to work with your nice plugin but i have one question. How it's possible to save data with the id and not the label ?

If you do : hot.getData() you have the label, not the id.

Thanks 👍

Custom value and update value in javascript

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

Is it possible to ARROW_DOWN after select a option

Is it possible to ARROW_DOWN after select a option?
Just like you enter a text and pressed "enter" in a cell.

Dropdown menu hidden past edge

I'm trying to use this plugin to make a multiple-select dropdown for my table, but it won't go beyond the edge of the Handsontable:

This is in contrast to the demo, in which the dropdown goes beyond the table without trouble.

I tried messing with the Z-index but that didn't seem to fix anything.

Not working in the handsontable new versions

This plugin is not working after upgrading my handsontable to the latest version (9.0.1).

How to apply this in Vue

Hello,

Thanks so much for the creators for this repo.

I'm trying to apply this in a Vue project, can anyone plz help ?

Thanks in advance.