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.
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>
Where's my web method code: <WebMethod()> _ <ScriptMethod(ResponseFormat:=ResponseFormat.Json)> Public Function SearchEntity(ByVal SearchCriteria As String) As String Dim entities As List(Of Ent) = New List(Of Ent)() Dim jqGrid As JQGrid = New JQGrid
Dim ent1 As Ent = New Ent ent1.Id = 1 ent1.Name = "Jack" ent1.Age = "33" ent1.Address = "Somewhere" entities.Add(ent1)
Dim ent2 As Ent = New Ent ent2.Id = 2 ent2.Name = "Joe" ent2.Age = "31" ent2.Address = "Somewhere" entities.Add(ent2)
Dim ent3 As Ent = New Ent ent3.Id = 3 ent3.Name = "Jill" ent3.Age = "24" ent3.Address = "Somewhere" entities.Add(ent3)
Dim jsonString As String = New System.Web.Script.Serialization.JavaScriptSerializer().Serialize(entities)
Return jsonString End Function
Finally, let me explain what I am trying to do... I don't want any data loaded into the grid until a user hits the search button. Once the search button is clicked, I make an ajax call to do the search through a web service/web method that returns the json results which I want to bind to the grid.
Once I get this binding, I want to allow them to select a row and fill out the remainder of the form based on their selection. However, this last part will come after I get this grid binding.
I spent two days trying to get the JQGrid to work and now almost a day trying to get infragistics igGrid to work and no such luck. I don't see that I'm doing anything too out of the ordinary, that is why I'm starting to wonder if I need an older version of JQuery or JQuery UI. I'm on 2011.2 of infragistics controls, FYI. Thanks for any help.
triffle said:Finally, let me explain what I am trying to do... I don't want any data loaded into the grid until a user hits the search button.
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); } }); }