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.

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
6279

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

@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 ;).
Cancel
Reply

Reject Answer

Cancel
335

Travis posted over 12 years ago in reply to Travis

Sorry wrong thread. :(
Cancel
Reply

Cancel
335

Travis posted over 12 years ago in reply to Sagar

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);
                }
            });

        }
    });
Cancel
Reply

Cancel
175

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

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

Cancel