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.

Thanks for update.

By using ig.JSONDataSource we are able to bind data to the grid. Now when user modifies the data on the igGrid, i need to send this updated datasource object to the web service as input parameter.

Can you please provide an information for the same?

Thanks for Reply.

The link was very helpful. Now, i need to the fomatting on the JQUERY igGrid.  The following are the requirements:

1. To merge igGrid cells.

2. To set CSS for Cells/Rows/Columns.

I need above urgnet basis.

Thanks in Advance.

I'm trying to return JSon data in regards to a service call (using C# JavaScriptSerializer) and getting an error with the following data (from msg.d in my function).

        function getData() {
            $.ajax({
                type: 'POST',
                url: 'GetPerson.asmx/Person',
                data: "{SearchCriteria: '" + $("#SearchText").val() + "'}",
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (msg) {
                    //var grid = $("#SearchResults")[0];
                    //grid.dataSource = msg.d;
                    //grid("dataSourceObject", msg.d);
                    $("#SearchResults").igGrid({
                        dataSource: msg.d
                    });
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert("Something bad happened.  Code: " + xhr.status + ". Error: " + xhr.responseText);
                }
            });

JSON result:

[{"Id":1,"Name":"Joe","Age":"33","Address":"Somewhere"},{"Id":2,"Name":"Jack","Age":"31","Address":"Somewhere"},{"Id":3,"Name":"Jill","Age":"23","Address":"Somewhere"}]

Error:

Microsoft JScript runtime error: Syntax error, unrecognized expression:

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);
}
});

}
});

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);
                    }
                });
        }