Because it is not possible to set the datasource of igGrid to Javascript-Variable with MVC helper (see other Post here), I tried a workaround: In rendered-Event I set datasource to Javascript variable containing Json data array. Seems to function as expected, until I set height of igGrid to absolute px on initialization. Now grid header is rendered twice. Is's a bug for sure. Occurs only if iggrid colum definitions are specified, grid height is set (grid initialization) and datasource is set in render-Event.
Example (freely adapted from Infragistics example "Grid JSON Binding") http://jsfiddle.net/p86zf5fc/4/
Infragistics IgniteUI 2016.1 (16.1.20161.1009)
Hello Peter,
Thank you for posting in our forum.
The issue in this case is that the rendered event will be triggered a second time (since changing the data source requires the grid to re-render and will therefore trigger the event again).
If you’d like to set a different data source when the grid gets initialized on the client-side I suggest using the dataBinding event where you have direct access to the igDataSource instance (ui.dataSource). You can directly set to it the json data you want to display in the grid, for example:
dataBinding: function (evt, ui) {
ui.dataSource.settings.dataSource = data;
}
You can refer to the following jsfiddle for a full example:
http://jsfiddle.net/p86zf5fc/5/
Let me know if you have any questions.
Best Regards,
Maya Kirova
Infragistics, Inc.
http://ko.infragistics.com/support
Thank you for the hint with dataBinding event. You also set the datasource of igGrid to empty Json array on igGrid initialization. Setting existing Json array on client side as datasource on igGrid initialization with MVC helper is the source problem. Your hint also requires to set a Json array as datasource (an empty one). Otherwise your solution will not function. Setting existing Json array on client side as datasource on igGrid initialization with MVC helper is not possible!
Any ideas? How to to do it with MVC helper?
A simpler solution to your issue would be to specify an additional Action that would return the JSON result , which you can parse from the string retrieved form your DB, and set the path to that Action as a DataSourceUrl for your grid.
The grid will make an ajax request to that URL when it needs to render its data.
Example Action:
public JsonResult GetData()
{
string stringData = "[{ID:1, Name: 'Name1'}, {ID:2, Name: 'Name2'}]";
var serializer = new JavaScriptSerializer();
JsonResult result = new JsonResult();
result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
result.Data = serializer.Deserialize<object>(stringData);
return result;
And you can set for the grid’s DataSourceUrl option the path to that action:
gridModel.DataSourceUrl = Url.Action("GetData");
Or you could directly deserialize your string to a collection of T, parse that to IQueryable and use it as a value for the DataSource option of the grid.
You can find more information on how to deserialze a Json string to object here:
https://msdn.microsoft.com/en-us/library/bb355316(v=vs.110).aspx
Thank you. Quainable .DataSource(new List<object>().AsQueryable()) made it.
To make original problem clear: Json data is pulled out of database as a string and embedded into MVC view by rendering it on the right side of a Javascript variable assignment (var dataitems = ...). I wish to initialize iggrid with MVC helper and want the grid to use the Json data in existing variable (set datasource to variable). It is easy without MVC helper:
$("#grid").igGrid({ columns: [ ... ], dataSource: dataitems});
$(
"#grid"
).igGrid({
columns: [ ...
],
dataSource:
dataitems});
But how to achieve it using MVC helper?
Reason for using MVC helper in my application: User is able to configure the grid. In the View I am using C# conditionals ('if') to run relevant parts of the helper to generate init code for the iggrid. It will be a time-consuming task, to write my own helper, if such a "simple" thing is not possible with your MVC helper.
Any data you set as DataSource via the MVC wrapper will be serialized as JSON and set on the client-side. So you can simply set an empty collection as the data source, which will then be serialized as an empty array, for example if you’re setting it via a GridModel instance:
model.DataSource = new List<object>() { }.AsQueryable();
or if you’re setting it via chaining in the View:
.DataSource(new List<object>().AsQueryable())
Let me know if you have any additional questions.