Infragistics Grid renders empty page

Question

I am using the Infragistics Ignite UI grid in MVC. I was able to load my grid properly but it is not displaying in the browser. When I click view source on the browser I can see that the grid has loaded the data but it isn't displaying anything but a " . I really don't understand how it is not displaying the css is there. Is it because of the bootstrap.css that could cause this.

@IMports Infragistics.Web.Mvc
@ModelType System.Collections.ObjectModel.ObservableCollection(Of FultonWS.scll_label)

@Code
ViewData("Title") = "Tickets"
End Code

@Html.Infragistics.Loader().ScriptPath("~/js/").CssPath("~/css/").Render()

        @Html.Infragistics.Grid(Of Mueller_Scale_System_Dashboard.FultonWS.scll_label)(Model.AsQueryable()).ID("igGrid").Columns(Sub(col)
                                                                            col.For(Function(i) i.scll_part).HeaderText("Part Number")
                                                                        End Sub).Features(Sub(features)
                                                                                                  features.Paging().PageSize(20)
                                                                                                  features.Sorting()
                                                                                                  features.GroupBy()
                                                                                                  features.Updating().EnableAddRow(False).EnableDeleteRow(False)
                                                                                          End Sub).DataBind.Render()

I render scripts and css in the layouts page

 <link type="text/css" href="~/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link type="text/css" href="~/css/structure/infragistics.css" rel="stylesheet" />
<title>@ViewBag.Title - Mueller Scale System Dashboard</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/modernizr")
<script src="~/Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>"
<script src="@Url.Content("~/js/infragistics.loader.js")" type="text/javascript"></script>

and my controller action is below

  Async Function Tickets() As Threading.Tasks.Task(Of ActionResult)
        Dim bd As New BusinessData
        Dim ticketsColl = Await bd.GetTicketsAsync
        Return View("Tickets", ticketsColl)
    End Function

score 3 · Answer 1 · answered Sep 25 '14 at 16:15

The issue is that JQuery in MVC 5 loads the script in the body of the html. This was stopping the control from loading properly because the scripts wasn't available at the time of load. comment out the render script for jquery and add it to the head section of the html.

<div class="container-fluid body-content">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - </p>
    </footer>
</div>

@*@Scripts.Render("~/bundles/jquery")*@
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required:=False)

Infragistics Grid renders empty page

1 Answers1