Infragistics igGrid Data Binding

Question

I have tried suggestions from the following post in an attempt to fix my problem:

I have an Infragistics igGrid that is using a javascript array of JSON objects as its data source. When I hard code rows into my array, the grid loads rows perfectly. But when I try to get rows from my database via an AJAX call, the grid does not load any rows. Here is my code:

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

    <script type="text/javascript">

        $(function () {

            // user list is initially empty
            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>

Now when I add the following line just before I define my igGrid:

alert("hey");

The grid WILL load rows just fine. I know that the code in "GetUserList.ashx" is working properly because the grid is working when I use that alert box. Can anyone offer any suggestions as to where I might be going wrong here?

score 1 · Accepted Answer · answered Sep 09 '14 at 16:20

It turns out my grid was getting initialized faster than my AJAX call was sending it's response, so the userList array had no rows in it at the time when the grid was being initialized. To fix this I simply initialized my grid in the "success" event of my AJAX function to guarantee that the userList array has data in it before the grid is initialized.

Here is the response I got from Infragistics:

http://www.infragistics.com/community/forums/t/91953.aspx

They provided 4 suggestions and the first one is the one that helped me.

Hope this helps someone else as much as it helped me!

Infragistics igGrid Data Binding

1 Answers1