Jump to content


Photo

Add template to UnimDBGrid


  • Please log in to reply
7 replies to this topic

#1 Justin152

Justin152

    Newbie

  • Members
  • Pip
  • 4 posts

Posted 13 June 2018 - 06:07 PM

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


  • 0

#2 Justin152

Justin152

    Newbie

  • Members
  • Pip
  • 4 posts

Posted 14 June 2018 - 01:35 PM

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


  • 0

#3 mohammad

mohammad

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 823 posts
  • LocationKufur Kassem, Palestine

Posted 15 June 2018 - 05:24 AM

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.
  • 0

#4 mohammad

mohammad

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 823 posts
  • LocationKufur Kassem, Palestine

Posted 15 June 2018 - 05:29 AM

http://docs.sencha.c....XTemplate.html
  • 0

#5 Justin152

Justin152

    Newbie

  • Members
  • Pip
  • 4 posts

Posted 15 June 2018 - 02:51 PM

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

  • 0

#6 mohammad

mohammad

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 823 posts
  • LocationKufur Kassem, Palestine

Posted 15 June 2018 - 05:12 PM

Please refer to sample projects http://forums.unigui...ge-1#entry49590
  • 0

#7 mohammad

mohammad

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 823 posts
  • LocationKufur Kassem, Palestine

Posted 15 June 2018 - 05:13 PM

Unimdblist>unievents>beforeinit and see the template with functions
  • 0

#8 Justin152

Justin152

    Newbie

  • Members
  • Pip
  • 4 posts

Posted Yesterday, 12:49 PM

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

  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users