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>