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
Hello,
Thank you for the sample. I reviewed it and I found that the required scripts has not been referenced on the "GridModel" page. After adding them using the loader, the grid was displayed.
@( Html.Infragistics().Loader()
.ScriptPath(Url.Content("~/Scripts/"))
.CssPath(Url.Content("~/Content/"))
.Resources("igGrid")
.Render()
)
Also, I noticed there is no data source set for the grid. In the grid model I added: DataSourceUrl = "GetGridData" and the data was displayed correctly.
Please let me know if this helps.
Here is a dropbox link to a sample app that I've created. The first link, "grid", is based using hardcoded column parameters in the Grid.cshtml view. The second link, "gridModel", attempts to build a grid on the server side and pass it to the GridModel.cshtml view.
https://www.dropbox.com/s/okl1ue1maul5tk5/InfragisticsTestProject.zip?n=120977524