Hi, I have little hard time to retrieve data from WCF with JQuery. I have seen some examples from site but none-of them give me wcf service code, all calling some external service, I am using Netadvantage 2012.1 version.
My requirement is simple just fill grid with WCF method return data, appreciate if you post with some sample code.
Thanks
Vijay
hi anyone can reply me back?, as it urgent.
Have you read this?
http://ko.infragistics.com/community/blogs/engineering/archive/2011/07/28/getting-started-with-iggrid-odata-and-wcf-data-services.aspx
thank you for your support, it works but in littile diff way.
posted my code here, in future if any one needed in similar fashion..
In WCF service:
public
List<PortfolioData> LoadData(stringDate)
{
var portfolioData = new List<PortfolioData>();
var dt = connect data base and get data
for (intr = 0; r <= dt.Rows.Count - 1; r++)
portfolioData.Add(
new PortfolioData(
dt.Rows[r][
"columnA"].ToString(),
"columnB"].ToString()
));
}
return portfolioData;
In service Interface:
[
ServiceContract
]
public interface
IAppAjaxService
OperationContract
WebGet(ResponseFormat = WebMessageFormat
.Json)]
List<PortfolioData> LoadData(string
Date);
In Properties Class:
public class
PortfolioData
public string columnA, columB
public PortfolioData() { }
public PortfolioData(
string columnA,string columnB
)
this.columnA = columnA;
this.columnB = columnB;
--------------------- and so on...
In HTML:
<!doctype html><!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]--><!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]--><!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]--><!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--><html lang="en" class="no-js"><!--<![endif]--><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <link href="../../JQuery/content/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../JQuery/modernizr.min.js"></script>
<script type="text/javascript" src="../../JQuery/jquery.min.js"></script>
<script type="text/javascript" src="../../JQuery/jquery-ui.min.js"></script>
<script type="text/javascript" src="../../JQuery/js/infragistics.loader.js"></script>
<script type="text/javascript"> $.ig.loader({ scriptPath: '../../JQuery/js/', cssPath: '../../JQuery/css/', resources: 'igGrid.*', // theme: "metro" // resources: 'igHierarchicalGrid.*' });
$.ig.loader(function() { DoSearch(); }) </script>
<script> function DoSearch() { var vDate = document.getElementById('tDate').value; $('#grid1').igGrid('destroy'); $("#grid1").igGrid({ columns: [ { headerText: "columnA", key: "columnA", dataType: "string" }, { headerText: "columnB", key: "columnB", dataType: "string" } ], autoGenerateColumns: false, dataSource: "../../App_Services/AppAjaxService.svc/LoadData?Date=" + vDate + "&$format=json", features: [ { name: "Paging", type: "local", pageSize: 20, mode: 'advanced', visiblePageCount: 10 }, { name: "Sorting", type: "local" }, { name: "Selection" }, { name: "Resizing" }, { name: "Filtering", allowFiltering: true, type: "local", mode: 'advanced' } ] });
} </script>
</head><body> <table width="100%" style="valign: top; margin-top: 10px;"> <tr> <td style="padding-left: 5px"> Date <input type="text" style="" value="2013-04-24" id="tDate" /> </td> <td> <input type="submit" id="btnSearch" value="Search" onclick="DoSearch()" /> </td> </tr> <tr> <td colspan="4"> <table id="grid1"> </table> </td> </tr> </table></body></html>