Hi

Thanks for reply.

I have gone through the sample. But as per the requirement we are not looking WCF service.

Is there any possiblity that i can bind JQUERY igGrid (dataSource) directly to server side function written in .CS file that returns data in JSON format. 

Thanks.

Finally, let me explain what I am trying to do... I don't want any data loaded into the grid until a user hits the search button.  Once the search button is clicked, I make an ajax call to do the search through a web service/web method that returns the json results which I want to bind to the grid. 

Once I get this binding, I want to allow them to select a row and fill out the remainder of the form based on their selection.  However, this last part will come after I get this grid binding.

I spent two days trying to get the JQGrid to work and now almost a day trying to get infragistics igGrid to work and no such luck. I don't see that I'm doing anything too out of the ordinary, that is why I'm starting to wonder if I need an older version of JQuery or JQuery UI.  I'm on 2011.2 of infragistics controls, FYI.  Thanks for any help.

Going to try this afrer I figure out what's up with the data I'm getting back from my web service. 

Yes I agree Fiddler FTW.  I will post more shortly. 

So this is the string I get from msg in ajax callback.
[{"Id":1,"Name":"Jack","Age":"33","Address":"Somewhere"},{"Id":2,"Name":"Joe","Age":"31","Address":"Somewhere"},{"Id":3,"Name":"Jill","Age":"24","Address":"Somewhere"}]

As you can see, it's different in that it's missing "d:" at the very beginning.  However, if I remove the "responseDataKey: 'd'," from the grid, I would think it should bind, but it doesn't. 

So this is what fiddler says is being sent and above is what's actually showing up in my msg parameter:
{"d":"[{\"Id\":1,\"Name\":\"Jack\",\"Age\":\"33\",\"Address\":\"Somewhere\"},{\"Id\":2,\"Name\":\"Joe\",\"Age\":\"31\",\"Address\":\"Somewhere\"},{\"Id\":3,\"Name\":\"Jill\",\"Age\":\"24\",\"Address\":\"Somewhere\"}]"}

So I guess jquery/ajax call is smart in that it strips off the "d," but without the stripped off "d" nothing will bind to the grid no matter what I try.

Okay I found the problem.  What I was receiving from the asmx was a json string that needed to be converted to a JSON object.  For anyone else trying to do what I'm doing, ultimately the code ended here's what I ended up doing:

 var obj = jQuery.parseJSON(msg.d);

 Here's the whole block of code (going to rerwite this so I rebind the grid rather than create it new each time now): 

        function getData() {
                $.ajax({
                    type: 'POST',
                    url: 'SearchService.asmx/SearchEntity',
                    data: "{SearchCriteria: '" + $("#SearchText").val() + "'}",
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    success: function (msg) {

                        var obj = jQuery.parseJSON(msg.d);

                        $("#SearchResults").igGrid({
                            autoGenerateColumns: false,
                            columns: [
                                { headerText: "Id", key: "Id", width: "50px", dataType: "number" },
                                { headerText: "Name", key: "Name", width: "100px", dataType: "string" },
                                { headerText: "Age", key: "Age", width: "50px", dataType: "string" },
                                { headerText: "Address", key: "Address", width: "100px", dataType: "string" }
                                ],
                            dataSourceType: 'json',
                            //responseDataKey: 'd',
                            dataSource: obj,
                            height: '300px'
                        });
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert("Something bad happened.  Code: " + xhr.status + ". Error: " + xhr.responseText);
                    }
                });
        }

Wow, awesome response when I wasn't expecting ANY RESPONSE!  :) :) :)

I could actually write up a blog for this if you think it would help the community, granted I'm not an infragistics evangilist nor do i know how to become one, but I've used the ASP/WPF and now the JQuery controls and every place I go to work I recommend them!  :)  Let me know if you are interested I could probably put something up in a relatively short time and since I anticipate continuously working w/Infragistics glad to add what I can but for now I'll try to continue to help and learn here.

KnockoutJS -- never even occurred to me.  Very cool you guys are utilizing existing technology like JQueryUI and KnockJS rather than try to write your own proprietary stuff.  I do know a little about KnockJS, but had not considered it, but will do so now.

Dave Ward's site, I actually used his site as a reference for several of these items.  Love the site! 

PS - very cool, look forward to getting the next release.  We are actually a few versions behind right now, but with our WPF app we're looking at some of the new stuff that's around the corner.

PPS - Very interesting, I did not know this.  Good read!

Okay here's my final solution. I call destroy each time per another thread about reloading that I found... I should really write a blog for you guys. :)

function getData() {

//Grid must be destroyed rather than reloaded per a bug that is mentioned
//in this forum post. Kind of gross, but it works.
//http://forums.infragistics.com/forums/p/68376/346580.aspx
$('#SearchResults').igGrid('destroy');
$.ajax({
type: 'POST',
url: 'SearchService.asmx/SearchEntity',
data: "{SearchCriteria: '" + $("#SearchText").val() + "'}",
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {

var obj = jQuery.parseJSON(msg.d);

$("#SearchResults").igGrid({
autoGenerateColumns: false,
columns: [
{ headerText: "Id", key: "Id", width: "50px", dataType: "number" },
{ headerText: "Name", key: "Name", width: "100px", dataType: "string" },
{ headerText: "Age", key: "Age", width: "50px", dataType: "string" },
{ headerText: "Address", key: "Address", width: "100px", dataType: "string" }
],
dataSourceType: 'json',
dataSource: obj,
height: '300px'
});
},
error: function (xhr, ajaxOptions, thrownError) {
alert("Something bad happened. Code: " + xhr.status + ". Error: " + xhr.responseText);
}
});

}
});