igGrid Data Binding

I am new to the Infragistics JQuery controls.

I have an igGrid that is using a javascript array of JSON objects as its data source. When I hard code rows into the array, the grid loads the rows just fine. But when I try to load data from my database, the grid will not load any rows. Here is the code I'm using to get rows from my database and load them into the grid:

<table id="grid"></table>

<script type="text/javascript">

  $(function () {

     // one hard coded row

     var userList = [];

               

    

          // get user list

          $.ajax({

        type: "POST",

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

        url: "/AJAX_Handlers/GetUserList.ashx",

        dataType: "json",

        success: function (Result) {

           // load the user list

           $.each(Result, function (i, item) {

           userList[i] = { "Name": Result[i]["Name"], "Email": Result[i]["Email"], "OPhone": Result[i]["OPhone"], "CPhone": Result[i]["CPhone"], "HPhone": Result[i]["HPhone"], "FPhone": Result[i]["FPhone"], "Address1": Result[i]["Address1"], "Address2": Result[i]["Address2"], "City": Result[i]["City"], "ZIP": Result[i]["ZIP"], "Active": Result[i]["Active"], "Contractor": Result[i]["Contractor"] };

});

     },

     failure: function (arg1, arg2) {

        alert(arg1 + '\n\n' + arg2);

     },

     error: function (Result, Error, arg3, arg4) {

        alert(Result + '\n\n' + Error + '\n\n' + arg3 + '\n\n' + arg4);

     }

});

     // define grid properties

     $("#grid").igGrid({

             columns: [

        { headerText: "Name", key: "Name", dataType: "string" },

        { headerText: "Email", key: "Email", dataType: "string" },

        { headerText: "Office #", key: "OPhone", dataType: "string" },

        { headerText: "Cell #", key: "CPhone", dataType: "string", hidden: "true" },

        { headerText: "Home #", key: "HPhone", dataType: "string", hidden: "true" },

        { headerText: "Fax #", key: "FPhone", dataType: "string", hidden: "true" },

        { headerText: "Address", key: "Address1", dataType: "string", hidden: "true" },

        { headerText: "Apt/Suite", key: "Address2", dataType: "string", hidden: "true" },

        { headerText: "City", key: "City", dataType: "string" },

        { headerText: "State", key: "StateName", dataType: "string" },

        { headerText: "ZIP", key: "ZIP", dataType: "string" },

        { headerText: "Active", key: "Active", dataType: "bool" },

        { headerText: "Contractor", key: "Contractor", dataType: "bool" }

             ],

      width: "100%",

      height: "400px",

      autoGenerateColumns: false,

      renderCheckboxes: true,

             dataSource: userList

     });

  });

</script>

I know that the GetUserList.ashx code is working properly because when I add the following line:

alert("hey");

before I define my igGrid, the grid WILL load the data just fine!

Hello jouin,

 

Thank you for posting in our forums!

The reason the igGrid isn't displaying anything is because of the timing.  The $.ajax call is not resolved immediately and the grid is created with an empty array bound to it.  Placing the alert before the igGrid is created actually gives enough time for the $.ajax call to return and populate the array before the grid initializes.

To resolve this, you have a few options:

1. You could create the igGrid during the $.ajax success callback instead of where it is now.

2. You could set the datasource of the igGrid in your $.ajax success callback after you have populated the userList.  The following code will perform this:

$("#grid").igGrid("option", "dataSource", userList);

3. It also looks like you are recreating objects with the same data schema as Result during your $.ajax success callback.  You may be able to assign the Result argument directly as the grid's datasource as well without populating the userList array:

$("#grid").igGrid("option", "dataSource", Result);

4. The igGrid can also automatically fetch data from a remote source.  You may also be able to remove your $.ajax call and set the igGrid's dataSource to your ashx URL.

These last two methods may or may not work depending on how you are returning your data from the handler.  For more information on how data binds to the igGrid, please see the following documentation:

http://help.infragistics.com/doc/jQuery/2014.1/CLR4.0/?page=igGrid_igDataSource_Architecture_Overview.html

If you have any further questions or concerns with this, please let me know and I will be glad to help.

I was able to use #1 to get it working. Thank you so much for your help!

what if i want to do the same thing but just to the combo box being displayed by the editor template. how can i access the datasource for the combo box?

{
columnKey: "MapToUserGroup",
required:false,
editorType:"combo",
editorOptions: {
mode:"dropdown",
id: 'mapToUserGroupComboID',
dataSource: mapToUserGroupList,
textKey:"Name",
valueKey:"UserGroupID"
}
},