Hi I am using trying to use the 12.2 igGrid with MVC 4. The grid binds with no problem however, when the page is rendered the grid is not visible. Controller code:
[GridDataSourceAction] public ActionResult Index() {
//Get complete list of Templates from DB var templates = from t in db.FolderTypes orderby t.TypeID select new Template { ID = t.TypeID, Desc = t.TypeDescription, Added = t.DateAdded, AddBy = t.AddedBy, Modified = t.DateModified, ModBy = t.ModifiedBy, Enabled = t.Enabled, DisplayOrder = t.DisplayOrder };
return View(templates.AsQueryable<Template>()); ; }
View code:
@( Html.Infragistics().Grid(Model).ID("grid1") .PrimaryKey("ID") .AutoGenerateColumns(true) .AutoGenerateLayouts(true) .Virtualization(false) .LocalSchemaTransform(true) .RenderCheckboxes(true) .Columns(column => {
column.For(x => x.ID).DataType("string").HeaderText("ID"); column.For(x => x.Desc).DataType("string").HeaderText("Description"); column.For(x => x.AddBy).DataType("string").HeaderText("Added By"); column.For(x => x.Added).DataType("date").HeaderText("Date Added"); column.For(x => x.ModBy).DataType("string").HeaderText("Modified By"); column.For(x => x.Modified).DataType("date").HeaderText("Date Modified"); column.For(x => x.Enabled).DataType("string").HeaderText("Enabled"); }) .Features(features => { features.Sorting().Type(OpType.Local); features.Paging().PageSize(30).Type(OpType.Local); features.Selection().Mode(SelectionMode.Row); features.Updating().EnableAddRow(false).EnableDeleteRow(true) .EditMode(GridEditMode.RowEditTemplate) .RowEditDialogContainment("owner") .RowEditDialogWidth("300px") .RowEditDialogHeight("200px") .RowEditDialogOkCancelButtonWidth("100px") .RowEditDialogFieldWidth("150px") .ShowReadonlyEditors(false) .RowEditDialogRowTemplateID("rowEditDialogRowTemplate1") .ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("ID").ReadOnly(true); settings.ColumnSetting().ColumnKey("AddBy").ReadOnly(true); settings.ColumnSetting().ColumnKey("Added").ReadOnly(true); settings.ColumnSetting().ColumnKey("ModBy").ReadOnly(true); settings.ColumnSetting().ColumnKey("Modified").ReadOnly(true);
settings.ColumnSetting().ColumnKey("Desc").EditorType(ColumnEditorType.Text).TextEditorOptions(options => options.ValidatorOptions(option => { option.KeepFocus(ValidatorKeepFocus.Never); option.BodyAsParent(false); option.Required(true); })); settings.ColumnSetting().ColumnKey("Enabled").EditorType(ColumnEditorType.Text).TextEditorOptions(options => options.ValidatorOptions(option => { option.KeepFocus(ValidatorKeepFocus.Never); option.BodyAsParent(false); option.Required(true); })); }); }) .DataBind() .Height("500px") .Width("100%") .Render())
I am also having this issue, the model has the data and it appears to load but the grid is not visible, was there a solution to this?
When I load the grid in my MVC controller using a GridModel instance, any remote filtering/sorting does not work. I get a js error 'Uncaught TypeError: Cannot read property 'length' of undefined'. After doing some research, I think it's cause the default ResponseDataKey="Records" does not work since my datasource is simply an IQueryable<T>. Please note that if I lod the grid directly in the View using the chaining syntax, everything works fine.
hey,
When you say data is there, do you mean that the JSON data is coming as part of the response? Could you attach the initial page source, when you load the page? Thank you. Several things you can try:
Remove this part, it is not needed:
ResponseDataKey(String.Empty).
You also seem to have a primary key ID, but there is no such column defined in the grid. I suggest to remove the primaryKey property from your view and see if it changes things.
Thanks,
Angel
I am still having this issue. I changed the code to the code below. Not sure what I am missing, I checked the page source code and the data is there however it just isn't rendering. Please Help!!
@model IEnumerable<DocAuto.WSM.Web.Models.TemplateViewModel> @{ ViewBag.Title = "Template Manager"; } <script src="@Url.Content("~/Scripts/modernizr-2.5.3.js")"></script> <script src="@Url.Content("~/Scripts/jquery-1.7.1.js")"></script> <script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.js")"></script> @* <!-- This script reference is require by the Infragistics Loader rendered below --> <script src="@Url.Content("~/Content/js/infragistics.loader.js")"></script>*@ <h2>Template Manager</h2> <p> @Html.ActionLink("Create New", "Create") </p> @(Html.Infragistics().Loader() .ScriptPath(Url.Content("~/Content/js/")) .CssPath(Url.Content("~/Content/css/")) .Render() ) @(Html.Infragistics().Grid(Model.AsQueryable()). ID("templateGrid"). AutoGenerateColumns(false). AutoGenerateLayouts(false). ResponseDataKey(String.Empty). PrimaryKey("ID"). LoadOnDemand(false). Columns(column => { column.For(x => x.Name).HeaderText("Name").DataType("string"); column.For(x => x.DateCreated).HeaderText("Date Created").DataType("string"); column.For(x => x.CreatedBy).HeaderText("Created By").DataType("string"); column.For(x => x.DateUpdated).HeaderText("Last Modified Date").DataType("string"); column.For(x => x.UpdatedBy).HeaderText("Modified By").DataType("string"); column.For(x => x.Enabled).HeaderText("Enabled").DataType("string"); }) .Width("400px") .DataBind() .Render() )
Yes, Im using the loader, this is the code that I'm using to call the loader. I am not getting any client side errors, The page renders but my grid isnt there.
@model IQueryable<Template>
@using Infragistics.Web.Mvc
@section HeadContent { <script src="@Url.Content("~/Scripts/Infragistics/js/infragistics.loader.js")"></script> @(Html.Infragistics().Loader() .ScriptPath(Url.Content("~/Scripts/Infragistics/js/")) .CssPath(Url.Content("~/Content/Infragistics/css/")) .Render() ) <style type="text/css"> .tableBackGround { background-color: #FF7283; } .labelBackGround { background-color: #FFE96D; } </style> <script id="rowEditDialogRowTemplate1" type="text/x-jquery-tmpl"> <tr class="tableBackGround"> <td class="labelBackGround"> ${headerText} </td> <td data-key='${dataKey}'> <input /> </td> </tr> </script> <script type="text/javascript"> $("#grid1").live("iggridupdatingdatadirty", function (event, ui) { $("#grid1").igGrid("saveChanges"); return false; }); </script>}