Jump to content
uniGUI Discussion Forums
Justin152

Add template to UnimDBGrid

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

The exact solution is to use Xtemplate, it is very powerful and you may include inline function inside the template, I always use it especially in mobile.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Unimdblist>unievents>beforeinit and see the template with functions

Share this post


Link to post
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();
    }, 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×