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() )
Hello led zeppelin,
Thank you for posting in our community.
I am currently looking into this matter for you and I am discussing the issue with our senior staff. I will keep you posted on my progress and I will get back to you as soon as I have any new information for you.
Please do not hesitate to contact me if you have any further questions.
PS: I have read the replies in this thread http://es.infragistics.com/community/forums/p/79298/400741.aspx#400741
But i am unable to achieve what i wanted. Please provide a short working sample if you can of autogeneratecolumns(true) using MVC Helper where all the settings are set in action method of controller rather than the ViewPages.
After investigating this matter further and discussing it with our developers I believe the reason for this issue is that AutoGenerateColumns property is not recommended to be used with dataSourceUrl property. AutoGenerateColumns(true) in MVC expects data source to be available in initialization time, because it implicitly generates columns definitions and sets AutoGenerateColumns(false). This is done on purpose in order to support other basic scenarios. When DataSourceUrl is used and you didn't provide data source explicitly the data source is not available at initialization time, thus the grid generates a JavaScript error on the client side in browser error console (as you may notice with the sample project attached)
Additionally, in order to change your model dynamically you should initialize the grid using Java Script instead of using MVC chaining initialization.
Regarding your remote paging scenario what I can suggest is explicitly setting the pageIndexUrlKey and pageSizerUrlKey. By design, if they are not set the grid will make an oData query to retrieve values for them. The configuration of your grid should be similar to the following:
$('#grid1').igGrid({ dataSource: "/Home/GetData", // your data should be retrieved here autoGenerateColumns: true, features: [ { recordCountKey: 'TotalRecordsCount', pageIndexUrlKey: 'page', pageSizeUrlKey: 'pageSize', name: 'Paging' } ]
I am attaching a sample project for your reference. In this application there are two igGrids – one created using MVC Helper, which is not loading the data correctly and one created using Java Script, which is working as expected.
I hope you find this information helpful, please let me know if you need any additional information regarding this matter.
Hello zeppelin led,
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.
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.