Hi,
I was having a trouble to bind data returned from a web service method even I read online samples ( I will post my issue laer on). So I decided to try another way.
though the data binding is ok. however, it doesn't do filtering, and Paging even the features are set. The error is "Microsoft JScript runtime error: Changing the following option after the igGrid has been created is not supported: virtualization". I noticed that this error only popps up when the .ajax is called the second time. that means after the data is bound to #igGrid already.
first of all, why *.ajax is called more than once? second, is there a way to fix it?
here is my code in test.aspx file:
<script type="text/javascript"> $(function () { $('#Button1').click(getDailyTransactions); });
function getDailyTransactions() { $.ajax({
type: "POST",
url: "/Vertex/DailyTransactions.asmx/GetDailyTransactions",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
records = response.d;
$("#igGrid").igGrid({ virtualization: false, autoGenerateColumns: true,
columns: [ { headerText: "TransactionID", key: "TransactionID", dataType: "number", width: "150px" }, { headerText: "PlanID", key: "PlanID", dataType: "number", width: "120px" }, { headerText: "Premium", key: "Premium", dataType: "number", width: "400px" } ],
dataSource: records,
scrollbars: true, height: '400px', features: [ { name: 'Paging', pageSize: 5 }, { name: 'Sorting' }, { name: 'Filtering', filterDropDownItemIcons: false, filterDropDownWidth: 200 } ] });
$('#dailyTransaction').empty();
$.each(records, function (index, record) {
$('#dailyTransaction').append('<p><strong>TransactionID: ' + record.TransactionID + '</strong><br />CustomerID: ' + record.CustomerID + '<br />PlanID: ' + record.PlanID + '<br /> Premium: ' + record.Premium + '<br /></p>'); }); },
failure: function (msg) { $('#dailyTransaction').text(msg); }
});
}
</script>
Hi Betty,
The reason you got this error is that the second time the function is executed there is already igGrid instance. In this case igGrid tries to set the new options by invoking_setOption private method and this is where the error is thrown, because some of the igGrid options cannot be set at runtime( like virtualization, rowVirtualization, columnVirtualization , autoGenerateColumns just to name a few.)
In your case you should check if there is already igGrid instance and create it if there isn't or rebind it otherwise. Here is the sample code:
I'm not sure why getDailyTransactions function is invoked twice. Your click binding looks correct. You should check the stack trace on the second getDailyTransactions invoke.
The reason paging and filtering type option default value is set to null is that those features try to infer the correct value by examining the data source. In your case they should be set to local (because you manually get the data with an Ajax call). However you may have hit a bug. What version of the jQuery controls are you using (my guess is 11.1), what build?
Hope this helps,
Martin Pavlov
Infragistics, Inc.
Hi Martin,
I tried your method, the same error displays. $("#grid1").data("igGrid") is always undefined no matter it is called first time or not. The reason is probably because the status of the #grid1 control is not maintained by the page. So it never can tell whether the data is bound or not.
I do have netadvantage2011.1 installed. However I am only reference files given from Jason Beres' June webinar(html5 and Jquery series). The files are listed below. I cannot tell what build.
<script src="Infragistics/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<script src="Infragistics/Scripts/IG/ig.ui.min.js" type="text/javascript"></script>
Thanks so much. You are so detail oriented. You are absolutly right. It is my typo makes my "if statement" work on an unexisting DOM element.
Cheers!
Betty
$("#grid1").data("igGrid") returns then jQuery UI Widget which is instantiated on the DOM element from the selector. If it is always undefined for you then it means that the widget is not instantiated on #grid1 element. Did you check that the selector is correct?
For your convenience I'm attaching my sample for you to investigate.