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.

Parents

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

Reply

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

Children

250

Rocky posted over 11 years ago in reply to Martin Pavlov

@@Martin Pavlov : Thanks for the quick response. Your 2nd option works perfectly for my scenario what you have given....

But yesterday i was trying to destroy whole grid while reloading with new data by re initializing from scratch by using $(grd).igGrid('destroy'); which was not working for me which i found the problem was with the table element. then I changed table element to div then it woks fine. I just mentioned might be useful for someone..
Cancel
Reply

Cancel
23953

Offline Martin Pavlov posted over 11 years ago in reply to Rocky

Hello Abhijit,
You don't need to create an $.ig.DataSource instance. Actually igGrid creates one behind the scenes.
Here are 2 approaches which you can try:
Approach 1
Just pass your data source url (which returns a valid JSON data) to the "dataSource" setting of igGrid like this:

$(grd).igGrid({
width: gridWidth,
autoGenerateColumns: false,
columns:columns,
dataSource: "http://your_data_source_url",
features: oSettings
});

Then in your button click event you need to call the igGrid.dataBind API like this:
$(grd).igGrid("dataBind");

Approach 2
If Approach 1 doesn't work for you try to set the new data source (in your button click function) with the following API

$(grd).igGrid("option", "dataSource", newjson);

Hope this helps,
Martin Pavlov
Infragistics, Inc.
Cancel
Reply

Cancel
250

Rocky posted over 11 years ago in reply to Martin Pavlov

Thanks for the reply. But i am not able to refresh the grid. I have binded the datasource with new data but dnt know how i can fresh the data.

My scenario: on button click i will get new json data from ajax call and data will pass to datasource for igGrid. and coloumn array defined in the jquery file

Please find below code for my changes.

if you suggest any any sample code or documentation for rebinding the grid with new datasource in jquery. Its urgent please reply.

function reloadgrid(newjson)
{
$(function () {
ds = new $.ig.DataSource({
dataSource: newjson

});

ds.dataBind();
$(gridId).igGrid("dataBind");
});
}
Cancel
Reply

Cancel
23953

Suggested Answer
Offline Martin Pavlov posted over 11 years ago in reply to Rocky

Hello Abhijit,

The error you get means that the igGrid instance is not destroyed. jQuery UI version 1.9 introduced a breaking change of how the widget instances are kept in the .data() function. We provide a fix for this breaking change in Ignite UI 13.1 onward.

Because you have 12.1 RTM you have two options:

1.Use a jQuery UI version below 1.9.

2.Use a igGrid.dataBind API to rebind the grid - the grid igGrid.dataBind API will reload the data from the data source (if the data source is remote url it will make a request to this url automatically) without the need to re-create the grid.

Hope this helps,
Martin Pavlov
Infragistics, Inc.
Cancel
Reply

Reject Answer

Cancel
250

Suggested Answer
Rocky posted over 11 years ago in reply to [Infragistics] Borislav Traykov

When i am trying to repopulate the gird without $(grd).igGrid('destroy'). i am getting the below error.

which is same issue mentioned in the forum (Error: Changing the following option after the igGrid has been created is not supported: autoGenerateColumn).

My version iggrid:

$.ui.igGrid.version - "12.1.20121.1010"

As suggested in the forum i have used $(grd).igGrid('destroy'); but on reloading grid, grid disappears. So please help!!!

Please suggest me what to do. its urgent. please find my sample code mentioned below:

//grid implementation
$("#submit").click(function () {
var logGrid;

getData().done(function (data, textStatus, jqXHR) {
//initilize Grid
if (data.length > 0) {

logGrid = new grid(gridId, getColumns(), data, getFeature());
}

});
});

//get columns

function getColumns() {
var columns = [];
columns = [
{ headerText: "ID", key: "Id", dataType: "string", template: "${Id}" },
{ headerText: "Date", key: "Date", dataType: "Date" },

{ headerText: "User", key: "User", dataType: "string" }
];
return columns;
}

//Set features
function getFeature() {
var oSettings = [
{
name: "Paging",
type: "local",
pageSize: 100
},
{
name: "Sorting",
type: "local"
},
{
name: "Selection",
mode: "cell",
activeCellChanged: getLogDetails
},
{
name: "Filtering",
type: "local",
filterDropDownItemIcons: false,
filterDropDownWidth: 200
},
{
name: "Tooltips"
},
{
name: "Resizing"
},
{
name: "Hiding"
},
{
name: "GroupBy"
}
];
return oSettings;
}

//grid function
function grid(grd, columns, data, oSettings) {
$.ig.loader({
scriptPath: "/Scripts/IG/",
cssPath: "/css/IGStyle/",
resources: "igGrid.*"
});
$.ig.loader(function () {

$(grd).igGrid('destroy');

$(grd).igGrid({
width: gridWidth,
autoGenerateColumns: false,
columns:columns,
dataSource: data,
features: oSettings
});

});
}
});

Thanks you in advance....
Cancel
Reply

Reject Answer

Cancel