Hello,
I am new to MVC/jQuery so there may be something that I am doing wrong. I have attached a very simple project that attempts to create igGrid using a GridModel. There aren't any errors, but the grid is not visible. If I use $.ig.loader to generate the grid, the grid shows up just fine. Note that when applying the first approach, generated script does not produce a call to $.ig.loader. Please advise.
Thanks,
Daniel
Hi, Daniel,
In MVC, you have to initialize the loader with the Loader MVC Wrapper:
<!--NetAdvantage for jQuery resources loader--> <script src="js/infragistics.loader.js" type="text/javascript"></script> @( Html.Infragistics().Loader() .ScriptPath(Url.Content("js/")) .CssPath(Url.Content("css/")) .Theme("metro") .Render() ) <div> @Html.Infragistics().Grid("grid2", Model.TestModel) </div>
More information about loader you can read here.
Regards,
Stanimir
Stanimir,
Thanks, that worked.
As a follow up question, how can I dynamically generate igGrid columns?
Basically, depending on search criteria entered on a page, the results returned by a corresponding WCF service call may contain different sets of columns.
I stumbled upon this post http://community.infragistics.com/forums/p/64090/324867.aspx#324867 where an Infragistics engineer provided a solution to something similiar (igGridDataTableJsonMod.zip). However, I don't want to use the AutoGenerateColmuns feature to populate the columns but rather do it myself.
Can you point me in the right direction?
Thank you!
Hi,
Try to bind grid with JavaScript in the view. You can dymanically generete columns there, too. If you don't know what sets of columns can be return by the WCF service, you need to analylize the response from the WCF service:
<script type="text/javascript">
$.ig.loader({
scriptPath: "http://localhost/ig_ui/js/",
cssPath: "http://localhost/ig_ui/css/",
resources: "igGrid"
});
$.ig.loader(function () {
// Dynamically generate igGrid columns based on WCF Service
var myColumns = [
{ headerText: "ID", key: "ID", width: "50px", dataType: "number" },
{ headerText: "Name", key: "Name", width: "130px", dataType: "string" }
];
$("#gridRemoteJSON").igGrid({
dataSource: "http://services.odata.org/OData/OData.svc/Categories?$format=json&$callback=?",
responseDataKey: "d",
autoGenerateColumns: false,
columns: myColumns,
</script>
I think this topic will be helpful for you Getting started with igGrid, oData and WCF Data Services.