Issue binding new Dataset to the Jquery Grid

175

Issue binding new Dataset to the Jquery Grid

Sagar posted over 12 years ago

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">

<head>

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>

</head>

<body>

<br>

</table>

</body>

</html>

Any help or suggestions will be appreciated.

6279

Suggested Answer
[Infragistics] Borislav Traykov posted over 12 years ago in reply to Sagar

sagarsalvi83 said:
Can you please tell us exactly on what does this version depends on i.e. JS files or DLL or what?

Sure!
The expression I gave you ($.ui.igGrid.version) is recorded in the igGrid's JavaScript file - in you case that's combined (and minified) file, containing all of our controls' BLOCKED SCRIPT

<script type="text/javascript" src="SamplesBrowser/SamplesCommon/jQuery/Scripts/combined/min/ig.ui.min.js"></script>

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\jQuery

Then 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.
Cancel
Reply

Reject Answer

Cancel
175

Sagar posted over 12 years ago in reply to [Infragistics] Borislav Traykov

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?
Cancel
Reply

Cancel
6279

[Infragistics] Borislav Traykov posted over 12 years ago in reply to Anwarali Hajwane

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.version

All the best,
Borislav
Cancel
Reply

Cancel
75

Anwarali Hajwane posted over 12 years ago in reply to [Infragistics] Borislav Traykov

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
Cancel
Reply

Cancel
6279

Suggested Answer
[Infragistics] Borislav Traykov posted over 12 years ago

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
Cancel
Reply

Reject Answer

Cancel