Show Images in ListBox from Remote Data Source

[Simon]

Hi all,

Just wondering if it is possible to show Images in a ListBox in a Grid, based on my specific use case below?

A simplified version of my database is as follows:

MainTable:

     Id               Long

     Name          String

LangTable:

     Id               Long

     ImageUrl     String

Main2LangTable:

     MainId          Long

     LangId          Long

There is a many to many relationship between Main & Lang.

Any help would be greatly appreciated.

Regards

Simon

[Mohan Kumar Ramasamy]

Hi Simon, 

 

We have checked your reported query, we can achieve your requirement using template. Please refer the below code snippets. 

 

     

<SfGrid DataSource="@GridData" Height="359"> 

                <GridColumns> 

                    <GridColumn Field=@nameof(Employee.EmployeeID) HeaderText="Employee ID" Width="120"> 

                        <Template> 

                            @{ 

                                var EmployeeInfo = (context as Employee); 

                                <span> 

                                    @EmployeeInfo.EmployeeID 

                                </span> 

                            } 

                            <SfListBox DataSource="@Data" TValue="string[]" TItem="DataValues"> 

                                <ListBoxTemplates TItem="DataValues"> 

                                    <ItemTemplate Context="DataValues"> 

                                        <div class="list-wrapper"> 

                                            <span class="@(DataValues.pic) e-avatar e-avatar-xlarge e-avatar-circle"></span> 

                                            <span class="text">@(DataValues.text)</span> 

                                        </div> 

                                    </ItemTemplate> 

                                </ListBoxTemplates> 

                            </SfListBox> 

                        </Template> 

                    </GridColumn> 

                    <GridColumn Field=@nameof(Employee.FirstName) HeaderText="Name" Width="120"></GridColumn> 

                    <GridColumn Field=@nameof(Employee.Title) HeaderText="Title" Width="150"></GridColumn> 

                    <GridColumn Field=@nameof(Employee.HireDate) HeaderText="Hire Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="160"></GridColumn> 

                </GridColumns> 

            </SfGrid> 

 

 

For your reference we have prepared a sample based on this, please refer below link. 

 

Link:  https://www.syncfusion.com/downloads/support/forum/157171/ze/F157171-ListBoxWithGrid-1779997753  

 

Please let us know, if you need any further assistance. 

 

Regards, 

Mohankumar R 

 

 

[Simon]

Hi Mohankumar,

Thanks for the reply.

All working fine now.

Regards

Simon

[Mohan Kumar Ramasamy]

Hi Simon,   

  

Thanks for the update.  

 

We are happy to hear that your requirement has been fulfilled. Please feel free to contact us if you need any further assistance on this. 

 

Regards, 

Mohankumar R