Change a datatable cell value to an input text with YUI

Question

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?

Answer 1

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.

Change a datatable cell value to an input text with YUI

Question

1 answers

solution1
1 2020-03-26 17:05:03

Change a datatable cell value to an input text with YUI

Question

1 answers

solution1 1 2020-03-26 17:05:03

solution1
1 2020-03-26 17:05:03