Hi,
I am using Infragistics 2011 vol 2 JQUERY Grid. I need to bind the igGrid datasource to the datatable object available at server side .aspx.CS file.
Thanks.
Since you're using ASP.NET, you can create a web service which returns JSON, and point the grid's dataSourceUrl to the web service url. Here is an example about how to bind the grid to a WCF service:
https://www.igniteui.com/help/iggrid-getting-started-with-iggrid-odata-and-wcf-data-services
Select Sample Source File to View => RemoteBinding.html
Hope it helps. Thanks,
Angel
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.
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) {
$("#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); } }); }
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) {
$("#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);}});}});
Thanks, triffle!I didn't catch the fact that the service method's output was a string and not a serialized JSON object.Yep, you're absolutely correct - a blog post is what's needed in order to elaborate this scenario, because working with Microsoft's web services (no matter ASP.NET or WCF) is a thankless chore and tiny modifications require more effort than one might expect. I'll ask our evangelism about composing something about this ...In the meanwhile, I can recommend Dave Ward's blog - it's very closely-related to such situations (Javascipt-powered client and an ASP.NET server-side).PS: A facilitation to the data refresh for any JavaSctipt control, I can recommend KnockoutJS - it requires some reading and understanding at first, but hopefully it will bring much-needed aid to situations where you need to refresh data from the server. We already have CTP (read: beta-like) support for it in our two grids. Our evangelism team have also composed a couple of articles about it.PPS: For example, do you know why all ASP.NET web methods (of an ASP.NET page or service) use the POST HTTP verb by default rather than GET? Our igGrid is REST-ful so it requests remote data with the GET verb, but the ASP.NET server-side won't comply - this is why you have to do this external call to $.ajax() instead of just calling dataBind() on the igGrid.
If you can write a blog post yourself, that'd b great :)However, I'm more interested in something more valuable - your viewpoint: you're the one feeling the need to utilize our igGrid with an old-shchool ASMX web service.So, what I would really like to get from you is a systematized list of your needs in this scenario. I'd envision something like a list:1. Need to use ASMX (ASP.NET) web service2. Need to keep default settings of the service: a. POST verb b. <something else>3. I need to reload/refresh the data in the grid every X secondsBasically, you will help us compose a usability review of sorts.
triffle said:Very cool you guys are utilizing existing technology like JQueryUI and KnockJS rather than try to write your own proprietary stuff.
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!