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 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:

Here's the full message...
Microsoft JScript runtime error: Syntax error, unrecognized expression: [{"Id":1,"Name":"Joe","Age":"33","Address":"Somewhere"},{"Id":2,"Name":"Jack","Age":"31","Address":"Somewhere"},{"Id":3,"Name":"Jill","Age":"3","Address":"Somewhere"}]

Hi triffle,

Actually, I'm not sure I understand you - are you receiving a JavaScript error when accessing the input parameter of your AJAX call's success callback function?

Are you sure that that param (msg) really has a property "d"?

If possible, can you provide us with a sample project or a piece of dummy data with the same structure you are trying to use for the igGrid?


Thanks in advance! 

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