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.
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!
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>
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.
This line, with the properties set IN THIS ORDER (this made a difference as far as the grid goes), fire without any errors. However, the table is empty even though there is clearly data in the JSon string. success: function (msg) { $("#SearchResults").igGrid({ dataSourceType: 'json', dataSource: msg }); },
Still no data in the grid. I also tried this:
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', dataSource: msg, height: '300px' }); //var grid = $("#SearchResults").igGrid('dataBind')[0]; }, error: function (xhr, ajaxOptions, thrownError) { alert("Something bad happened. Code: " + xhr.status + ". Error: " + xhr.responseText); } });