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.
Hello,
Actually, Dave Ward wrote this article some time ago:
http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/
I believe that it has the details you are looking for.
As for the grid, you can simply set the URL to the JSON-returning ASP page method as the grid's dataSource and you should be all set.
However, there are 2 alternative here:
1. You explicitly allow HTTP GET for this page method
or
2. Since ASP.NET defaults to using HTTP POSTs in order to ensure that your pages are secure, it won't work with the grid (or dataSource) directly as they will make GET requests to the dataSource URL (this is a design decision based on the REST standards).In that case you will need to do
$.ajax({ type: "POST", url: "http://Default.aspx/YourPageMethod", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(data) {
$("#grid").igGrid({ dataSource: data
}); } });
Angel gave you the nod to WCF services because generally they are the recommended and more beneficial way of having a "service-like" experience.
Hope this helps.Cheers,Borislav
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?
you can refer to the following article:
http://help.infragistics.com/Help/NetAdvantage/jQuery/2011.2/CLR4.0/HTML/igGrid_Updating.html
=> Persisting the changes to the server
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!
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.
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:
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); } }); }