Several Xamarin DataGrid Questions

[sv]

Greetings

I'm evaluating the trial version of Xamarin RadDataGrid control. I have carefully studied the scant documentation for this control. I also studied the documentation for other versions  (e.g. WPF, ASP, etc.) but the following questions still remain:

1) How can a multi-line entry be implemented for a text column? I did not see a 'word wrap' or 'multi-line' property.  I attempted to use '\r\n' or 'Environment.NewLine' in a string in such a manner:

    string str = "ajdfkjdfkj" + Environment.NewLine + "djkjdkj" + Environment.NewLine + "fjkdkf";

    or

    string str = "ajdfkjdfkj\r\ndjkjdkj\r\nfjkdkf";

Unfortunately none of these options displayed the text in a multi-line format in the RadDataGrid.  I have seen references to using '<br/>' as a line break token in posts about other versions of this control. This also did not work.

2) Are the aggregate functions available for the Xamarin version of RadDataGrid?  If so, let's take the following example:

 

A    B   C   D

-----------------

a    5    6   7

a    9    2   1

b    3    4   0

b    8    2  10

 

I would like to group the data by the 'A' column which is quite simple. However in the grouping header, I would like to display the sum of columns 'B' and 'C.'  If aggregate functions are available for the Xamarin version, would it be possible to have a sum for columns 'B' and 'C'?

3) Is conditional formatting possible for this control?  For example can the font for column 'B' entries be turned red for values < 0 and green for values > 0?

4) For grids with lots of data, will the control automatically implement scrolling or does the control have to be a child of a scrollview control?

Thanks very much in advance.

 

 

 

 

[sv]

5) If grouped by column 'A', the column is still visible. If its visibility property is set to false, then the whole grid header disappears. It seems that showing column 'A' while it is grouped and has its own special header, is redundant. Can this be rectified?

[Lance | Manager Technical Support]

Hi SV,

First, I'd like to point out that the DataGrid CTP control is still in technical preview. We will be adding more features as the control matures and this feedback portal is the best way to communicate what features you'd like to see first.

That said, let me get right to your questions, you can address them with straightforward Xamarin.Forms XAML approaches once inside the TemplateColumn.


1 - Yes. You can define a custom TemplateColumn and set the Label's LineBreakMode.

Here is an example:

<dataGrid:DataGridTemplateColumn HeaderText="Title">
    <dataGrid:DataGridTemplateColumn.CellContentTemplate>
        <DataTemplate>
            <Grid WidthRequest="100" HeightRequest="100" >
                <Label Text="{Binding Title}"
                 LineBreakMode="WordWrap" />
            </Grid>
        </DataTemplate>
    </dataGrid:DataGridTemplateColumn.CellContentTemplate>
</dataGrid:DataGridTemplateColumn>

2 - DataGrid CTP doesn't have support for Aggregates.

You can submit a Feature Request in the Feedback Portal for this. If this is a must have right now, you could add an additional property to your model and do the aggregates manually, then have a column bound to that additional field.


3 - Yes. I have two options you can pick from.

Option #1

You can either use the approach in #1 but set the column's CellContentTemplateSelector property with a custom DataTemplateSelector. Then you'd have different templates with different coloring. For example:

Here's the selector:

class TitleContentTemplateSelector : DataTemplateSelector
{
    public DataTemplate InStockTemplate { get; set; }
    public DataTemplate OutOfStockTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        if (item is BookItemViewModel book)
        {
            return book.IsInStock ? InStockTemplate : OutOfStockTemplate;
        }

        return new DataTemplate();
    }
}

Here's the XAML for the column. Notice that we have two different DataTemplates one with a Green background and one with a DarkRed.

<dataGrid:DataGridTemplateColumn HeaderText="Title" >
    <dataGrid:DataGridTemplateColumn.CellContentTemplateSelector>
        <selectors:TitleContentTemplateSelector>
            <selectors:TitleContentTemplateSelector.InStockTemplate>
                <DataTemplate>
                    <Grid BackgroundColor="Green">
                        <Label Text="{Binding Title}" TextColor="White"/>
                    </Grid>
                </DataTemplate>
            </selectors:TitleContentTemplateSelector.InStockTemplate>
            <selectors:TitleContentTemplateSelector.OutOfStockTemplate>
                <DataTemplate>
                    <Grid BackgroundColor="DarkRed">
                        <Label Text="{Binding Title}" TextColor="White"/>
                    </Grid>
                </DataTemplate>
            </selectors:TitleContentTemplateSelector.OutOfStockTemplate>
        </selectors:TitleContentTemplateSelector>
    </dataGrid:DataGridTemplateColumn.CellContentTemplateSelector>
</dataGrid:DataGridTemplateColumn>

Option #2

Alternatively, you can use a single template and then use converters to set any property you want based on the model's values. For example:

class BackgroundColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is BookItemViewModel book)
        {
            return book.IsInStock ? Color.GreenYellow : Color.OrangeRed;
        }

        return Color.Transparent;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Here's the TemplateColumn's XAML. Notice the BackgroundColor of the Grid is set using the converter above:

<dataGrid:DataGridTemplateColumn HeaderText="Title">
   <dataGrid:DataGridTemplateColumn.CellContentTemplate>
       <DataTemplate>
           <Grid WidthRequest="100" HeightRequest="100"
               BackgroundColor="{Binding Converter={StaticResource BackgroundColorConverter}}">
               <Label Text="{Binding Title}"
                   LineBreakMode="WordWrap" />
           </Grid>
       </DataTemplate>
   </dataGrid:DataGridTemplateColumn.CellContentTemplate>
</dataGrid:DataGridTemplateColumn>

4 - Yes, we handle scrolling (vertical and horizontal)

In fact you should not nest the control within a ScrollViewer as you'll encounter gesture conflicts.


Wrapping Up

If you have any additional questions, please open a support ticket here.  Thank you for contacting Support and for choosing UI for Xamarin.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[sv]

Thank you very much for the prompt reply, Lance. I have submitted a ticket for further questions.

Please ignore the question in regards to the scrolling, it works as expected.

Thanks again.

[LM]

When I implement your code snip-it for question #1 (DataGridTemplateColumn), I get build error 

"Unable to cast object of type 'Xamarin.Forms.Xaml.ListNode' to type 'Xamarin.Forms.Xaml.IElementNode' "

Any obvious reason how to fix this?

<Grid...

    <grid:RadDataGrid Grid.ColumnSpan="3"
                          Grid.Row="2"
                          ItemsSource="{Binding GridSource}"
                          x:Name="grid"  
                          AutoGenerateColumns="False">
                    <grid:RadDataGrid.Columns>
                        <grid:DataGridTemplateColumn HeaderText="Temp Col">    
                            <grid:DataGridTemplateColumn.CellContentTemplate>        
                                <DataTemplate>  
                                    <StackLayout>          
                                        <Grid BackgroundColor="Orange" >                
                                            <Label Text="yada yada" LineBreakMode="WordWrap" />             
                                        </Grid>
                                    </StackLayout>         
                                </DataTemplate>     
                            </grid:DataGridTemplateColumn.CellContentTemplate>
                        </grid:DataGridTemplateColumn>

 

[Yana]

Hello,

I didn't manage to reproduce such an error with the provided TemplateColumn of the DataGrid control. 

What I could advise is to check all the bindings you're using - such an error could be raised when a value is assigned to an event in XAML instead to a property.

If you still experience the issue, please open a support ticket and send us a small demo project, so we to be able to test and investigate it.

Regards,
Yana
Progress Telerik