Forums Ignite UI for jQuery
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
Close
Sagar
175
Issue binding new Dataset to the Jquery Grid
posted

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

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

 

        $(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> 

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

</head> 

<body> 

    <br> 

    <table id="grid1"> 

    </table>     

</body> 

</html>

 

Any help or suggestions will be appreciated.

Parents
  • 6279
    Suggested Answer
    posted


    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

  • 75
    posted 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

     

Reply Children