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.

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! 

I'm using JQuery-1.7.2 -- this is where the error is occurring. 

 It happens on this line of jquery:
                    $("#SearchResults").igGrid({
                        dataSource: msg,
                        dataSourceType: 'json',
                        responseDataKey: 'd'
                    });

 Here is the ajax call to get the json data:
        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 grid = $("#SearchResults")[0];
                    //grid.dataSource = msg.d;
                    //grid("dataSourceObject", msg.d);

                    $("#SearchResults").igGrid({
                        dataSource: msg,
                        dataSourceType: 'json',
                        responseDataKey: 'd'
                    });

//                    $("#SearchResults").igGrid("dataSourceObject", msg);
//                    $('#SearchResults').igGrid('dataBind');
                  
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert("Something bad happened.  Code: " + xhr.status + ". Error: " + xhr.responseText);
                }
            });
        }
    });

I'm using fiddler,here's the fiddler response from calling my web service:

{"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\"}]"}

Here's the grid in my read function:

        $("#SearchResults").igGrid({
            autoGenerateColumns: false,
            columns: [
                { headerText: "Id", key: "Id", width: "50px", dataType:"string" },
                { headerText: "Name", key: "Name", width: "100px", dataType: "string" },
                { headerText: "Age", key: "Age", width: "50px", dataType: "string" },
                { headerText: "Address", key: "Address", width: "100px", dataType: "string" }
                ],
             height: '300px'
        });

Here's the related scripts/css that I'm referencing.  Could the later versions of JQuery/JQueryUI have something to do with it?

        <script src="scripts/jquery-1.7.2.min.js" type="text/javascript" ></script>
        <script src="scripts/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script>
        <script src="scripts/ig.ui.js" type="text/javascript"></script>
        <script src="scripts/jquery.tmpl.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.8.19.custom.css" />
        <script src="css/ig.ui.min.js" type="text/javascript"></script>

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