Hi,
I have a html page which host jquery grid and it binded to hard coded Json data. Note that I have set autoGenerateColumns property to true. Also I have added a button, on click of that i am trying to rebind the grid with new data.
If new data is having same number of columns and same name then it works fine. Grid reflects the data. But if new data is having completely new columns then it do not get reflected in UI. It removes all the data rows but the header still shows old column names.
I also tried using destroy but it completely removes the grids from UI.
Following is my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" href="SamplesBrowser/SamplesCommon/jQuery/Styles/min/ig/jquery.ui.custom.min.css" rel="stylesheet" />
<link type="text/css" href="SamplesBrowser/SamplesCommon/jQuery/Styles/base/ig.ui.min.css" rel="stylesheet" />
<script type="text/javascript" src="SamplesBrowser/Scripts/jquery.js"></script>
<script type="text/javascript" src="SamplesBrowser/Scripts/jquery-ui.js"></script>
<script type="text/javascript" src="SamplesBrowser/SamplesCommon/jQuery/Scripts/combined/min/ig.ui.min.js"></script>
<script type="text/javascript" src="SamplesBrowser/Scripts/jquery.tmpl.js"></script>
<script type="text/javascript">
var products = [];
products[0] = { "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381" };
products[1] = { "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327" };
products[2] = { "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349" };
var jsonData = [];
jsonData[0] = { "EmployeeID": 1, "EmployeeName": "Samuel Das" };
jsonData[1] = { "EmployeeID": 2, "EmployeeName": "Steve Austin" };
$(window).load(function () {
$("#grid1").igGrid({
autoGenerateColumns: true,
dataSource: products
});
function ReLoadData() {
//$('#grid1').igGrid('destroy');
//$('#grid1').igGridUpdating( "destroy" );
$('#grid1').igGrid('dataSourceObject', jsonData);
$('#grid1').igGrid('dataBind');
}
</script>
<h1>
igGrid - AutoGenerateColumns
</h1>
<input type="submit" onclick="ReLoadData();" value="Reload" />
</head>
<body>
<br>
<table id="grid1">
</table>
</body>
</html>
Any help or suggestions will be appreciated.
Hi, You've stumbled upon a bug I'm afraid - it's specific to the fact that the grid is bound to a TABLE element. Here's support case number of this bug (you can use it to track the progress on the issue):CAS-90176-SLWTQ7
A fix for it will be available as soon as our next Service Release (in May) is out. Until then, let me give you a workaround which will hopefully work fine for you. I'm afraid that the case of feeding the igGrid with a differently-structured source data won't work with the dataSourceObject() API function. In order to get it working you will need to destroy the grid (yes, you were on the right track :)) and then recreate it. Here's how I've altered your code in order to get it to work: <script type="text/javascript"> var products = []; products[0] = { "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381" }; products[1] = { "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327" }; products[2] = { "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349" }; var jsonData = []; jsonData[0] = { "EmployeeID": 1, "EmployeeName": "Samuel Das" }; jsonData[1] = { "EmployeeID": 2, "EmployeeName": "Steve Austin" }; var gridOptions = { autoGenerateColumns: true, dataSource: products }; $(window).load(function () { $("#grid1").igGrid(gridOptions); }); function ReLoadData() { $('#grid1').igGrid('destroy'); gridOptions.dataSource = jsonData; $("#grid1").igGrid(gridOptions); } </script> And this is where the bug with the TABLE element kicks in (you can try it for yourself to see the outcome). The workaround is to use a DIV element instead of a TABLE. Cheers, Borislav
Hi Borislav,
Thanks for your prompt help over this issue.
We tried working around the issue, referring the code you provided. However, we are running in to another issue now. The Grid loads up fine, but after we click on "Reload" button, we get following JavaScript error (and the grid vanishes): "Changing the following option after the igGrid has been created is not supported: autoGenerateColumns".
Any idea if we are missing anything? Following is the code we are doing:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link type="text/css" href="SamplesBrowser/SamplesCommon/jQuery/Styles/min/ig/jquery.ui.custom.min.css" rel="stylesheet" /> <link type="text/css" href="SamplesBrowser/SamplesCommon/jQuery/Styles/base/ig.ui.min.css" rel="stylesheet" /> <script type="text/javascript" src="SamplesBrowser/Scripts/jquery.js"></script> <script type="text/javascript" src="SamplesBrowser/Scripts/jquery-ui.js"></script> <script type="text/javascript" src="SamplesBrowser/SamplesCommon/jQuery/Scripts/combined/min/ig.ui.min.js"></script> <script type="text/javascript" src="SamplesBrowser/Scripts/jquery.tmpl.js"></script> <script type="text/javascript"> var products = []; products[0] = { "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381" }; products[1] = { "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327" }; products[2] = { "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349" };
var jsonData = []; jsonData[0] = { "EmployeeID": 1, "EmployeeName": "Samuel Das" }; jsonData[1] = { "EmployeeID": 2, "EmployeeName": "Steve Austin" };
var gridOptions = { autoGenerateColumns: true, dataSource: products };
$(window).load(function () { $("#grid1").igGrid(gridOptions); });
function ReLoadData() { $('#grid1').igGrid('destroy'); gridOptions.dataSource = jsonData; $("#grid1").igGrid(gridOptions); } </script> <h1> igGrid - AutoGenerateColumns </h1> <input type="submit" onclick="ReLoadData();" value="Reload" /></head> <body> <br> <div id="grid1"></div> </body> </html>
Regards,Anwar
Hi Anwar,
Usually you would get that error when the igGrid isn't initialized correctly or if one tries to change autoGenerateColumn's value at runtime.However, when I ran your sample with the latest Service Release build (#2084), clicking the Reload button worked like a charm.Can you please clear your browser's cache and give it another try?(Firefox and Chrome have given me a lot of headaches with their "friendly" script caching in such situations)
Also, if the problem persists, please let me know which build you are using.Tip: The easiest way to find this out is to type the following in the browser's JavaScript console:$.ui.igGrid.versionAll the best,Borislav
Hey Borislav Traikov,
I tried clearing the browser cache but the issue remained. So I checked the version and it showed 11.2.20112.2045. And as per your feedback this code works with #2084. I do have Service Release Build 2084 installed on my machine but in spite of that it alerts #2045 version number.
Just to highlight in our web application we just have JS and CSS file included. There are no DLL references in our app. This indicates that grid is completely driven by JS and CSS files. And these JS and CSS files are copied from the Infragistics Sample project (2011.2) code.
Can you please tell us exactly on what does this version depends on i.e. JS files or DLL or what?
@sagarsalvi83 - glad you're using the latest Service Release build. Generally, I would recommend that you always keep it up to date. So still have more issues fixed than introduced in each service release so it's safe to be up to date :). @triffle - no prob ;).
Sorry wrong thread. :(
Okay here's my final solution. I call destroy each time per another thread about reloading that I found... I should really write a blog for you guys. :)
function getData() {
//Grid must be destroyed rather than reloaded per a bug that is mentioned //in this forum post. Kind of gross, but it works. //http://forums.infragistics.com/forums/p/68376/346580.aspx //if ($("#ordersearch").igGrid("igGrid")) { $('#SearchResults').igGrid('destroy'); //} $.ajax({ type: 'POST', url: 'SearchService.asmx/SearchEntity', data: "{SearchCriteria: '" + $("#SearchText").val() + "'}", contentType: 'application/json; charset=utf-8', dataType: 'json', success: function (msg) {
var obj = jQuery.parseJSON(msg.d);
$("#SearchResults").igGrid({ autoGenerateColumns: false, columns: [ { headerText: "Id", key: "Id", width: "50px", dataType: "number" }, { headerText: "Name", key: "Name", width: "100px", dataType: "string" }, { headerText: "Age", key: "Age", width: "50px", dataType: "string" }, { headerText: "Address", key: "Address", width: "100px", dataType: "string" } ], dataSourceType: 'json', dataSource: obj, height: '300px' }); }, error: function (xhr, ajaxOptions, thrownError) { alert("Something bad happened. Code: " + xhr.status + ". Error: " + xhr.responseText); } }); } });
Updating JS and CSS files from "Program Files/Infragistics/NetAdvantage 2011.2/jQuery" location fixed rebinding issue. Also IG version displayed now is #2084.
Appreciated all your help. Thanks.
sagarsalvi83 said:Can you please tell us exactly on what does this version depends on i.e. JS files or DLL or what?
However, note that you are referencing the file from the Samples Browser.My quess is that you have a Samples Browser installed (yes, it has a separate installer) with build #2045 and then you have installed the latest Service Release build (#2084).The installed Samples Browser is not affected by Service Release installations so in order to be sure that you are referencing the JS and CSS files you have really installed, I'd suggest you add a virtual folder called "ig_ui" in your web server (probably an IIS) which should point to:%program files%\Infragistics\NetAdvantage 2011.2\jQueryThen you can reference the Infragistics JS and CSS files which are actually from the latest build you've installed.Please let me know if I haven't been clear or if you need further help.