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.

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. 

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 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.

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>");

}

}

}

}

Hello Agilan,

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