Change a datatable cell value to an input text with YUI

Question

Change a datatable cell value to an input text with YUI

265 views Asked by Ismail At 24 March 2020 at 16:10

I'm working on a project with a javascript library YUI and JSP. I'm trying to manipulate a YUI datatable, some cells of the table are select options and input text: What I'm trying to do is to manipulate the options of the select options input dynamically at runtime:

First, this is the declaration of the datatable:

var CustomSelectCellEditor = Y.Component.create({

     NAME: 'CustomSelectCellEditor',

     ATTRS: {
         multiple: {
             value: false,
             validator: Y.Lang.isBoolean
         },
         strings: {
             value: {
                 edit: 'Edit',
                 save: 'OK',
                 cancel: 'Annuler'
             }
         }
     },

     EXTENDS: Y.BaseOptionsCellEditor,

     UI_ATTRS: ['multiple'],

     prototype: {
         ELEMENT_TEMPLATE: '<select class="celleditor-element error-field"></select>',...

var ruleTypeCreateColumns = [{editor: new CustomSelectCellEditor({editable: false,options: types}), ...

var newRulesTable = new Y.DataTable({
        columns : ruleTypeCreateColumns,
        width: "80%",
        editable: true,
        editEvent: 'click'
    });

the datatable will look like, a datatable with input cells, the input editor appears in a click event:

At runtime, I tried to change the editor, for example from select options to input text, according to the input of the first column:

newRulesTable.after('*:criteriaTypeChange', function(o){
        for(var i=0; i<newRulesTable.data.size();i++) {
            if(newRulesTable.data.item(i).get('criteriaType') == getTypes().date) {
                // TODO HERE
            }
        }
    });

After many attempts, I couldn't reach my goal, so I need to know which object should I change?

Original Q&A

There are 1 answers

**bacemkratos** · Answer 1 · 2020-03-26T17:05:03+00:00

manipulating data in runtime is a hinder when using native JavaScript, unlike famous libraries like angular , react that updates automatically your view when your data change ( two ways binding) , in native JavaScript you should implement this logic manually via listeners and pure code:

Here a simple example we want to update our select option when we click on the button

<!DOCTYPE html>
<html lang="en" xml:lang="en">

<head>
    <title>an example </title>
    <meta content="text/html; charset=utf-8" />
</head>

</div>

<body>
    <h1>
        This is a dynamic select
    </h1>
    <div id="select-container">
        <button id="button">Change Select Dynamiclly</button>
        <select id="select" name="pets" id="pet-select">
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
        </select>
    </div>
    <script>
        const button = document.querySelector("#button");
        button.addEventListener("click", event => {
            window.alert('Content has been changed !')
            changeContent();
        });
        var changeContent = function () {
            var animals = ["Fish","Horse","Pig"]
            const select = document.querySelector("#select");
            for (var i = 0; i < animals.length; i++) {
                var opt = document.createElement('option');
                opt.value = animals[i];
                opt.innerHTML = animals[i];
                select.appendChild(opt);
            }
        }

    </script>
</body>

</html>

idon't really know how YUI library work but i hope this will help you a little.

TechQA.

Change a datatable cell value to an input text with YUI

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in JSP

Related Questions in YUI

Popular Questions

Popular Tags

Trending Questions