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
45
Configuring igGrid using a GridModel (MVC4, templating)
posted

Hi,

I have an existing asp.net MVC4 web app that I am trying to get igGrid to work with.  I was searching around your help forum and found an example that got a grid to display on the index.cshtml file just fine using the non-gridModel approach.  The code for that looks like this:

@using Infragistics.Web.Mvc;

<link type="text/css" href='@Url.Content("~/Content/structure/infragistics.css")' rel="stylesheet" />

<link type="text/css" href='@Url.Content("~/Content/themes/infragistics/infragistics.theme.css")' rel="stylesheet" />
<script type="text/javascript" src="@Url.Content("https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js")"></script>
<script type="text/javascript" src="@Url.Content("https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/infragistics.loader.js")"></script>

@( Html.Infragistics().Loader()
.ScriptPath(Url.Content("~/Scripts/"))
.CssPath(Url.Content("~/Content/"))
.Resources("igGrid")
.Render()
)
<h2>
Index</h2>
@(Html.Infragistics()
.Grid<Finnav.Web.MVC.Product>()
.ID("grid1")
.AutoGenerateLayouts(false)
.Columns(column =>
{
column.For(x => x.ProductID).HeaderText("ID").DataType("number");
column.For(x => x.Name).HeaderText("Name").DataType("string");
column.For(x => x.ProductNumber).HeaderText("ProductNumber").DataType("string");
})
.Width("800px")
.Height("500px")
.PrimaryKey("ProductID")
.Features(features =>
{
features.Paging().PageSize(4);
features.Sorting().Mode(Infragistics.Web.Mvc.SortingMode.Single).ColumnSettings(settings => settings.ColumnSetting().ColumnKey("ProductID").AllowSorting(true));
})
.DataSourceUrl(Url.Action("GetGridData", "Home"))
.DataBind()
.Render())

However, I'm using a templating tool (mustache js) and would like to inject the igGrid code into an existing view.  For example, if I had the following under a file called ExampleGrid.cshtml:

 

@model IGModel


<script type="text/javascript" src="@Url.Content("https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js")"></script>
<script type="text/javascript" src="@Url.Content("https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js")"></script>
<link type="text/css" href='@Url.Content("~/Content/structure/infragistics.css")' rel="stylesheet" />
<link type="text/css" href='@Url.Content("~/Content/themes/infragistics/infragistics.theme.css")' rel="stylesheet" />
<script type="text/javascript" src="@Url.Content("~/Scripts/ig/infragistics.loader.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/ig/infragistics.js")"></script>

@( Html.Infragistics().Grid("Grid2", Model.GridModel))

And then had a controller action method, called, InfragisticsGrid:

public ActionResult InfragisticsGrid(){

     //code that makes infragistics' GridModel

    var igModel = 

new GridModel { Height = "500px", Columns = new List<GridColumn>() { new GridColumn("Product ID", "ProductID", "number", "100px"),
new GridColumn("Product Number", "ProductNumber", "string", "205px"),
new GridColumn("Standard Cost", "StandardCost", "number", "110px")

     return PartialView("ExampleGrid", igModel);

}

I use the code above along with other javascript to inject the grid into a templated section of code in the DOM and end up with this error:

Uncaught TypeError: Cannot call method '_injectGrid' of undefined


Can you tell my why the grid renders fine when I declare the grid in the .cshtml file, but when I create a grid model in my C# code and pass it through the PartialView function, the browser generates an error?  Is there an example available that I can download that generates a grid using the GridModel approach?


My reference was here:http://help.infragistics.com/Help/NetAdvantage/jQuery/2012.1/CLR4.0/html/igGrid_Developing_ASP_NET_MVC_Applications_with_igGrid.html