I am trying to populate a grid with data from a web servive method call. I'm getting the data returned in the correct format and the grid loads with no data displayed. I can see that I am getting 190 records returned from the call. Can you see anything wrong below?
$.ig.loader({
scriptPath: "../../js/",
cssPath: "../../css/",
resources: "igGrid.Paging,igGrid.Sorting,igGrid.Filtering"
});
var CabinetList;
$(document).ready(
function () {
GetCabinets();
var url = "../../../../Inventory.asmx/getCabinets3";
var dataParams = '';
function GetCabinets() {
$.ajax({
type: "POST",
url: url,
async: false,
data: '{' + dataParams + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
CabinetList = { "Records": [data.d] };
//alert([data.d]);
//document.write(data.d);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.responseText);
alert(thrownError);
}
$.ig.loader( function () {
$(function () {
$("#grid1").igGrid({
columns: [{
headerText: "Cabinet ID",
key: "cabinetid",
dataType: "string"
{
headerText: "Title",
key: title",
}],
features: [
name: 'Paging',
pageSize: 20
name: 'Sorting'
name: 'Filtering',
filterDropDownItemIcons: false,
filterDropDownWidth: 200
],
autoGenerateColumns: false,
dataSource: CabinetList.Records,
height: 300
Hi JsonTerre
I'm doing the same thing, if you add the grid initialisation to your success call the grid should populate with your records correctly.
records = data.d;
//add a check to see if the grid data is not yet setup
if($("#grid1").data("igGrid") === undefined) {
dataSource: records,
columns etc...
Let me know if this helps.
Wayne
Now I have the following and i get a error saying that igGrid is undefined:
//CabinetList = { "Records": [data.d] };
dataSource: data.d,
I don't use the loader functions as I need most of the ig controls when I'm using the grids and am too lazy to decide upfront what I need.
Here is a sample implementation without the loader. Get it working this way first and then add the loaders.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<script src="js/infragistics.js" type="text/javascript"></script>
<link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
<link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
GetItems();
var yourUrl ="../../../../Inventory.asmx/getCabinets3";
function GetItems() {
type:"POST",
url: yourUrl,
data:"{}",
contentType:"application/json; charset=utf-8",
dataType:"json",
success:
function (response) {
records = response.d;
if ($("#grid").data("igGrid") === undefined) {
$("#grid").igGrid({
autoGenerateColumns:false,
primaryKey:"primaryid",
columns: [
{ headerText:"ID", key: "cabinetid", dataType: "number", width: "22em" },
{ headerText:"Title", key: "title", dataType: "string", width: "41em" }
height:'38em',
width:'72.6em',
features: [{
name:"Selection",
mode:"row"
]
failure:
function (msg) {
alert(msg);
</script>
</head>
<body>
<table id="grid"></table>
</body>
</html>
Hope this helps
Wayne thank you very much for the assistance. I tried your code and get this error: "Microsoft JScript runtime error: Object doesn't support property or method 'igGrid'"
I should specify that this is the latest "trial version". The javascript files I'm using are:
<script src="../scripts/modernizr.min.js"></script>
<script src="../scripts/jquery.min.js"></script>
<script src="../scripts/jquery-ui.min.js"></script>
<script src="../scripts/demos.js" type="text/javascript"></script>
<script src="../../js/infragistics.loader.js" type="text/javascript"></script>
I noticed they are different than the ones you are using. Not sure if that is the reason for the error.
jason
Hi Jason
I've been using the full versions of infragistics for many years so don't have a lot of experience with the trial version but I do know it should be the same. So I downloaded and installed on a spare machine. I see the references are the same and testing it does produce the right result.
In the scenario I've given you, the reference to infragistics.js is needed. This should be in the same folder where the infragistics.loader.js
change this to infragistics.js
If it's missing or you need to get it you can find it in the install folder, usually, C:\Program Files (x86)\Infragistics\IgniteUI 2012.2 under the js sub folder.
The reference to demo.js is not necessary unless it's your own file.
Order is also NB!!, but it looks like you got them right.
I also made a typo in the sample. This primaryKey:"primaryid" should be primaryKey:"cabinetid"
Let me know how you get along.
I finally go it.
rather than : CabinetList = { "Records": [data.d] };
I did this: var obj = jQuery.parseJSON(data.d);
then i set: dataSource: obj,
thank you for all your help.
j