Xtemplate example

[Wajeed]

How to use Xtemplate in unidbgrid. I want to display grid data in card format.  To a similar question, sherzod replied it is possible using xtemplate.  appreciate if you can provide sample project.

[picyka]

9 minutos atrás, Wajeed disse:

Como usar o Xtemplate no unidbgrid. Quero exibir dados de grade em formato de cartão. Para uma pergunta semelhante, sherzod respondeu que é possível usar o xtemplate. aprecie se você pode fornecer o projeto da amostra.

It would be very useful to see some elegant examples.

[Hayri ASLAN]

Could you please provide an example image that clearly demonstrates the outcome you're aiming for?

[asapltda]

+1

[Wajeed]

Some thing similar to image attached.

image 1.bmp image 2.bmp

[Hayri ASLAN]

20 hours ago, Wajeed said:

Some thing similar to image attached.

image 1.bmp 820.83 kB · 17 downloads image 2.bmp 1.04 MB · 9 downloads

I've been working with the GridColumnSort demo. I've modified it by adding a new column at the beginning of the grid.

 

 

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  UniDBGrid1.ClientEvents.ExtEvents.Add(
    'reconfigure=function (sender, store, columns) '+
    '{    columns[0].renderer=function(value, metaData, record) {data=record.data; '+
    ' return ''<div class="record-card"> '+
            '         <div class="record-header"> '+
            '             <strong>Record [''+(record.id+1)+'' of ''+record.store.totalCount+'']</strong> '+
            '         </div> '+
            '         <div class="record-content"> '+
            '             <img src="https://loremflickr.com/60/60?random=1" alt="''+data[''2'']+''" class="profile-img"> '+
            '             <div class="info"> '+
            '                 <p><strong>Company:</strong> ''+data[''2'']+''</p> '+
            '                 <p><strong>Contact:</strong> ''+data[''12'']+''</p> '+
            '                 <p><strong>Cust No:</strong> ''+data[''1'']+''</p> '+
            '             </div> '+
            '         </div> '+
            '         <div class="contact-info"> '+
            '             <h3>Contact Info</h3> '+
            '             <p><strong>Address:</strong> ''+data[''3'']+'' ''+data[''4'']+''</p> '+
            '             <p><strong>City:</strong> ''+data[''5'']+''</p> '+
            '             <p><strong>Postal Code:</strong> ''+data[''7'']+'' &nbsp; <strong>State:</strong> ''+data[''6'']+''</p> '+
            '             <p><strong>Country:</strong> ''+data[''8'']+''</p> '+
            '             <p><strong>Home Phone:</strong> ''+data[''9'']+''</p> '+
            '         </div> '+
            '     </div>'';};    '+
    '  }');


end;

 

ServerModule -> CustomCSS
 

.record-card {
	width: 400px;
	background: white;
	padding: 15px;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	margin: 20px auto;
}
.record-header {
	font-size: 16px;
	font-weight: bold;
	padding-bottom: 10px;
	border-bottom: 1px solid #ccc;
}
.record-content {
	display: flex;
	align-items: flex-start;
	margin-top: 10px;
}
.profile-img {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	margin-right: 10px;
}
.info p {
	margin: 3px 0;
}
.contact-info {
	margin-top: 10px;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 5px;
	background: #fafafa;
}
.contact-info h3 {
	margin-top: 0;
	font-size: 14px;
}
.contact-info p {
	margin: 3px 0;
	font-size: 12px;
}

 

[Wajeed]

thanks a lot. great help

[Abaksoft]

@Hayri ASLAN

Great. Many Thx...

[Stemon63]

Thanks a lot! 

[asapltda]

Thanks a lot!  

Hello it is possible :

1. Have multiple columns in tunidbgrid

2. How it works in a tuniMdbgrid

[Abaksoft]

On 2/10/2025 at 2:09 PM, asapltda said:

Thanks a lot!  

Hello it is possible :

1. Have multiple columns in tunidbgrid

Hello,

The same logic on  ExtEvents :

 

'reconfigure=function (sender, store, columns) '+
    '{    columns[1].renderer=function(value,  ....

 

 

On 2/10/2025 at 2:09 PM, asapltda said:

2. How it works in a tuniMdbgrid

As Reconfigure function does not exists for UnimDBListGrid, you can use OnGetText Tip.  All is on the HTML Css suggested by Hayri.

1. Put the CSS on ServerModule

2. Set OnGetText :

procedure TMainmForm.ClientDataSet1F1GetText(Sender: TField; var Text: string;
  DisplayText: Boolean);
begin
    Text:='<div class="record-card"> '+
            '         <div class="record-header"> '+
            '             <strong>Record [' +  intToStr(ClientDataSet1.RecNo) +  ' of ''' +  intToStr(ClientDataSet1.RecordCount) + ''']</strong> '+
            '         </div> '+
            '         <div class="record-content"> '+
            '             <img src="https://loremflickr.com/60/60?random=1" class="profile-img"> '+
            '             <div class="info"> '+
            '                 <p><strong>Company:</strong> '  +  ClientDataSet1.FieldByName('F3').AsString +    '</p> '+
            '                 <p><strong>Model:  </strong> '  +  ClientDataSet1.FieldByName('F2').AsString +    '</p> '+
            '             </div> '+
            '         </div> '+
            '         <div class="contact-info"> '+
            '             <h3>Contact Info</h3> '+
            '             <p><strong>Address:</strong>  My Adresse  </p> '+
            '             <p><strong>City:</strong>  MyCity </p> '+
            '         </div> '+
            '     </div>''';

end;

 

 

 

 

Elegant_Mobile_CardView.7z