1. Home
  2. Forum
  3. Xamarin.Android
  4. Multiple summary columns and grouping icon

Multiple summary columns and grouping icon

Greetings

I'm creating a Xamarin.Android version of a sfDatagrid Xamarin.Form application that I completed last week. I posted the following query during the development process:

https://www.syncfusion.com/forums/134818/questions-regarding-grouping

Shivagurunathan kindly answered all of my questions thoroughly.

For the Xamarin.Android version, there are two remaining issues that I'm unable to resolve:

1) Similar to the question posted by Miguel:

https://www.syncfusion.com/forums/125425/gridsummaryrow

I would prefer to display the grouping key along with two other summary row columns. In the sfDatagrid.Xamarin version, this was solved by an IConverter derived class that was referenced from the XAML file. For the Android version, this is not an option. The solution that was offered by Ashok will only work if the grouping and summary columns are the same. I don't believe it is sufficient for multiple columns. For example, from my original Forms query, if we have the following grid columns:

A | B | C | D | E

The grid is grouped by column 'A' and the summary rows are 'C' and 'E'. It is highly desirable to display the 'A' group caption along with 'C' and 'E' summary captions.

Is this possible in the Xamarin.Android version?

2) In the Xamarin.Forms version, it is possible to display the 'collapse/expand' icon on the left side of the grid by setting the 'GroupingMode' property to 'multiple.'  This property is not available in the Android version. How is it possible (if at all) to display the icon on the left side of the grid?

Thanks very much in advance.

5 Replies
SK Shivagurunathan Kamalakannan Syncfusion Team December 19, 2017 03:13 AM UTC

Hi svrz, 
  
Thanks for contacting Syncfusion Support. 
  
We have checked your query. 
  
Regarding your 1st query “The grid is grouped by column 'A' and the summary rows are 'C' and 'E'. It is highly desirable to display the 'A' group caption along with 'C' and 'E' summary captions”.  
  
At present, there is no support for multi-column grouping in Xamarin.Android. So the property “ShowColumnWhenGrouped” is not available in SfDataGrid.Android. However, it will be available in any of our upcoming releases.  
To hide the column that is grouped, Set the “width” of the column to “0”.  
 
 
GridTextColumn CustomerIDColumn = new GridTextColumn(); 
CustomerIDColumn.HeaderText = "Customer ID"; 
CustomerIDColumn.MappingName = "CustomerID"; 
CustomerIDColumn.Width = 0; 
CustomerIDColumn.LoadUIView = true; 
 
 
Your requirement to show the summary of the grouped column when the grouped column is hided can be achieved by using custom renderer in Xamarin.Android. Group the required column and have the same column in caption summary. The grouping caption text of the grouped column can then be shown under the required grid column using custom renderer. Refer the below code example for reference. 
  
dataGrid.GroupColumnDescriptions.Add(new GroupColumnDescription() { ColumnName = "CustomerID" }); 
 
GridSummaryRow summaryrow = new GridSummaryRow(); 
summaryrow.ShowSummaryInRow = false; 
summaryrow.SummaryColumns.Add(new GridSummaryColumn() 
{ 
    Name = "CustomerID", 
    MappingName = "CustomerID", 
    Format = "{Count}", 
    SummaryType = SummaryType.CountAggregate 
}); 
 
summaryrow.SummaryColumns.Add(new GridSummaryColumn() 
{ 
    Name = "ShipCountry", 
    MappingName = "ShipCountry", 
    Format="{Count}", 
   SummaryType=SummaryType.CountAggregate 
 
}); 
 
public class CustomRenderer:GridCaptionSummaryCellRenderer 
{ 
    public CustomRenderer() 
    { 
 
    } 
    public override void OnInitializeDisplayView(DataColumnBase dataColumn, TextView view) 
    { 
        base.OnInitializeDisplayView(dataColumn, view); 
        Group group = dataColumn.RowData as Group; 
         
        if (dataColumn.GridColumn.MappingName == "OrderID") 
        { 
            var value = SummaryCreator.GetSummaryDisplayText(group.SummaryDetails, "CustomerID", this.DataGrid.View); 
            view.Text = group.Key + " - " + value + " Items "; 
        } 
    } 
} 
 
Refer the below sample link for reference: 
   
  
Regarding your 2nd query “it is possible to display the 'collapse/expand' icon on the left side of the grid by setting the 'GroupingMode' property to 'multiple”. 
  
As informed earlier, At present, there is no support for multi-column grouping in SfDataGrid.Android. However it will be available in any of our upcoming releases. Hence, at present it is not possible to show the icons in the left side of the caption rows.  
  
  
Regards, 
Shivagurunathan. K 
  
 


SV svrz December 20, 2017 04:18 AM UTC

Hello Shivagurunathan

Once again I thank you immensely for thoroughly answering my question. In regards to the display of grouping and summary captions, your solution worked very well. However the grouping text is cutoff when the grouping column entry is greater than two letters. Please see the attached images.

It appears the summary cell width is limited. The code for the creation of this grid is very similar to the sample that you provided. The only difference is the 'HeaderTemplate' is assigned a TextView:

private TextView CreateTextView(string columnName)
{
            TextView tv = new TextView(context);
            tv.Text = columnName;
            tv.SetTextColor(Color.White);
            tv.SetBackgroundColor(Color.ParseColor("#FF778898"));
            tv.TextAlignment = TextAlignment.Center;
            tv.SetTypeface(tv.Typeface, TypefaceStyle.Bold);

            return tv;
 }

 private GridTextColumn CreateTextColumn(string columnName, string format)
        {
            GridTextColumn column = new GridTextColumn()
            {
                MappingName = columnName,
                HeaderTemplate = CreateTextView(columnName),
                Format = format,
                LoadUIView = true
            };

            return column;
        }

        private GridDateTimeColumn CreateDateColumn(string columnName, string format)
        {
            GridDateTimeColumn column = new GridDateTimeColumn()
            {
                MappingName = columnName,
                HeaderTemplate = CreateTextView(columnName),
                Format = format,
                LoadUIView = true
            };

            return column;
        }

This is done in order to customize the font style, font and background colors.

It is not clear why the summary caption cell's width is so small.

Any help or hint is greatly appreciated.

Attachment: Screenshots_aba843b8.zip

SK Shivagurunathan Kamalakannan Syncfusion Team December 22, 2017 03:49 AM UTC

Hi Svrz, 
  
We have checked your query. We could see that the grouping text is cut off when giving larger text and it is because the text when exceeds to fill within the available width, it gets wrapped to the next line. Since the row height is enough only to display the single line text, you had seen it as text being cut off.  
  
We suggest you the below solutions and you can pick the once that best suits you.  
  
Solution 1: Increase the caption row height 
  
You can query the row height using the QueryRowHeight event and increase the height of the caption rows such that you can view the entire data. 
  
Refer the below document link for more details regarding customizing row height for caption rows.  
  
  
protected override void OnCreate(Bundle bundle) 
{ 
  dataGrid = new SfDataGrid(BaseContext); 
  base.OnCreate(bundle); 
  
  dataGrid.QueryRowHeight += DataGrid_QueryRowHeight; 
} 
  
  
private void DataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e) 
{ 
  if (dataGrid.IsCaptionSummaryRow(e.RowIndex)) 
   { 
     e.Height = 150; 
     e.Handled = true; 
   } 
} 
  
  
 
  
Solution 2: Increase the width of the associated column 
  
You had mentioned as “It appears the summary cell width is limited”. By default, the summary cell will take the width of the associated column when the ShowSummaryInRow is false for SfDataGrid.CaptionSummaryRow.  
  
You can customize the width of the particular column in SfDataGrid so that the caption text can be loaded without clipping. 
  
Refer the below document link for more details about customizing column width. 
  
  
GridDateTimeColumn shippingDateColumn = CreateDateColumn("ShippingDate", "dd/mm/yy"); 
shippingDateColumn.HeaderText = "Shipping Date"; 
shippingDateColumn.MappingName = "ShippingDate"; 
shippingDateColumn.Width = 150; 
  
  
Image for Approach – 2 is given below. 
  

 
  
Solution 3: 
  
In case, if you do not want to increase the column width and also do not want to wrap the text, then you can truncate the text and display an ellipsoid symbol to denote that the text is large than the cell area. You can achieve this by adding the below highlighted code in the custom caption renderer. 
  
public override void OnInitializeDisplayView(DataColumnBase dataColumn, TextView view) 
{ 
    base.OnInitializeDisplayView(dataColumn, view); 
    Group group = dataColumn.RowData as Group; 
     
    if (dataColumn.GridColumn.MappingName == "ShippingDate") 
    { 
        var value = SummaryCreator.GetSummaryDisplayText(group.SummaryDetails, "CustomerID", this.DataGrid.View); 
        view.Text = group.Key + " - " + value + " Items"; 
        view.SetSingleLine(true); 
        view.Ellipsize = Android.Text.TextUtils.TruncateAt.End; 
    } 
} 
  
Image for Approach – 3 is given below. 
   

  
  
We have prepared a sample based on your requirement and you can download the same from the below link. 
  
  
  
Note: We have used Approach – 1 in the sample and others approaches were commented.  
  
  
Regards, 
Shivagurunathan. K 
 


SV svrz December 28, 2017 04:17 PM UTC

Shivagurunatha

Once more I must thank you very much for a detailed and well written response.  I truly appreciate the level of effort that went into creating the sample.

I will take your advise and use option 1 as the solution.

Thanks again and take care

SK Shivagurunathan Kamalakannan Syncfusion Team December 31, 2017 05:10 PM UTC

Hi svrz,  
Thanks for the update. Please let us know if you require any further assistance. 
  
Regards, 
Shivagurunathan. K

Loader.
Up arrow icon