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.