"Enhance your Handsontable experience with customizable dropdowns allowing for multiple

Question

"Enhance your Handsontable experience with customizable dropdowns allowing for multiple

Seeking to enhance the functionality of the handsontable plugin by enabling multiple selections in its dropdown list. Tried extending the base Editor within the library following suggestions from this resource. Spent considerable time examining the source code without much success.

Open to solutions utilizing Angular extension or native ECMA5 or 6 methods for extending the plugin.

Considered extending the framework with the provided code snippets focusing on 'multiselect' and 'Handsontable.MultiselectDropdownCell'. Implemented a modified version of the dropdown editor, but still struggling to pinpoint key areas.

 // Code snippet here...

Encountering difficulty tracing the click event when users select items in the dropdown menu. Debugging processes hindered by the Traceur tool. Attempts to capture click events within the module proved unsuccessful. Need assistance identifying where to modify code for supporting multiple selections.

Fiddle: http://jsfiddle.net/tjrygch6/

Any help would be greatly appreciated. Thank you!

javascript angularjs drop-down-menu multi-select handsontable

Answer 1

Answer №1

Glad I could assist you. It took some time for me to go through the API and customize the code :)

I utilized sample code from the latest version of the Handsontable library and made a few tweaks.

There may be some bugs present since this is just a prototype, so feel free to edit and enhance it further.

Unfortunately, I couldn't get the dropdownlist to be clickable. It appears to be related to z-index or other CSS properties. I trust that you will be able to figure out how to fix it. For now, you can use the keyboard to select items by holding shift for multiple selections.

The output consists of the selected options joined together with commas.

For example:

https://i.sstatic.net/k70dC.png https://i.sstatic.net/23ftW.png

To enable this functionality, add the following code after loading the Handsontable library. This will extend the cell types in your Handsontable.

(function(Handsontable) {
    var SelectEditor = Handsontable.editors.BaseEditor.prototype.extend();

    // Implement necessary methods
})(Handsontable);

To implement this, follow these steps:

var container = document.getElementById("example1");
var hot1;

hot1 = new Handsontable(container, {
    data: [
        ['2008', 'Nissan', 11],
        ['2009', 'Honda', 11],
        ['2010', 'Kia', 15]
    ],
    colHeaders: true,
    contextMenu: false,
    columns: [{}, {
        editor: 'select',
        selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda'],
        multiple: true
    } {}]
});

View a live demo here

If you wish to make changes later on, consider modifying the prepare and init methods accordingly. These methods handle configurations and rendering of the editor.

In terms of where things are located in the code, Handsontable separates cell types into editors and renders. You'll find the HTML code of the editor within the init method, while the getValue method contains the value displayed in the cell when not in edit mode.

I hope this explanation proves helpful and aligns well with your existing setup.

Answer 2

Glad I could assist you. It took some time for me to go through the API and customize the code :)

I utilized sample code from the latest version of the Handsontable library and made a few tweaks.

There may be some bugs present since this is just a prototype, so feel free to edit and enhance it further.

Unfortunately, I couldn't get the dropdownlist to be clickable. It appears to be related to z-index or other CSS properties. I trust that you will be able to figure out how to fix it. For now, you can use the keyboard to select items by holding shift for multiple selections.

The output consists of the selected options joined together with commas.

For example:

https://i.sstatic.net/k70dC.png https://i.sstatic.net/23ftW.png

To enable this functionality, add the following code after loading the Handsontable library. This will extend the cell types in your Handsontable.

(function(Handsontable) {
    var SelectEditor = Handsontable.editors.BaseEditor.prototype.extend();

    // Implement necessary methods
})(Handsontable);

To implement this, follow these steps:

var container = document.getElementById("example1");
var hot1;

hot1 = new Handsontable(container, {
    data: [
        ['2008', 'Nissan', 11],
        ['2009', 'Honda', 11],
        ['2010', 'Kia', 15]
    ],
    colHeaders: true,
    contextMenu: false,
    columns: [{}, {
        editor: 'select',
        selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda'],
        multiple: true
    } {}]
});

View a live demo here

If you wish to make changes later on, consider modifying the prepare and init methods accordingly. These methods handle configurations and rendering of the editor.

In terms of where things are located in the code, Handsontable separates cell types into editors and renders. You'll find the HTML code of the editor within the init method, while the getValue method contains the value displayed in the cell when not in edit mode.

I hope this explanation proves helpful and aligns well with your existing setup.

Answer 3

Answer №2

Impressive dedication put into this. Fast forward over a year later, and the process has become much smoother.

My successful experience using the Chosen jQuery plugin made things quite straightforward.

Check out someone's example: https://github.com/mydea/handsontable-chosen-editor

The elegance of Chosen shines through with its utilization in autocomplete alongside multiselect features. Below is the custom renderer used:

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.TextCell.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.TextCell.renderer(instance, td, row, col, prop, value, cellProperties);
    return td;
}

Followed by the setup of a specific column as shown below:

columns: [
    {},
    {},
    {type: 'numeric'},
    {type: 'dropdown', source: ['', 'NAME', 'FNB']},
    {},
    {},
    {},
    {},
    {},
    {},
    {},
    {type: 'dropdown', source: ['', 'S', 'M']},
    {},
    {},
    {
        renderer: customDropdownRenderer,
        editor: "chosen",
        width: 150,
        chosenOptions: {
            multiple: true,
            data: productData
        }
    },
    {},
    {editor: false, readOnly: true, width: 1}, 
    {editor: false, readOnly: true, width: 1}
],

Answer 4

Impressive dedication put into this. Fast forward over a year later, and the process has become much smoother.

My successful experience using the Chosen jQuery plugin made things quite straightforward.

Check out someone's example: https://github.com/mydea/handsontable-chosen-editor

The elegance of Chosen shines through with its utilization in autocomplete alongside multiselect features. Below is the custom renderer used:

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.TextCell.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.TextCell.renderer(instance, td, row, col, prop, value, cellProperties);
    return td;
}

Followed by the setup of a specific column as shown below:

columns: [
    {},
    {},
    {type: 'numeric'},
    {type: 'dropdown', source: ['', 'NAME', 'FNB']},
    {},
    {},
    {},
    {},
    {},
    {},
    {},
    {type: 'dropdown', source: ['', 'S', 'M']},
    {},
    {},
    {
        renderer: customDropdownRenderer,
        editor: "chosen",
        width: 150,
        chosenOptions: {
            multiple: true,
            data: productData
        }
    },
    {},
    {editor: false, readOnly: true, width: 1}, 
    {editor: false, readOnly: true, width: 1}
],

"Enhance your Handsontable experience with customizable dropdowns allowing for multiple

Answer №1

Answer №2

Similar questions

Exploring the world of JSON files using JavaScript

What is the best way to determine the click position on a square-shaped element?

Open the JSON file and showcase its contents using Angular

Is there a way to transform a string property into a custom type in a TypeScript array?

Does DraftJS prompt content change when focused?

Is there a way to convert various elements sharing the same class into a list of array items?

The export "hasInjectionContext" is not provided by the source file "node_modules/vue-demi/lib/index.mjs", but it is being requested in the file "node_modules/pinia/dist/pinia.mjs"

Initiate a series of tasks and await their completion using RxJS / Redux Observables

What is the best method to determine the mean score by utilizing the ID values obtained from API responses?

Unraveling the onsubmit FormObject in an HTML form within the Google Sheets Sidebar: Tips and tricks

Interactive map navigation feature using React.js

Disabling click events on a span tag in Angular 6: A step-by-step guide

Creating a stylish look for a selection of multiple menu options

Utilizing Javascript / jQuery to eliminate specific CSS styles

Issue with ng-click not triggering the $mdDialog callback

I want to utilize the "new" operator in JavaScript across multiple JavaScript files based on the class I need to implement

What could be causing my supposedly correct-looking JSON to be invalid?

Get the coordinates needed for a Google Map display

How can I resolve the issue of not returning anything ondrop in my code?

Delayed Passport Session Login