Search code examples
liferayliferay-6alloy-uiliferay-aui

How to open/show CellEditor of Alloy Datatable manually?


I'm writing a code , so that I can change column's editor manually . I'm able to set editor event on double click event ('dblClick') . When I click on cell, effect is observe on next click . What is missing ? Or How can open/show editor manually ?

My code is like .......

table.delegate('dblclick', function(e) {
    var target = e.currentTarget; 
    var model = table.getRecord(target.get('id'));
    var type = model.get('type');
    var column = this.get('columns.value'); 
    column.editor = editors[type];
    this.showCellEditor(target); 
},'tr', table);  

this.showCellEditor(target); --> this method is of YUI (Yahoo's UI) . Is any method is resemble to this one in Alloy UI ?


Solution

  • Instead of selecting an editor on the fly, why not group similar data in the same column so that the same editor can be used?

    var columns = [{
        editor: new Y.TextAreaCellEditor(),
        key: 'name'
    }, {
        editor: new Y.DateCellEditor({
            dateFormat: '%m/%d/%Y'
        }),
        key: 'birthday'
    }];
    

    If you group the data like that, then you can change the editEvent of the dataTable to dblclick like so:

    var dataTable = new Y.DataTable({
        // ...
        editEvent: 'dblclick'
    }).render('#dataTable');
    

    Here is a working example:

    YUI().use('aui-datatable', function(Y) {
    
      var columns = [{
        editor: new Y.TextAreaCellEditor(),
        key: 'name'
      }, {
        editor: new Y.DateCellEditor({
          dateFormat: '%m/%d/%Y'
        }),
        key: 'birthday'
      }];
    
      var data = [{
        birthday: '9/9/1999',
        name: 'Jonathan Smithy'
      }, {
        birthday: '10/10/1990',
        name: 'Bob Duncan'
      }];
    
      var dataTable = new Y.DataTable({
        columnset: columns,
        recordset: data,
        editEvent: 'dblclick'
      }).render('#dataTable');
    
    });
    <script src="https://cdn.rawgit.com/stiemannkj1/701826667a70997013605edcd37e92a6/raw/469fe1ae297e72a5a80eb9015003b7b04eac735e/alloy-ui-3.0.1_aui_aui-min.js"></script>
    <link href="https://cdn.rawgit.com/stiemannkj1/90be22de7f48c729b443af14796d91d3/raw/a9f35ceedfac7fc0559b121bed105eaf80f10bf2/aui-css_css_bootstrap.min.css" rel="stylesheet"></link>
    
    
    <div id="dataTable"></div>

    If you must dynamically choose and display the editor, I'd recommend taking a look a the getEditor(record, column) method of A.DataTable.CellEditorSupport. I was unable to get getEditor() to work, but I'd assume that if you can get it working, you could do something like getEditor(data[1], column[0]).show().