Thanks Ivanov. I have already checked the custom group by link. One more question, it seems are group-by row is not presented based on the column hearder. All values are coming like a row. So we can't identify like a column wise separation of datas. The group-by row sum values should come just in the exact column header like summary row values.

Hello Agilan,

Thank you for your reply.

I may be misunderstanding your requirement, however if you would like to access the data on a per-column basis, this can be done by accessing the grouped row'sRowscollection, which returns the row object in that group. The group row itself also contains a reference to the column used for grouping. Please let me know if I have misunderstood your question in any way.

Thanks Ivanov

I can access the groupedrow using rowscollection object. But i want the group row column values of all the other columns needs to be presented in the exact column header.

Something like I have columns-                                                   Name, ResourceType, Role,       Month1,            Month2,        Month3,    Month4,  total Columns.

When I group by resource type. Then the group row needs to display - resource type (2)                       100                 120                100         100     420

The values of 100,120,100,100,420 will show exactly below the correct column headers. But the group row seems is not formatted.

Also please send me some examples for accessing Rowscollection object in grouped row.

Hello Agilan,

The WHDG group row architecture currently does not support the alignment of the grouped row text with the column headers. Regarding accessing the grouped rows through the group row, this is done via the GrouprecordEnumeration. Attached is a small sample illustrating that in practice.

Hope this helps. Please feel free to contact me with any questions.

Hello Agilan,

Thank you for sharing your solution ! Please do not hesitate to contact me if any additional questions regarding this matter arise.

Hi Ivanov,

I have found out the solution for showign the column like "SUM" for multiple levels of "group by " by enhancing your sample. Thanks.

function

WebHierarchicalDataGrid1_ContainerGrid_Initialize(sender, eventArgs)

{

///<summary>

///

///</summary>

///<param name="sender" type="Infragistics.Web.UI.ControlMain"></param>

///<param name="eventArgs" type="Infragistics.Web.UI.EventArgs"></param>

// var categoryIDHeaderIndex = $("th[key='CategoryID']").index();

// var categoryNameIndex = $("th[key='CategoryName']").index();

var groupRows = sender.get_groupRows();

for (i = 0; i < groupRows.get_length(); i++) {

var element = groupRows.get_row(i).get_element();

var text = groupRows.get_row(i).get_text();

var values = text.split(' ');

//need to leave 2 tds - one for the root expander col, and one more indent for the child's expanders

element.cells[1].colSpan = 1;

element.cells[1].innerHTML =

"";

//for categoryID

$(element).append(

"<td colSpan='1'>" + values[0] + "</td>");

//for category name. notice that the colspan is 2 here in order to fill the entire row

$(element).append(

"<td colSpan='2'>" + values[1] + "</td>");

//Child level 1

if (groupRows.get_row(0)._get_childGroupRowCount() > 0) {

for (j = 0; j < groupRows.get_row(i).get_childGroupRows().get_length(); j++) {

var childElementLevel1 = groupRows.get_row(i).get_childGroupRows().get_row(j).get_element();

var childLevel1text = groupRows.get_row(i).get_childGroupRows().get_row(j).get_text();

var childValues1 = childLevel1text.split(' ');

childElementLevel1.cells[1].colSpan = 1;

childElementLevel1.cells[1].innerHTML =

"";

//for categoryID

$(childElementLevel1).append(

"<td colSpan='1'>" + values[0] + "</td>");

//for category name. notice that the colspan is 2 here in order to fill the entire row

$(childElementLevel1).append(

"<td colSpan='2'>" + values[1] + "</td>");

}

}

}

}

Hi Ivanov.

Thanks for your sample. It worked for the 1st level of grouped row. But when I create multiple levels(by dragging to description column to group row) the formatting was the issue for the other levels. Would you able to provide some sample, which can support multiple levels of grouped row.

Hello Agilan,

Thank you for your reply.

I am attaching a sample illustrating how some additional td elements may be added at the group row level in order to put some distance between the grouped row's values. Please note that this is a custom approach and cannot be guaranteed to work under all circumstances. Below is the code used to inject the td elements given that the group row contains custom text of the values of 2 columns:

function WebHierarchicalDataGrid1_ContainerGrid_Initialize(sender, eventArgs)
{
	///<summary>
	///
	///</summary>
	///<param name="sender" type="Infragistics.Web.UI.ControlMain"></param>
	///<param name="eventArgs" type="Infragistics.Web.UI.EventArgs"></param>
 
    var categoryIDHeaderIndex = $("th[key='CategoryID']").index();
    var categoryNameIndex = $("th[key='CategoryName']").index();
 
    var groupRows = sender.get_groupRows();
    for (i = 0; i < groupRows.get_length(); i++) {
        var element = groupRows.get_row(i).get_element();
        var text = groupRows.get_row(i).get_text();
        var values = text.split(' ');
        
        //need to leave 2 tds - one for the root expander col, and one more indent for the child's expanders
        element.cells[1].colSpan = 1;
        element.cells[1].innerHTML = "";
 
        //for categoryID
        $(element).append("<td colSpan='1'>" + values[0] + "</td>");
        //for category name. notice that the colspan is 2 here in order to fill the entire row
        $(element).append("<td colSpan='2'>" + values[1] + "</td>");
    }
}// -->

Please feel free to contact me if you have any questions.

Hi Ivanov,

Thanks for the sample. It worked for the sum for the rows in the group. Could you please provide some sample to implement some kind of spacing in the group by row using the html table and colspan, width. I tried using the html table but the table is not generating instead the text was displayed in the row.

Please help.