touch unimDBGrid + XTemplate not working

x11 · May 21, 2020

Please tell me why it does not work.

No errors in bowser console.

function beforeInit(sender, config){
  config.loadingText = 'загрузка...';
  config.emptyText='даних немає'; 
  config.selectedCls = '';
//console.log(config);
//console.log(sender);
  
  config.itemTpl = '<table style="width:100%; white-space:nowrap; vertical-align:middle;">'+ 
                     '<tr>'+
                        '<td style="color:#2c81aa">ID {0}, ID на сайті: {13}</td>'+
                     '</tr>'+
                     
                     '<tr>'+
                        '<td>ДОЗ: {1}</td>'+
                     '</tr>'+
                     
                     '<tr>'+
                        '<td>{2}</td>'+
                     '</tr>'+
                     
                     '<tr>'+
                        '<td style="padding-top:3px;">{3}; {4}, {5}</td>'+
                     '</tr>'+
                     
                     
                     '<tr>'+
                        '<td style="padding-top:3px;">Фото: {15}</td>'+
                     '</tr>'+
                     
                     '<tr>'+
                        '<td style="padding-top:3px;">Архів: {16}</td>'+
                     '</tr>'+

                     '<tr>'+
                        '<td id="phone" style="padding-top:3px;">{17}</td>'+
                     '</tr>'+                     
                 '</table>';
  

			
}

x11 · May 21, 2020

But same template normally working with unimDBListGird

Rafael P · January 11, 2021

Same here... There's any workaround for this?

x11 · January 11, 2021

no, use unimDBListGird

Rafael P · January 11, 2021

1 minute ago, x11 said:

no, use unimDBListGird

Ok, do you have any example of how can i use some images to attach on the grid?

I mean, in the 7 index of my grid, i want to display some different images to distinct the row status. But, i'm using the Event OnFieldImage direct from the grid.

Here's my scenario, hope you understand:

- Grid:

function beforeInit(sender, config)
{
  function randomIntFromInterval(min, max) {  
   return Math.floor(Math.random() * (max - min + 1) + min);
  }
  
  config.selectedCls='';
  config.deleteRow=function(indx){
   ajaxRequest(MNotaFiscal.window,'deleteRow',['index='+indx.toString()]);
  };
  
  var clrs=['#5acb98','#72b3e3','#f98689','#fcca67','#d3b894','#f491bc'];
  var clrIndx=0;
  var htmlRow='<div class="myrow" style="background-color:#FAF6F5";height:auto">'+
               '<table style="width:100%;height:100%;vertical-align:middle;margin-top:8px;margin-bottom:8px;">'+
                '<tr>'+
                '<td style="width:100%;text-align:center;color:#3093c7;font-family:verdana;font-size:16px;">'+
                 '<span style="color:#0092f4;width:100%;display:inline-block;">         {0} - {1}</span>'+
                  '<span style="color:#000;width:100%;display:inline-block;">         {2}</span>'+
                  '<span style="color:#000;width:300px;display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">      {4}</span>'+
                  '<span style="color:#000;width:100%;display:inline-block;">Valor:   {6}</span>'+
                  '<span style="color:#000;width:100%;display:inline-block;">Status:   {7}</span>'+
                 '</td>'+
                 '<td style="width:5px;text-align:center;">'+
                  '{[this.getNumber()]}'+
                  /*'<img src="files/images/up.svg" style="width:12px;height12px;margin:auto;"/>'+
                  '<span style="color:#f00;font-size:12px;">+ 150</span>'+*/
                 '</td>'+
                '</tr>'+
               '</table>'+    
              '</div>';
              
 config.itemTpl= new Ext.XTemplate(
   htmlRow,
   {
    getColor: function(){
     if(clrIndx>5){clrIndx=0;}
     return clrs[clrIndx++];     
    }
    }
  );
  
}

OnFieldImage Event from the Grid:

procedure TMNotaFiscal.dbListGridPadraoFieldImage(
  const Column: TunimDBListGridColumn; const AField: TField;
  var OutImage: TGraphic; var DoNotDispose: Boolean;
  var ATransparent: TUniTransparentOption);
begin
  inherited;
  if SameText(AField.FieldName, 'status_mobile') then
  begin
    DoNotDispose := True;

    if AField.AsInteger = cNFeFaltaEnviar then
      OutImage   := pImageFaltaEnviar.Picture.Graphic;
  end;

end;

But, in fact, the grid shows blank data, with no current image... Here's the example:

I appreciate any help!

Rafael P · January 11, 2021

Just now, Rafael P said:

Ok, do you have any example of how can i use some images to attach on the grid?

I mean, in the 7 index of my grid, i want to display some different images to distinct the row status. But, i'm using the Event OnFieldImage direct from the grid.

Here's my scenario, hope you understand:

- Grid:


function beforeInit(sender, config)
{
  function randomIntFromInterval(min, max) {  
   return Math.floor(Math.random() * (max - min + 1) + min);
  }
  
  config.selectedCls='';
  config.deleteRow=function(indx){
   ajaxRequest(MNotaFiscal.window,'deleteRow',['index='+indx.toString()]);
  };
  
  var clrs=['#5acb98','#72b3e3','#f98689','#fcca67','#d3b894','#f491bc'];
  var clrIndx=0;
  var htmlRow='<div class="myrow" style="background-color:#FAF6F5";height:auto">'+
               '<table style="width:100%;height:100%;vertical-align:middle;margin-top:8px;margin-bottom:8px;">'+
                '<tr>'+
                '<td style="width:100%;text-align:center;color:#3093c7;font-family:verdana;font-size:16px;">'+
                 '<span style="color:#0092f4;width:100%;display:inline-block;">         {0} - {1}</span>'+
                  '<span style="color:#000;width:100%;display:inline-block;">         {2}</span>'+
                  '<span style="color:#000;width:300px;display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">      {4}</span>'+
                  '<span style="color:#000;width:100%;display:inline-block;">Valor:   {6}</span>'+
                  '<span style="color:#000;width:100%;display:inline-block;">Status:   {7}</span>'+
                 '</td>'+
                 '<td style="width:5px;text-align:center;">'+
                  '{[this.getNumber()]}'+
                  /*'<img src="files/images/up.svg" style="width:12px;height12px;margin:auto;"/>'+
                  '<span style="color:#f00;font-size:12px;">+ 150</span>'+*/
                 '</td>'+
                '</tr>'+
               '</table>'+    
              '</div>';
              
 config.itemTpl= new Ext.XTemplate(
   htmlRow,
   {
    getColor: function(){
     if(clrIndx>5){clrIndx=0;}
     return clrs[clrIndx++];     
    }
    }
  );
  
}

OnFieldImage Event from the Grid:


procedure TMNotaFiscal.dbListGridPadraoFieldImage(
  const Column: TunimDBListGridColumn; const AField: TField;
  var OutImage: TGraphic; var DoNotDispose: Boolean;
  var ATransparent: TUniTransparentOption);
begin
  inherited;
  if SameText(AField.FieldName, 'status_mobile') then
  begin
    DoNotDispose := True;

    if AField.AsInteger = cNFeFaltaEnviar then
      OutImage   := pImageFaltaEnviar.Picture.Graphic;
  end;

end;

But, in fact, the grid shows blank data, with no current image... Here's the example:

I appreciate any help!

I've already chose the column to display the image... Unfortunately, did not work.

x11 · January 11, 2021

5 minutes ago, Rafael P said:

do you have any example of how can i use some images to attach on the grid

---

for image <td><img src="{23}"></td>

23 - this index of column with image path, in DataSet Field name "IMGPATH" (fkCalculated)

function beforeInit(sender, config){
	config.loadMask=true;
	config.loadingText = 'загрузка...';
	config.emptyText='даних немає'; 
descr = '<table class="tblMyObjDescr">'+ 
                     '<tr>'+
                        '<td style="color:#2c81aa">ID {0}, ID на сайті: {13}</td>'+
						'<td><button class="btnPopup" data-id="{0}" type-id="{22}"><i class="fas fa-angle-down"></i></td>'+
                     '</tr>'+
                     '<tr>'+
                        '<td>ДОЗ: {1}</td>'+
                     '</tr>'+
                     '<tr>'+
                        '<td>{2}</td>'+
                     '</tr>'+
                     '<tr>'+
                        '<td style="padding-top:3px;">{3}; {4}, {5}</td>'+
                     '</tr>'+
                 '</table>';


  
  config.itemTpl = new Ext.XTemplate('<table class="tblMyObj">' +
					
                     '<tr>' +
                        '<td><img src="{23}"></td>' +
						'<td>' + descr + '</td>' +
                     '</tr>' +
                     
                     
                 '</table>'
				 );			
}

in DataSet use OnCalcFields

  if not DirectoryExists(APath) then
    DataSet.FieldByName('IMGPATH').AsString := url path with file name;

x11 · January 11, 2021

Rafael P · January 12, 2021

First of all, thank you for your help. It works, but parcially.

I pretend to put some images to display in a grid in under circustances. There's 5 images, but only 2 has appeared to display...

Here's my source. Hope you can help me to solve this, i can't find where is the error...

- DataSource (OnCalcFields):

procedure TDmNFe.SQL_Lista_NFeCalcFields(DataSet: TDataSet);
var
  APath : String;
begin
  if SQL_Lista_NFeid_status.AsInteger = cNFeFaltaEnviar then
  begin
    if not DirectoryExists(APath) then
    begin
      DataSet.FieldByName('status_mobile').AsString := '/files/f.png';
    end;
  end;
  if SQL_Lista_NFeid_status.AsInteger = cNFeCancelado then
  begin
    if not DirectoryExists(APath) then
    begin
      DataSet.FieldByName('status_mobile').AsString := '/files/c.png';
    end;
  end;
  if SQL_Lista_NFeid_status.AsInteger = cNFeAutorizado then
  begin
    if not DirectoryExists(APath) then
    begin
      DataSet.FieldByName('status_mobile').AsString := '/files/a.png';
    end;
  end;
  if SQL_Lista_NFeid_status.AsInteger = cNFeUsoDenegado then
  begin
    if not DirectoryExists(APath) then
    begin
      DataSet.FieldByName('status_mobile').AsString := '/files/d.png';
    end;
  end;
  if SQL_Lista_NFeid_status.AsInteger = cNFeContingencia then
  begin
    if not DirectoryExists(APath) then
    begin
      DataSet.FieldByName('status_mobile').AsString := '/files/co.png';
    end;
  end;
end;

These images that are marked with a row needed to display a third image (cNFeAutorizado), and unfortunately shows (cNFeFaltaEnviar).

- The second image down below is the final result that i want to achieve (Desktop).

x11 · January 12, 2021

1. You forgot to specify the value of the APath variable.

2. Why CONSTANTLY check the path?

3. Replace "if SQL_Lista_NFeid_status.AsInteger =" with case

Case SQL_Lista_NFeid_status.AsInteger of

  cNFeFaltaEnviar: DataSet.FieldByName('status_mobile').AsString := '/files/f.png';
  cNFeCancelado: DataSet.FieldByName('status_mobile').AsString := '/files/c.png';
  cNFeAutorizado: DataSet.FieldByName('status_mobile').AsString := '/files/a.png';

...

...

else

  cNFeAutorizado: DataSet.FieldByName('status_mobile').AsString := '/files/fileNotExists.png';

end;

4. Make your code simpler.

Rafael P · January 12, 2021

3 hours ago, x11 said:

1. You forgot to specify the value of the APath variable.

2. Why CONSTANTLY check the path?

3. Replace "if SQL_Lista_NFeid_status.AsInteger =" with case


Case SQL_Lista_NFeid_status.AsInteger of

  cNFeFaltaEnviar: DataSet.FieldByName('status_mobile').AsString := '/files/f.png';
  cNFeCancelado: DataSet.FieldByName('status_mobile').AsString := '/files/c.png';
  cNFeAutorizado: DataSet.FieldByName('status_mobile').AsString := '/files/a.png';

...

...

else

  cNFeAutorizado: DataSet.FieldByName('status_mobile').AsString := '/files/fileNotExists.png';

end;

4. Make your code simpler.

Thank you! It works great!

Rafael P · January 12, 2021

Excuse-me if i asking you 'how to do' other things... But, now i'm trying to change some specifically row from the grid in run-time according to the status.

For example, if status = 5 then *change the 7 column of the grid in run time to color red* in this case.

Because the color that you're currently see, its just defined in html. So i pretend to change according to the status... There's some event of the grid that i can do this?

If Yes, how can i supposed to do?

Thanks again!

image.png.b37814ad19f12c678aa4e3cb2936e86a.png

Rafael P · January 12, 2021

I have tried to do this in OnCreate Event, but it didn't work. And unfortunately, DBListGrid on Mobile doesn't have the OnDrawnColumnCell event which will be possible to change the color of the rows using Attributes from the grid (color or font, for example)....

x11 · January 22, 2021

if still relevant

use functions

function beforeInit(sender, config){
	config.loadMask = false;
	config.loadingText = 'загрузка...';
	config.emptyText = 'даних немає'; 
	config.grouped = false;
	
	var descr = '<table class="tblResDescr">' +
                    '<tr>' +
						'<td class="tdDbgRowLogin">{[this.getVal(values, "NAME")]} {[this.getArc(values)]}</td>' +
							'<td class="tdBtnPopup"><button class="btnPopup" user-id="{[this.getVal(values, "ID")]}"><i class="fas fa-angle-down"></i></td>' +
						'</tr>' +                     
                    '<tr>' +
                        '<td colspan="2">ID {[this.getVal(values, "ID")]}</td>' +
                    '</tr>' +                   
                    '<tr>' +
                        '<td colspan="2" class="tdDbgRowDescr">'+
						'<a href="tel://{[this.getVal(values, "PHONE1")]}" target="_blank">{[this.getVal(values, "PHONE1")]}</a>   /   '+
						'<a href="tel://{[this.getVal(values, "PHONE2")]}" target="_blank">{[this.getVal(values, "PHONE2")]}</a>   /   '+
						'{[this.getVal(values, "E_MAIL")]}    Обране: {[this.getVal(values, "COUNT_FAVORIT")]}</td>' +
                    '</tr>' +
                    '<tr>' +
					'<td colspan="2">' +
					'<div style="display: flex; justify-content: space-between">' +
                        '<div class="tdDbgRow">{[this.getVal(values, "GROUP_NAME")]}</div>' +
						'<div class="tdDbgRowArea">{[this.getFullName(values)]}</div>' +
					'</div>' +
					'</td>' +
                    '</tr>'+
                '</table>';
  
	config.itemTpl = new Ext.XTemplate( descr ,
				{
					getFullName: function(values){
						return values[sender.fieldsNames.indexOf("FIRST_NAME")] + ' ' + values[sender.fieldsNames.indexOf("LAST_NAME")]
					},					
					getVal: function(val, fieldName) {
						if (sender.fieldsNames.indexOf(fieldName) >= 0){
							return val[sender.fieldsNames.indexOf(fieldName)];
						} else {
							console.error(fieldName + " not found");
						}
						;
					},
					getArc: function(values){
						if (values[sender.fieldsNames.indexOf("DELETED")]){
						return '<td class="tdDbgRowArc">[архів]</td>'}
					}
        
				}
	);
}

getArc: function(values){
                       if (values[sender.fieldsNames.indexOf("DELETED")]){
                       return '<td class="tdDbgRowArc">[user deleted to arc]</td>'}
                   }

in CSS

.tdDbgRowArc{
color:red;
}

Rafael P · January 26, 2021

On 1/22/2021 at 10:02 AM, x11 said:

if still relevant

use functions


function beforeInit(sender, config){
	config.loadMask = false;
	config.loadingText = 'загрузка...';
	config.emptyText = 'даних немає'; 
	config.grouped = false;
	
	var descr = '<table class="tblResDescr">' +
                    '<tr>' +
						'<td class="tdDbgRowLogin">{[this.getVal(values, "NAME")]} {[this.getArc(values)]}</td>' +
							'<td class="tdBtnPopup"><button class="btnPopup" user-id="{[this.getVal(values, "ID")]}"><i class="fas fa-angle-down"></i></td>' +
						'</tr>' +                     
                    '<tr>' +
                        '<td colspan="2">ID {[this.getVal(values, "ID")]}</td>' +
                    '</tr>' +                   
                    '<tr>' +
                        '<td colspan="2" class="tdDbgRowDescr">'+
						'<a href="tel://{[this.getVal(values, "PHONE1")]}" target="_blank">{[this.getVal(values, "PHONE1")]}</a>   /   '+
						'<a href="tel://{[this.getVal(values, "PHONE2")]}" target="_blank">{[this.getVal(values, "PHONE2")]}</a>   /   '+
						'{[this.getVal(values, "E_MAIL")]}    Обране: {[this.getVal(values, "COUNT_FAVORIT")]}</td>' +
                    '</tr>' +
                    '<tr>' +
					'<td colspan="2">' +
					'<div style="display: flex; justify-content: space-between">' +
                        '<div class="tdDbgRow">{[this.getVal(values, "GROUP_NAME")]}</div>' +
						'<div class="tdDbgRowArea">{[this.getFullName(values)]}</div>' +
					'</div>' +
					'</td>' +
                    '</tr>'+
                '</table>';
  
	config.itemTpl = new Ext.XTemplate( descr ,
				{
					getFullName: function(values){
						return values[sender.fieldsNames.indexOf("FIRST_NAME")] + ' ' + values[sender.fieldsNames.indexOf("LAST_NAME")]
					},					
					getVal: function(val, fieldName) {
						if (sender.fieldsNames.indexOf(fieldName) >= 0){
							return val[sender.fieldsNames.indexOf(fieldName)];
						} else {
							console.error(fieldName + " not found");
						}
						;
					},
					getArc: function(values){
						if (values[sender.fieldsNames.indexOf("DELETED")]){
						return '<td class="tdDbgRowArc">[архів]</td>'}
					}
        
				}
	);
}

getArc: function(values){
                       if (values[sender.fieldsNames.indexOf("DELETED")]){
                       return '<td class="tdDbgRowArc">[user deleted to arc]</td>'}
                   }

in CSS

.tdDbgRowArc{
color:red;
}

Perfect! This will come in handy.

Sign In

touch unimDBGrid + XTemplate not working

Recommended Posts

x11

x11

Rafael P

x11

Rafael P

Rafael P

x11

x11

Rafael P

x11

Rafael P

Rafael P

Rafael P

x11

Rafael P

Join the conversation

Browse

Activity