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
No Data
Reply
  • 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

Children