I have a hierarchical data grid that receives data from a json call fine. But I have problems with the child band. I don't know if it is the code or how the data is presented within the list from the json call.
<script type="text/javascript">
var data = @MyAcesData.AsRawJson()
$("#hierarchicalGrid").igHierarchicalGrid({ dataSource: data, odata: true, initialDataBindDepth: 0, autoGenerateLayouts: true, autoGenerateColumns: false, primaryKey: "Username", columns: [{ key: "Username", headerText: "Username", dataType: "string" }, {key: "EmplID", headerText: "EmplID", dataType: "string" }, {key: "Comment", headerText: "Comment", dataType: "string" }], features: [{name: 'Paging', type: "local", pageSize: 50}, { name: "Resizing"}, { name: 'ColumnMoving' }], columnLayouts: [ { key: "GroupName", primaryKey: "GroupName", foreignKey: "GroupMembers", autoGenerateLayouts: true, autoGenerateColumns: false, columns: [ { key: "GroupName", headerText: "UserName", dataType: "string", width: "100px" }, { key: "GroupDescription", headerText: "GroupDescription", dataType: "string", width: "100px" }, { key: "GroupMembers", headerText: "GroupMembers", dataType: "string", width: "100px" } ], features: [ { name: "Sorting", type: "local" }] }] });
</script>
The data comes as follows
[username],[EmplID],[comment],[GroupName],[GroupDescription],[GroupMembers]
with UserName,EmplID, and Comment repeating with the same values per username while values for GroupName, and GroupDescription continue to be unique. GroupMembers has the same data as UserName. All of the data is coming from a view, which is a join from Users ([username],[EmplID],[comment]) and Groups ([GroupName],[GroupDescription],[GroupMembers]). I would like a single row for UserName,EmplID, and Comment as if it were a groupby then expanding the child band would show [GroupName] and [GroupDescription].
When the initial grid opens, I get repeating rows of [username],[EmplID],[comment] and when I try to expand the child band, it throws a errormessage displaying:
Unable to get value of the property '_injectGrid': object is null or undefined.
For what its worth, this is written on C# Razor pages using ServiceStack to Bootstrap. Any and all help is greatly appreciated.
Hello Jason,
Can you send me a sample that demonstrates your issue, so that I can test and debug it on my side? Thanks in advance.
Regards,
Tsanna
I don't know if there is a neat way of displaying the code, or at least I don't know where to host it. I say that because I believe part of the problem I'm having is how the data is presented to the grid. The data is coming from a json ServiceStack call, See below:
<table id="hierarchicalGrid"></table>
var data = @UserInformation.AsRawJson()
$("#hierarchicalGrid").igHierarchicalGrid({
datasourcetype: 'json',
dataSource: data,
odata: true,
initialDataBindDepth: 0,
autoGenerateLayouts: false,
autoGenerateColumns: false,
columns:
[{ key: "Username", dataType: "string", headerText: "Username" },
{ key: "EmplID", dataType: "string", headerText: "EmplID" },
{ key: "Comment", dataType: "string", headerText: "Comment" }],
columnLayouts: [
{
key: "GroupInformation",
childrenDataProperty: "GroupInformation",
columnLayouts:
[{ key: "GroupName",
autoGenerateColumns: true}]
}]
});
That is what my code looks like in its current format. Running this code gives me exactly what I want on the parent band. The child band errors out with the message:
"Microsoft JScript runtime error: Unable to get value of the property 'dataType': object is null or undefined"
The data is now give to the grid as rawjson is from a list from a class that has fields "UserName, EmplID, Comment, and a property as a list that has fields "GroupName and GroupDescription" for my child band which will have multiple rows per one row of parent band. The name of the list that holds the child band information is "mygroup"
Binding igHierarchicalGrid to flat data source is not possible. For this purpose you should use igTreeGrid control instead.
Looking at your last response I see couple of things that need to be changed in the igHierarchicalGrid configuration:
1.The error you get is because you didn't define a "primaryKey" on the top level
2. The "datasourcetype" is not a valid option name. You should change it to "dataSourceType" instead.
3. There is no need to define "odata: true".
4. There is no need to define " initialDataBindDepth: 0". This configuration is used in Load on Demand scenario.
With the given igHierarchicalGrid configuration your serialized data should look like something like this:
var data = [{"Username": "user1", "EmplID": "1", "Comment": "Comment1",
"GroupInformation": [{"Col1": "Col1 Value", "GroupName": [{"Col1": "Col1 Value"}]}]}];
If you can provide a code excerpt of your JSON data will help us identify the cause of the problems you have with binding igHierarchicalGrid to it.I'm attaching a working sample for your reference.
Best regards,Martin PavlovInfragistics, Inc.
Thank you for your help Martin, I really appreciate your time. You and Jon Hogue really helped a lot. Take care.
Let me know if you need further assistance regarding this subject.
Hello Jason,Please excuse me if I'm not going in the right direction (what I understand is that a user should have multiple groups).You already achieved this scenario with the following model:public class SomeClassForTheFirstBand{
public string Username { get; set; }public string Fullname { get; set; }public string Comment { get; set; }public string Acctlocked { get; set; }public string EmplID { get; set; }public List GroupInformation = new List();
}However I see that in one of your previous replies you defined a third column layout - "GroupName". If that's the case then you'll need one more class:public class SomeClassForTheThirdBand{ public string Field1 { get; set; } public string Field2 { get; set; }}In this case the definition for the "SomeClassForTheSecondBand" should be:public class SomeClassForTheSecondBand{ //public string GroupName { get; set; } public string GroupDescription { get; set; } public List GroupName = new List;}I'm attaching an MVC sample assembled from the information you provided
Hope this helps,Martin PavlovInfragistics, Inc.
Jason,
Thanks for posting the sample data. As Martin had mentioned, and as we discussed on the phone, the issue is with your child collection not being serialized from the .Net to the client. If you get that data into your data from the server, then you should have a working grid. Just make sure the name of the property with the child collections matches the key for the columnLayout.
Cheers,
Jon
var data = [{"Username":"Jason","Comment":"This is a comment for Jason","EmplID":"999999"},{"Username":"Jeff","Comment":"This is a comment for Jeff","EmplID":"888888"}]