Hi,

The problem with the empty fields is that the record cannot be found by primary key. The type of your primary key column is declared as "string", but it is "number", so change it to "number" in order to make it work.

$(document).ready(function () {}); is not needed when you use Infragistics loader. Loader calls the $.ig.loader(function() {}); when the required JavaScript files are downloaded and parsed and the DOM is loaded.

I see that you're instantiating igHierarchicalGrid, but there is only one layout defined in the grid. Is it on purpose? Maybe you didn't post all the code, so I'm just checking. If you don't use the igHierarchicalGrid functionality then it is better to use igGrid instead.

Hope this helps,

Martin Pavlov

Infragistics, Inc.

the problem exist in that example but I will attach another if I dblclick row in first grid the one with state_id dialog dispays but fields are empty, if I expand and click row in the rooms column layout, dialog displays and is populated with all fields as desired. 

var ds = null;
var jsonp = null;
$.ig.loader({
scriptPath: "http://cdn-na.infragistics.com/jquery/20122/latest/js/",
cssPath: "http://cdn-na.infragistics.com/jquery/20122/latest/css/",
resources: 'igHierarchicalGrid.*',
theme: 'metro'
});

var render = function (success, error) {
if (success) {
var ds = jsonp

} else {
alert(error);
}
};
$.ig.loader(function () {
jsonp = new $.ig.DataSource({ dataSource: "/childcare/Sites/api_index.json", datatype: "jsonp", callback: "render", responseDataKey: "Site" });

$("#grid1").igHierarchicalGrid({
autoGenerateColumns: false,
autoGenerateLayouts: false,
caption: "Sites",
expandCollapseAnimations: true,
animationDuration: 1000,
initialDataBindDepth: -1,
dataSource: jsonp,
dataSourceType: "json",
responseDataKey: "",
width: "98%",
primaryKey: "id",
columns: [
{ key: "id", headerText: "ID", dataType: "number", format: "number", width: "200px" },
{ key: "state_id", headerText: "State ID", dataType: "string", width: "180px" },
{ key: "office_id", headerText: "Office ID", dataType: "string", width: "130px" },
{ key: "company_name_1", headerText: "Company Name 1", dataType: "string", width: "130px" },
{ key: "company_name_2", headerText: "Company name 2", dataType: "string", width: "130px" },
{ key: "Site_full_name", headerText: "Full Name", dataType: "string", width: "200px" },
{ key: "address_1", headerText: "Address", dataType: "string", width: "130px" },
{ key: "address_2", headerText: "Addres 2", dataType: "string", width: "130px" },
{ key: "city", headerText: "City", dataType: "string", width: "100px" },
{ key: "state", headerText: "State", dataType: "string", width: "100px" },
{ key: "zip_code", headerText: "Zip", dataType: "string", width: "100px" },
{ key: "county", headerText: "County", dataType: "string", width: "100px" },
{ key: "main_contact", headerText: "Contact", dataType: "string", width: "100px" }
],
features: [
{
name: "Selection",
mode: "row",
activation: true
},
{
name: "Sorting",
type: "local"
},
{
name: "Paging",
type: "local",
pageSize: 10
},

{
name: "Updating",
editMode: 'rowedittemplate',
startEditTriggers: "dblclick,F2,enter",
enableDataDirtyException: false
},
{
name: "Resizing",
inherit: true
},
{
name: "Hiding",
inherit: true
},
{
name: "Summaries",
type: "local"
}

],

columnLayouts: [
{
caption: "Rooms",
key: "rooms",
responseDataKey: "",
width: "92%",
autoGenerateColumns: false,
primaryKey: "id",
foreignKey: "room_id",
columns: [
{ key: "id", headerText: "ID", dataType: "number", format: "number",width: "100px" },
{ key: "class_room", headerText: "Room", dataType: "string", width: "200px" },
{ key: "remark", headerText: "Remark", dataType: "string", width: "200px" }

],
features: [
{
name: "Selection",
inherit: true

},
{
name: 'GroupBy',
type: "local",
groupByAreaVisibility: "top",
inherit: false,
summarySettings: { multiSummaryDelimiter: ", ", summaryFormat: "#0" },
columnSettings: [
{columnKey: "active", isGroupBy: true },
{
columnKey: "id",
summaries: [{
summaryFunction: "count", text: "Count"
}]
}
]
},

{
name: "Sorting",
type: "local"
},

{
name: "Updating",
editMode: 'rowedittemplate',
startEditTriggers: "dblclick,F2,enter",
enableDataDirtyException: false,
columnSettings: [
{
columnKey: "id",
readOnly: true
},
{
columnKey: "site_id",
readOnly: true
},
{
columnKey: "active",
readOnly: false,
editorProvider: "combo",
editorOptions: {
button: "dropdown",
listItems: ["A","T"],
readOnly: true,
dropDownOnReadOnly: true
}
}
]
},
{
name: "Resizing",
inherit: true
},
{
name: "Hiding",
inherit: true
},
{
name: "Summaries",
inherit: false

}

],
}
],

});

});

Hi,

Still cannot reproduce your problem. I'm attaching my sample.

What browser are you using? What are the jQuery and jQuery UI versions?

Best regards,

Martin Pavlov

Infragistics, Inc.

/*!
* jQuery UI 1.8.17

*

/*! jQuery v1.7.1 jquery.com | jquery.org/license */

After seeing your example I download  jquery.min.js 1.6.2 and jqueryui.min.js 1.8.11  and latest igloader from same cdn's in your example. restarted to make certain nothing was cached. it still doesn't work, i tried with Chrome, Firefox and IE 9. I tried your example on my server where i'm hosting my app and it works. Appears it is my issue, not sure what yet maybe something to do with my json coming from api since it appears to work when json is hardcoded in sample

Hello,

I have created a private support case CAS-103932-S3V9B6 for you. I would suggest you to upload the sample on that support case. 

I hope this helps.

I never got it resolved. I temporally moved on to other parts of project and was going to go  back to this with fresh eyes. I believe issue may be with the json format. although everything else in Hgrid seems to work. I noticed in the sample that was sent the json was reformatted. I know I only sent a small sample, I wasn't sure if there were any size restrictions on posts.  I can post full json if that will help.  sorry for delay Thanks for following up  

Hello,

I am just following up to see if you need any further assistance with this matter.