1. Home
  2. Forum
  3. Blazor
  4. How to make TileView Navigation

How to make TileView Navigation

I have an requirement to make TileView Navigation using synfusion control.(card or any other control)

Can you please share the example code ..

I have attached sample screenshot for your reference..

Note:-

Actually I would like to use TileView instead of sidebar for navigation in my project

Attachment: Screenshot_(4)_1675ba01.zip

11 Replies 1 reply marked as answer
RK Revanth Krishnan Syncfusion Team April 9, 2021 11:37 AM UTC

Hi Ismail, 
 
 
Greetings from Syncfusion support. 
 
 
We have validated your query “I have a requirement to make Tile View Navigation using Syncfusion control. (card or any other control). Can you please share the example code? I would like to use Tile View instead of a sidebar for navigation in my project.” 
 
The cards can be used as Tile view. We have prepared a sample for your reference, you can use the below code in your application main page for navigation, 
 
 
Also, please refer to the below demos and documentation of the card component, 
 
 
Please check the above sample and documentation and let us know if it comes close to your requirement. 
 
Regards, 
Revanth 


KI KINS April 9, 2021 04:40 PM UTC

Thanks for reply...

Can you please advise how to create group in tileview ??

For example 

Parent child 

Group1 contain 3 child

Group2 contains 4 child

Group3 contains 5 child

IS Indrajith Srinivasan Syncfusion Team April 12, 2021 12:13 PM UTC

Hi Ismail, 
 
Good day to you, 
 
We have validated your reported query. You can achieve your requirement, of stacked cards using the CSS, you can swipe the card in left or right direction to switch between the cards. We have also prepared a sample that tries to meet your requirements. 
 
 
Can you please check the above sample and let us know if it meets your requirements ? 
 
Regards, 
Indrajith 


Marked as answer
KI KINS April 12, 2021 02:01 PM UTC

Thanks

Will check

IS Indrajith Srinivasan Syncfusion Team April 13, 2021 06:46 AM UTC

Hi Ismail,

Take your time,

We will wait until we get an update from you.

Regards,
Indrajith

KI KINS October 21, 2021 04:24 AM UTC

sorry for late reply...

I need to display card in " Carousel" container with next / previous navigation. Please check the below link for Carousel which I need to add card inside the carousel container.

https://getbootstrap.com/docs/4.0/components/carousel/


Note:-

Each  Carousel container contain six card


Total card is 30 card,so It requires 5 carousel container


KI KINS October 21, 2021 04:34 AM UTC

sorry I have another requirement in card.

I need to add popupmenu in card in right side. Please check the below screencast.

https://www.screencast.com/t/2MwcnoYIX7Hk


VJ Vinitha Jeyakumar Syncfusion Team October 22, 2021 01:35 PM UTC

Hi Ahmed, 
 
 
Currently, we are validating your reported queries. We will update you the further details on or before 27th October 2021. 
 
Regards, 
Vinitha 


VJ Vinitha Jeyakumar Syncfusion Team October 27, 2021 03:14 PM UTC

Hi Ahmed,  
 
 
We have validated your queries, 
 
Query 1. “I need to display card in " Carousel" container with next / previous navigation” 
 
We have created a sample for your requirement to show cards in carousel container. Please check the sample below, 
 
 
Query 2. “I need to add popupmenu in card in right side” 
 
Your requirement can be achieved by using the Dropdown Menu control inside the Card header. Please check the code below, 
 
 
 
Code snippet: 
<div class="control-section"> 
    <div class='row e-card-layout'> 
        <div class="col-lg-4"> 
            <SfCard> 
                <CardHeader Title="Hong Kong" SubTitle="Mon, 12.30 PM, Mostly Sunny"> 
                    <SfDropDownButton IconCss="e-icons e-profile"> 
                        <DropDownMenuItems> 
                            <DropDownMenuItem Text="Dashboard" IconCss=@DASHBOARD></DropDownMenuItem> 
                            <DropDownMenuItem Text="Notifications" IconCss=@NOTIFICATION></DropDownMenuItem> 
                            <DropDownMenuItem Text="User Settings" IconCss=@SETTINGS></DropDownMenuItem> 
                            <DropDownMenuItem Text="Log Out" IconCss=@LOGOUT></DropDownMenuItem> 
                        </DropDownMenuItems> 
                    </SfDropDownButton> 
                </CardHeader> 
                <CardContent> 
                    . . . 
                       . . . 
                </CardContent> 
                <CardContent EnableSeparator="true"></CardContent> 
                <CardFooter> 
                    . . . 
                       . . . 
                </CardFooter> 
            </SfCard> 
        </div> 
    </div> 
</div> 
 
 
 
Please check the sample and code snippet let us know if it satisfies your requirement. 
 
Regards, 
Vinitha 


KI KINS February 16, 2022 10:03 PM UTC

Sorry

I have another below clarification in card

I have an list datasource which contains 5 column and 12 rows.The column contains Below fields

1.Product Image

2.Product Name

3.Product Color

4.Product price

5.Expiry Date


I would like to show product Image in left side 

And other field should show in right side.


Please help how to do this..



BS Buvana Sathasivam Syncfusion Team February 17, 2022 12:35 PM UTC

Hi KINS, 
 
You can achieve your requirements for the left-side image and the right-side corresponding data with the below code. 
 
<SfCard Orientation="CardOrientation.Horizontal"> 
  <img src=@card.ImageUrl alt="logo"> 
    <CardStacked> 
       <CardContent> 
         <table class="card-template-wrap"> 
           <colgroup> 
              <col style="width:75px"> 
              <col style="width:calc(100% - 75px)"> 
           </colgroup> 
           <tbody>  
             <tr> 
                <td><div>Title :</div></td> 
                <td><div>@card.Title</div></td> 
             </tr> 
              …………………. 
            </tbody> 
           </table> 
         </CardContent> 
      </CardStacked> 
   </SfCard> 

Screenshot: 
 




Regards, 
Buvana S 


Loader.
Up arrow icon