Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Peter Molander
40
asp.net MVC TileManger rendering issues
posted

Downloaded the igniteUI 30 day trial .. Created a simple asp.net MVC app attempting to bind a few rows of data to the TileManager control. Followed the MVC basic Usage example on the website and the resulting page does not render the tiles. Am I missing a required JS file or using an incorrect version??

View Code

========

@using Infragistics.Web.Mvc;

@model IEnumerable<MvcTestSearch.Models.TestSearch>

@{

ViewBag.Title = "Test Tiles";

}

<html>

<head>

<title></title>

<!-- Ignite UI Required Combined CSS Files -->

<link href="http://cdn-na.infragistics.com/igniteui/2014.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />

<link href="http://cdn-na.infragistics.com/igniteui/2014.2/latest/css/structure/infragistics.css" rel="stylesheet" />

<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

<!-- Ignite UI Required Combined JavaScript Files -->

<script src="~/Scripts/infragistics.core.js"></script>

<script src="~/Scripts/infragistics.lob.js"></script>

<script src="~/Scripts/infragistics.loader.js"></script>

<script src="~/Scripts/infragistics.datasource.js"></script>

<script src="~/Scripts/infragistics.ui.splitter.js"></script>

<script src="~/Scripts/infragistics.ui.layoutmanager.js"></script>

<script src="~/Scripts/infragistics.templating.js"></script>

<script src="~/Scripts/infragistics.ui.tilemanager.js"></script>

</head>

<body>

<style type="text/css">

#dashboard {

position: relative;

width: 100%;

height: 600px;

border: none;

}

.ui-igtile-minimized .ui-igtile-inner-container h3 {

position: absolute;

width: 208px;

height: 50px;

margin-top: -25px;

top: 50%;

text-align:center;

font-size: 20px;

}

@@media all and (max-width: 480) {

.sample-page #sample {

margin-left: 0;

margin-right: 0;

}

}

</style>

　

@(Html.Infragistics()

.Loader()

.ScriptPath("~/Scripts")

.CssPath("~/CSS")

.Render()

)

@(Html.Infragistics()

.TileManager()

.DataSource(Model.AsQueryable())

.ID("dashboard")

.MinimizedState("<h3>${Formula} minimized content</h3>")

.MaximizedState("<h3>${Formula} maximized content</h3>")

.DataBind()

.Render()

)

</body>

</html>

Model

======

public partial class TestSearch

{

[Display(Name="ID")]

public int Search_ID_Key { get; set; }

[Display(Name="Request")]

public string TRNumberExt { get; set; }

[Display(Name="Formula")]

public string Formula { get; set; }

}

Generated source

===============

<script type="text/javascript">$.ig.loader({ scriptPath: '~/Scripts/', cssPath: '~/CSS/' });</script>

<div id="dashboard"></div>

<script type="text/javascript">$.ig.loader('igTileManager', function() {$('#dashboard').igTileManager({ dataSource: [{"Search_ID_Key":1,"TRNumberExt":"13051","Formula":"3412"},{"Search_ID_Key":2,"TRNumberExt":"13051","Formula":"3412"},{"Search_ID_Key":3,"TRNumberExt":"13051","Formula":"3412"},{"Search_ID_Key":4,"TRNumberExt":"13051","Formula":"3412"},{"Search_ID_Key":5,"TRNumberExt":"13051","Formula":"3412"},{"Search_ID_Key":6,"TRNumberExt":"13051","Formula":"3412"}], minimizedState: '<h3>${Formula} minimized content</h3>', maximizedState: '<h3>${Formula} maximized content</h3>' });});</script>