Hi,
I am having issues with the autogeneratecolumns feature of igGrid.
I am given the task of making a generic grid which could render the data of a dynamic datasource provided to it at runtime.
I am using Asp.Net MVC. I have a view named Listing.cshtml which will get an action method and cotroller name in its ViewBag and render the grid with datasourceurl set as the ViewBag.ActionMethod & ViewBag,ControllerName supplied to it.
This means that the grid will be displaying dynamic data and its datasource will change dynamically, because GridDataSource action name will be passed as a parameter.
When I set autogeneratecolumns(true) my grid does not render the rows and instead shows a loading circle animation which keeps on loading. I was just checking to see if my grid would render the columns automatically or not, because if I specify the columns explicitly the grid renders fine. When i set autogeneratecolumns to true, the grid does not display data.
Why is that happening? Please guide me i am stuck here. How can I render the grid dynamically without knowing the columns of the datasource through Asp.Net MVC helper.
Also is this achievable that I have a single .cshtml page for my grid and at runtime the page is supplied with the DataSourceUrl, and after reading it from the ViewBag , The grid loads its datasource at runtime. Is this possible? If it is then what would I provide inside the @(Html.Infragistics().Grid<????>() ??
And would the grid render without specifying the @model directive on top of page because the model will change at runtime.
Please help me out here , and if possible please provide a working sample in which the grid datasource is loaded dynamically and its datasource is set to a string which contains the name of [GridDataSourceAction].
Also why my grid is no displaying data when i set autogeneratecolumns to true and renders fine when I explicitly specify the columns.
Any help would be appreciated.
AutoGenerateColumns(true) does not work when I am using MVC helper , then i tried the Jquery way but in MVC Helper method the grid automatically supplied the pagesize & pageIndex parameters to my method through querystring but here because i am makin an ajax call to get json data and the grid is not initialized , the page size & pageIndex variable are null and this results in exception.
Please tell me a way through which I can use a single grid for various datasources(dynamically changing at runtime) and ASP.Net MVC Helper/Controller method will be great because I dont want to initialize the grid and supply the datasource through Jquery for some reasons.
QUESTION:Why is my autoGenerateColumns(true) not working when I use ASP.Net MVC Helper, the grid just shows the loading circle animation.
QUESTION:If the grid will be supplied with dynamic datasource, what will I write in place of @model directive & @(Html.Infragistics().Grid<????>() ?????
This is the Jquery way through which i tried loading the grid but it does not get the page size & pageIndex parameters. I am using Remote pagination. These two parameters were automatically supplied to the grid when i used ASP.Net MVC Helper.
<table id="grid"></table><script> $(function () { $.ajax({ type : "GET", dataType : "json", url : "/Users/GetUsers", success: function (data) { $("#grid").igGrid({ autoGenerateColumns: true, defaultColumnWidth: "150px", width: "100%", dataSource: data, responseDataKey: "Records", features: [ { name: "Paging", type: "local", }, { name: "Sorting", type: "local" }, { name: "Filtering", type: "local" } ] }); console.log(data); } }); }); </script>
The grid works fine when i specify the columns explicitly.
My action method Users/GetUsers returns Json data.
When i used Jquery to implement autogeneratecolumns(true) , the grid rendered the data but i could not get the pageSize & pageIndex properties in my GridDataSource Action method. When i use MVC Helper , i get the pageSize PageIndex parameters but autogeneratecolumns does not work. Please help me out here.
This is the code which I wrote to render the grid using MVC Helper. But the grid just shows loading circle animation and does not get data.
@{ ViewBag.Title = "UsersListing";}<h2>UsersListing</h2>@using System.Data;@model IQueryable<COMMON.Models.User> @(Html.Infragistics().Grid<COMMON.Models.User>() .ID("MyGrid") .PrimaryKey("usr_Username") .AutoGenerateColumns(true) .AutoGenerateLayouts(true) .Features(features => { features.Tooltips(); features.Responsive().EnableVerticalRendering(false); features.Resizing(); features.Sorting(); features.Paging().PageSize(10).Type(OpType.Remote).RecordCountKey("ResponseCountKey"); features.Filtering().FilterDialogContainment("window").Mode(FilterMode.Advanced).Type(OpType.Local); }) .ResponseDataKey("Records") .DataSourceUrl(Url.Action("GetUsers","Users")) .Width("1000px") .Height("400px") .DefaultColumnWidth("90px") .DataBind() .AvgRowHeight("200px") .Render() )
Thanks for the detailed response Vasya. Appreciate your help. Now I understand that this was a dataSource issue but I didnt know how to provide different dataSource at runtime as required.
I wanted to use MVC Helper because of some reasons and not Jquery.
So I tried this method and its working now.
VIEW:
@model Infragistics.Web.Mvc.GridModel
@Html.Partial("_ListingCombo")<br/>@if(ViewBag.entityValue != null){ @Html.Infragistics().Grid(Model)}
CONTROLLER:
[HttpPost] public ActionResult Listing(string entityValue) { ViewBag.entityValue = entityValue; GridModel gridModel = GetGridModel(); return View(gridModel); }
private GridModel GetGridModel() { GridModel gridModel = new GridModel(); gridModel.ID = "MyGrid"; gridModel.AutoGenerateColumns = true; gridModel.AutoGenerateLayouts = true; gridModel.PrimaryKey = "usr_Username"; gridModel.Width = "100%"; gridModel.DataSourceUrl = Url.Action("GetUsers","Users"); //I think this way I can provide these value at runtime to change datasource? gridModel.DataSource = GetUsrs().AsQueryable();// And also invoke another method inplace of GetUsrs at runtime to change datasource dynamically? gridModel.ResponseDataKey="Records"; gridModel.Features.Add(new GridTooltips()); gridModel.Features.Add(new GridFiltering() { Type = OpType.Remote, Inherit = true}); gridModel.Features.Add(new GridSorting() { Type = OpType.Remote, Inherit = true }); gridModel.Features.Add(new GridPaging() { Type = OpType.Remote, Inherit = true, PageSize = 5 ,CurrentPageIndex=0,TotalRecordsCount=20 }); return gridModel; }
What do you suggest, Is this approach right ?
Hello zeppelin led,
Thank you for getting back to me.
When using this approach initially the data source for the igGrid will be loaded from the DataSource property. Afterwards, when requests are made, for example from the remote features being used(such as Filtering, Sorting, Paging) the data source will be loaded from the action set in the DataSourceUrl property.
I hope you find this information helpful.
Please let me know if you have any further questions regarding this matter.
Thanks for the information
I am facing another problem right now. When I first wrote code of the grid in my controller (posted above), there was a row on top of the grid for filtering data , which contained textboxes for searching the grid items, but now for some strange reason that row disappeared, I dont remember doing anything with the filtering feature, I just notcied it is not there anymore, I tried to change the filtering type from remote to local and then back to remote but that too dint help. Other features like pagination are working but the filtering feature mysteriously disappeared. Can you help me in this regard, what could have happened .. I only played around with gridDataSource & gridDataSourceUrl , but I didnt change any filtering property. please help me out here.
Also when I increase the grid page size, the grid container expands , I need a vertical scroller to appear and dont want the grid to expand itself.
Thanks. Please try to answer these questions here if you can because I think these are more or less similar issues regarding the grid features.
Everything seems fine with the way Filtering behavior is defined in your code snippet.
In order to investigate this behavior further I will need small isolated ready-to-run sample where this behavior is reproducible. This is going to be highly appreciated and will help me to look deeper into this issue in pursuit of the root cause of the behavior.
Looking forward to hearing from you.
One last question:
When I increase the grid page size, the grid container expands but I need a vertical scrollbar to appear and dont want the grid to expand itself.
How would i do this, i am using mvc controller's action method to create my gridmodel. How do i add a feature to achieve this.
Please feel free to contact me if oyu have any additional questions regarding this matter.
I am glad that you consider my suggestions helpful.
Please feel free to contact me if you have any additional questions regarding this matter.
Thanks alot for your help & time, much appreciated.
I am glad that you resolved the issue with filtering.
What I can suggest for achieving your second requirement is setting a fixed height to the igGrid using its height property. In this scenario if you change the page size of the Paging feature and the total sum of all the row heights exceeds the initially set height of the grid a scrollbar will appear for the grid.
I hope this will help you achieve the look and feel for igGrid that you are looking for.
Please let me know if you have any additional questions regarding this matter.