)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to iterate tile and its template for a group tile in MVC?

Platform: ASP.NET MVC |
Control: Tile |
Published Date: May 23, 2015 |
Last Revised Date: May 8, 2019
Tags: tileview

You can render group tile with template values from model by iterating the items. Refer to the following steps.

Initially, create a model file with necessary values used for rendering the tile with template feature. Following code example demonstrates the same.

template.cs

public class Template
    {
        public int primarykey { get; set; }
        public string name { get; set; }
        public string className { get; set; }
        public string designation { get; set; }
        public string about { get; set; }
    }
    public static class TemplateModal
    {
        public static List<Template> TempSource = new List<Template>();
        public static List<Template> setTempSource()
        {
            TempSource.Add(new Template { primarykey = 1, name = "Brook", className = "image-brook", designation = "HR Assistant", about = "Brooke provides administrative support to the HR office." });
            TempSource.Add(new Template { primarykey = 2, name = "Andy", className = "image-andy", designation = "HR Manager", about = "Andy is responsible for strategic HR planning and budget." });
            TempSource.Add(new Template { primarykey = 3, name = "Lisa", className = "image-lisa", designation = "Training Specialist", about = "Lisa notifies attendees and manages follow up." });
            TempSource.Add(new Template { primarykey = 4, name = "Melina", className = "image-melina", designation = "Development Manager", about = "Melina maintains training plans to achive workforce skill." });
            TempSource.Add(new Template { primarykey = 5, name = "John", className = "image-john", designation = "Recruitment Manager", about = "John manages recruitment and prepares key staffing metrics." });
            TempSource.Add(new Template { primarykey = 6, name = "Sam", className = "image-sam", designation = "HR Assistant", about = "Sam provides administrative support to the HR office." });
            TempSource.Add(new Template { primarykey = 7, name = "Rahul", className = "image-rahul", designation = "HR Manager", about = "Rahul is responsible for strategic HR planning and budget." });
            TempSource.Add(new Template { primarykey = 8, name = "Antony", className = "image-antony", designation = "Training Specialist", about = "Antony notifies attendees and manages follow up." });
            TempSource.Add(new Template { primarykey = 9, name = "Claire", className = "image-claire", designation = "Development Manager", about = "Claire maintains training plans to achive workforce skill." });
            return TempSource;
        }
        public static void clearSource()
        {
            TempSource.Clear();
        }
    }

Then, pass the model from controller to view in a corresponding view action.

TileViewController.cs

public ActionResult Index()
        {
            //returns View();
            TemplateModal.clearSource();
            return View(TemplateModal.setTempSource());
        }

Iterate templates from the model by using the following code example.

index.cshtml

@{
    foreach (var item in Model)
    {
        var id = "template" + @item.primarykey;
        <div id= @id class="cont-bg">
            <div class=@item.className>
            </div>
            <div class="listrightdiv">
                <span class="templatetext">@item.name</span> <span class="designationstyle">@item.designation</span>
                <div class="aboutstyle">
                    @item.about
                </div>
            </div>
        </div>
    }
} 

Once the template element is rendered, you can create a group tile by iterating the items in Model. Then, create parent element with class group to make a group tile. After then, inside a loop, wrap your tile with div that contains class column for every third iteration. In this scenario, 3*3 group tile is used.

index.cshtml

<div class="group"> 
@{
    foreach (var item in Model)
    { 
         if (Model.IndexOf(item) %3 == 0)
         {
             @:<div class="column">
         }
         @Html.EJ().Tile("tile" + item.primarykey).ShowText(false).ImageTemplateId("template" + item.primarykey).TileSize(TileSize.Wide)
        if (Model.IndexOf(item) % 3 == 2)
        {
              @:</div>
         }
    }
}
</div> 

Output

Tile

2X faster development

The ultimate ASP.NET MVC UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon