Jump to content

unimDBGrid + XTemplate not working


Recommended Posts

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>';
  

			
}

 

 

Screenshot_39.jpg

Screenshot_40.jpg

Link to post
Share on other sites
  • 7 months later...
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! 

03.PNG

Link to post
Share on other sites
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! 

03.PNG

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

04.PNG

Link to post
Share on other sites
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;

 



 

 

 

 

 

Screenshot_15.jpg

Screenshot_16.jpg

  • Upvote 1
Link to post
Share on other sites

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).

Capturar.PNG

Capturar 2.PNG

Link to post
Share on other sites

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.

  • Upvote 1
Link to post
Share on other sites
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! 

Link to post
Share on other sites

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

Link to post
Share on other sites

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)....

image.png

Link to post
Share on other sites
  • 2 weeks later...

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;
}

 

 

 

 

  • Upvote 2
Link to post
Share on other sites
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. 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...