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()
)
.TileManager()
.DataSource(Model.AsQueryable())
.ID("dashboard")
.MinimizedState("<h3>${Formula} minimized content</h3>")
.MaximizedState("<h3>${Formula} maximized content</h3>")
.DataBind()
</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>
Hi Peter,
Thank you for contacting Infragistics!
Looking at the sample code you provided I cannot say what the problem is, but one possible thing is the script references. You have imported "infragistics.lob.js", which contains all the scripts, then "Infragistics.loader.js", which loads all references again, and then all references are imported one by one again.
I have attached a working sample with a different model. Please note that I have removed packages, scripts and Infragistics folders from the project.
I'm just following up to see if you need any further assistance with this issue. If so please let me know.
Hi Daniel,
You can close this case. I never did get my original code working but I took the sample app you sent me and incorporated my code into that and it worked so I’m good to go.
Thanks.
I'm glad that I managed to help you.Thank you for using our product!