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
Betty
400
bind data returned from web service method to igGrid
posted

Hi,

I was having a trouble to bind data returned from a web service method even I read online samples ( I will post my issue laer on). So I decided to try another way.

though the data binding is ok. however, it doesn't do  filtering, and Paging even the features are set. The error is "Microsoft JScript runtime error: Changing the following option after the igGrid has been created is not supported: virtualization". I noticed that this error only popps up when the .ajax is called the second time. that means after the data is bound to #igGrid already.

first of all, why *.ajax is called more than once? second, is there a way to fix it?

here is my code in test.aspx file:

 <script type="text/javascript">
  
     $(function () {
         $('#Button1').click(getDailyTransactions);
     });

     function getDailyTransactions() {
    
       
         $.ajax({

             type: "POST",

             url: "/Vertex/DailyTransactions.asmx/GetDailyTransactions",

             data: "{}",

             contentType: "application/json; charset=utf-8",

             dataType: "json",

             success: function (response) {

                 records = response.d;

                 $("#igGrid").igGrid({
                     virtualization: false,
                     autoGenerateColumns: true,

                     columns: [
            { headerText: "TransactionID", key: "TransactionID", dataType: "number", width: "150px" },
            { headerText: "PlanID", key: "PlanID", dataType: "number", width: "120px" },
            { headerText: "Premium", key: "Premium", dataType: "number", width: "400px" }
           ],

                     dataSource: records,

                     scrollbars: true,
                     height: '400px',
                     features: [
            {
                name: 'Paging',
                pageSize: 5
            },
            {
                name: 'Sorting'
            },
            {
                name: 'Filtering',
                filterDropDownItemIcons: false,
                filterDropDownWidth: 200
            }
           ]
                 });

               
                 $('#dailyTransaction').empty();

                 $.each(records, function (index, record) {

                     $('#dailyTransaction').append('<p><strong>TransactionID: ' + record.TransactionID + '</strong><br />CustomerID: ' +
                                record.CustomerID + '<br />PlanID: ' +
                                record.PlanID + '<br /> Premium: ' +
                                record.Premium + '<br /></p>');
                 });
             },

             failure: function (msg) {
                 $('#dailyTransaction').text(msg);
             }

         });


       

     }

   


    </script>

Parents
  • 23953
    Offline posted

    Hi Betty,

    The reason you got this error is that the second time the function is executed there is already igGrid instance. In this case igGrid tries to set the new options by invoking_setOption private method and this is where the error is thrown, because some of the igGrid options cannot be set at runtime( like virtualization, rowVirtualization, columnVirtualization , autoGenerateColumns  just to name a few.)

    In your case you should check if there is already igGrid instance and create it if there isn't or rebind it otherwise. Here is the sample code:

    Code Snippet
    1. function getDailyTransactions() {
    2.     $.ajax({
    3.         type: "POST",
    4.         url: "/Vertex/DailyTransactions.asmx/GetDailyTransactions",
    5.         data: "{}",
    6.         contentType: "application/json; charset=utf-8",
    7.         dataType: "json",
    8.         success: function (response) {
    9.             records = response.d;
    10.             if ($("#grid1").data("igGrid") === undefined) {
    11.                 $("#grid1").igGrid({
    12.                     autoGenerateColumns: false,
    13.                     columns: [
    14.                     { headerText: "TransactionID", key: "TransactionID", dataType: "number", width: "150px" },
    15.                     { headerText: "PlanID", key: "PlanID", dataType: "number", width: "120px" },
    16.                     { headerText: "Premium", key: "Premium", dataType: "number", width: "400px" }
    17.                     ],
    18.                     dataSource: records,
    19.                     scrollbars: true,
    20.                     height: '400px',
    21.                     features: [
    22.                     {
    23.                         name: 'Paging',
    24.                         type: "local",
    25.                         pageSize: 2
    26.                     },
    27.                     {
    28.                         name: 'Sorting'
    29.                     },
    30.                     {
    31.                         name: 'Filtering',
    32.                         type: 'local',
    33.                         filterDropDownItemIcons: false,
    34.                         filterDropDownWidth: 200
    35.                     }
    36.                     ]
    37.                 });
    38.             }
    39.             else {
    40.                 $("#grid1").igGrid("dataSourceObject", records);
    41.             }
    42.         },
    43.         failure: function (msg) {
    44.             $('#dailyTransaction').text(msg);
    45.         }
    46.     });
    47. }

    I'm not sure why getDailyTransactions function is invoked twice. Your click binding looks correct. You should check the stack trace on the second getDailyTransactions invoke.

    The reason paging and filtering type option default value is set to null is that those features try to infer the correct value by examining the data source. In your case they should be set to local (because you manually get the data with an Ajax call). However you may have hit a bug. What version of the jQuery controls are you using (my guess is 11.1), what build?

    Hope this helps,

    Martin Pavlov

    Infragistics, Inc.

     

     

     

Reply Children