Hi All,
Actually i am trying to develop a grid which will show name and id on top and under it will to multiple records for same name and idi want to develop a grid like this.Note: i am fetching all the data from single table only.Can anyone help please?
Hello,
What I could suggest is using our igHierarchicalGrid component. The igHierarchicalGrid is a control for displaying hierarchical data with multiple levels and multiple layouts (relationships) on the same level. Because the igHierarchicalGrid uses internally the flat igGrid all its features are also available for the igHierarchicalGrid. More information regarding igHierarchicalGrid could be found in the following topic of our documentation.
Additionally, another component which could be used, depending on the requirement is the igTreeGrid. The data, bound to the igTreeGrid, could be hierarchical or could contain a parentId, which could be set as foreign key to the grid. An overview topic of the igTreeGrid could be found here.
Please let me know if you need any further information regarding this matter.
Regards, Monika Kirkova, Infragistics
I am getting the parent row, but i am not able to see child row
The igHierarchicalGrid can render only a hierarchical data source and in order to render the grid correctly the data should look as follows:
private IEnumerable<Customer> GetCustomers()
{
return new List<Customer>
new Customer { CustomerID=1, CompanyName="Company1", ContactName="John Smith", Country="USA", City="Los Angeles", Orders= new List <Order>
new Order { OrderID = 101, CustomerID = 1, ShipName="Ship11", ShipAddress="Australia" },
new Order { OrderID = 102, CustomerID = 1, ShipName = "Ship12", ShipAddress = "USA" },
new Order { OrderID = 103, CustomerID = 1, ShipName = "Ship13", ShipAddress = "Germany" }, }
},
. . .
};
}
Below I am attaching a sample, demonstrating binding igHierarchicalGrid to data. Please test it on your side and let me know if you need any further information regarding this matter.
igHierarchicalGrid.zip
Below is my code:it only load first column, i am not able to see the structure of child columns.Note: i am not passing any data yet, i just want to see the column structure@{ IQueryable<abc> employees = new List<abc>().AsQueryable(); }
@(Html.Infragistics().Grid(employees) .ID("gridDroppedRecord") .AutoGenerateColumns(false) .Width("100%") .AutoGenerateLayouts(false) .FixedHeaders(true) .Columns(column => { column.For(x => x.Action).HeaderText("Actions") .Template( "<a href='javascript:void(0);' class='btn-delete-employee' onclick=\"deleteEmployee('${EncryptedIncompleteUploadedEmployeeId}')\" onmouseover='javascript: InfoToolTip(this)' title='Delete'><i class='icon icon-delete' aria-hidden='true'></i></a>" + "{{/if}}").Width("100px"); column.For(x => x.UploadDate).DataType("date").HeaderText("Uploaded On").Width("140px"); column.For(x => x.EmployeeName).DataType("string").HeaderText("Employee Name").FormatterFunction("getName").Width("175px"); column.For(x => x.EmployeeCode).DataType("string").HeaderText("Employee ID").FormatterFunction("getEmployeeCode").Width("700px");
}) .ColumnLayouts(layouts => { layouts.For(x=>x.DroppedRecordList)
.AutoGenerateColumns(false) .AutoGenerateLayouts(false) .Columns(childcol => { childcol.For(x => x.HiredDate).DataType("date").HeaderText("Hire Date").Width("100px"); ; childcol.For(x => x.DivisionName).HeaderText("Division Name").Width("100px"); ; childcol.For(x => x.EmployeeType).HeaderText("Employee Type").Width("100px"); ; });
}) .DataBind() .Render()
The child structure is not visible because if there is no data, child grids are not rendered. Additionally, regarding the error message could you please provide a small isolated sample, reproducing the described behavior. Remove any external dependencies and code that is not directly related to the issue, zip your application and attach it in this case.
Having a working sample on my side, which I can debug, is going to be very helpful in finding the root cause of this behavior.
Thank you for your cooperation.
Hello, actually what is happening is i am passing data from my controller as json to ajax in javascript,i am getting parent list data on grid but i am unable to see child grid
After investigating this further, I have determined that the child data is not displayed if the data array does not have the right format and could not be bound to the grid.
The data should have the following format:
var data2 = {
"Records": [
{ "CustomerID": 3, "CompanyName": "Silverlight Development", "ContactName": "ime", "Country": "Germany", "City": "Berlin", "Orders": {
{ "OrderID": 21, "CustomerID": 3, "ShipName": "Monica Galler2" }
] },
} ]
However, when the data is passed from the controller, there are no “Records” fields and what I could suggest in order to bind the data successfully is formatting it as follows in the ajax request:
success: function (data) {
for (let i = 0; i < data.length; i++) {
data[i].Orders = { Records: data[i].Orders }
data = { Records: data }
$("#grid1").igHierarchicalGrid("option", "dataSource", data);
Please test it on your side and let me know if you need any further information regarding this matter.
After further investigating this matter, what I could say is that the reason $("#grid1").igGrid("rowById", i).length returns 0 is because in the provided example the primaryKey is of type number and the indices of the for loop equal the ids of the records.
In this case, for example, in the first iteration of for (let j = 0; j < $("#grid1").igGrid("rowById", i).length; j++), the rowById method returns a row TR element which has id equal to 1, however, from the provided code snippet in the following message here I can see that the dataType is set to string and respectively the ids are different.
Having this in mind, what I could suggest is refactoring the rowsRendered function similar to the following:
function rowsRendered() { let index = true; for (let i = 0; i < $("#grid1").igGrid("allRows").length; i++) { let id = $("#grid1").data("igGrid").dataSource.dataView()[i].CustomerID; for (let j = 0; j < $("#grid1").igGrid("rowById", id).length; j++) { if (index) { $("#grid1").igGrid("rowById", id)[j].style.backgroundColor = "white"; } else { $("#grid1").igGrid("rowById", id)[j].style.backgroundColor = "gray"; } } index = !index; if ($("#grid1").igGrid("rowById", id).length > 0) { i += $("#grid1").igGrid("rowById", id).length - 1; } } }
Please test this approach on your side and let me know if you need any further assistance regarding this matter.
Sincerely, Riva Ivanova Entry Level Software Developer
Thanks,for (let j = 0; j < $("#gridDroppedRecord").igGrid("rowById", i).length; j++)This statement "$("#gridDroppedRecord").igGrid("rowById", i).length" is returning 0 for me, therefore i am not able to go inside the loop
Your requirement could be achieved by binding a method to the rowsRendered event and changing the backgroundColor of the rows depending on the duplicates. The method could look as follows:
@(Html.Infragistics().Grid(employees)
.ID("grid1")
.AddClientEvent("rowsRendered", "rowsRendered(evt, ui)")
function rowsRendered() {
let index = true;
for (let i = 1; i <= $("#grid1").igGrid("allRows").length; i++) {
for (let j = 0; j < $("#grid1").igGrid("rowById", i).length; j++) {
if (index) {
$("#grid1").igGrid("rowById", i)[j].style.backgroundColor = "white";
} else {
$("#grid1").igGrid("rowById", i)[j].style.backgroundColor = "gray";
index = !index;
if ($("#grid1").igGrid("rowById", i).length > 0) {
i += $("#grid1").igGrid("rowById", i).length - 1;
Furthermore, please keep in mind that according to our support policy we handle a single issue per case. If there are other questions regarding IgHierarchicalGrid, my suggestion would be to create a separate cases for your new queries. This helps us ensure that all your issues are addressed and tracked correctly.
Thank you so much,I just have one more question, is there any way to changes the color of rows.
Suppose i have multiple rows and some of them are duplicate rows due to common id, so i want for example first 2 rows have same Id , i want them have white color after that 3,4 and 5 row have same Id's i want them to have Grey color and continue white , grey color for further duplicate records.can you help me?