Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Issue binding new Dataset to the Jquery Grid


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

<html xmlns=""> 


    <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 () {


                autoGenerateColumns: true,

                dataSource: products



        function ReLoadData() {


            //$('#grid1').igGridUpdating( "destroy" );

            $('#grid1').igGrid('dataSourceObject', jsonData);





        igGrid - AutoGenerateColumns


   <input type="submit" onclick="ReLoadData();" value="Reload" />




    <table id="grid1"> 





Any help or suggestions will be appreciated.

Parents Reply
  • 175
    posted 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?