Jump to content

Add template to UnimDBGrid


Justin152

Recommended Posts

Hi,

 

I'm new to using uniGUI and using Sencha.  Currently I am developing an application using a UnimDBGrid and I need to add a drop down button to one of the columns.

 

I have tried a couple different approaches but none of them are quite working out.  I was hoping someone would be kind enough to see what I might be doing wrong and provide some tips.

 

My first attempt used the UniSession.AddJS call to add a new column and used the renderer procedure to add the necessary html code:

 

UniSession.AddJS('var column = Ext.create(''Ext.grid.column.Column'', { text: ''Action'', width: 70, '
    + 'renderer: function(value, metadata, record) {return ''<div class="dropdown"></div>''}});'
    + 'frmInspectEntry.gridEquipment.getHeaderContainer().insert(frmInspectEntry.gridEquipment.getColumns().length, column);'
    + 'frmInspectEntry.gridEquipment.refresh();');
 
This just shows the html as plain text in the grid. 
 action.jpg
 
For my second attempt I tried to use a template instead, but the cell just appears blank.

UniSession.AddJS('var column = Ext.create(''Ext.grid.column.Column'', { text: ''Action'', width: 70, '
    + 'xtype: ''templatecolumn'', tpl: ''<tpl><div class="dropdown"></div><tpl>''}); '
    + 'frmInspectEntry.gridEquipment.getHeaderContainer().insert(frmInspectEntry.gridEquipment.getColumns().length, column);'
    + 'frmInspectEntry.gridEquipment.refresh();');

 

  action2.jpg

 

Any guidance would be greatly appreciated

Link to comment
Share on other sites

Minor update.  I did make some progress in getting a template to apply, but it's changing my header instead of the cells themselves.  I figured out I needed to specify a data object along with the template.  None of my research shows that this should only change the header though.

 

var column = Ext.create('Ext.grid.column.Column', { text: 'Action', width: 70, xtype: 'templatecolumn',

    data: {title: 'no data'},
    tpl: '<b>Test</b>'});     
    frmInspectEntry.gridEquipment.getHeaderContainer().insert(frmInspectEntry.gridEquipment.getColumns().length, column);
    frmInspectEntry.gridEquipment.refresh();

action3.jpg

Link to comment
Share on other sites

Thanks for the information mohammad.  I've looked through the link and updated my code but something is still not right.  The template is changing my header from "Action" to "Test 2" and the html is not being properly rendered in the cells.  The header is bold so it's rendering there.  I'm not sure if there is some kind of property I need to set to fix this or what.  Any insight is appreciated.
 

var column = Ext.create('Ext.grid.column.Column', { text: 'Action', width: 70, xtype: 'templatecolumn',
    data: {},
    tpl: new Ext.XTemplate('<br>Test 2</br>')
    });
    frmInspectEntry.gridEquipment.getHeaderContainer().insert(frmInspectEntry.gridEquipment.getColumns().length, column);
    frmInspectEntry.gridEquipment.refresh();

action3.jpg
Link to comment
Share on other sites

Thanks for all the help mohammad. 

 

I was finally able to get a button to show.  Turns out I needed to set encodeHTML to false for the cell.  Here is the code in case anyone else needs to render html in a mobile grid.

 

var column = Ext.create('Ext.grid.column.Column', { text: 'Action', width: 70, xtype: 'gridcolumn', 
    dataIndex: '4',
    cell: {
    xtype: 'gridcell',
    encodeHtml: false    
    }, 
    renderer: function (value, record) {return '<button id="' + value + '" type="button" class="dropbtn">Actions</button>'}}); 
    frmInspectEntry.gridEquipment.getHeaderContainer().insert(frmInspectEntry.gridEquipment.getColumns().length, column);
    frmInspectEntry.gridEquipment.refresh();
    }, 
Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...