Unable to handle MyToolKit.Extended DataGrid in UWP

Question

I am developing a UWP application. Here I want to show data in a table formate like below,

Here my purpose is I will search items and add those to this grid. with out data in grid If I click on Rounded button(Red Color it's a datagrid Header template ) its working fine , but if grid contains some data in that case if I click on Rounded Image Button getting unhand-led Exception like ,

Here I am placing the code which I have used,

<controls:DataGrid x:Name="dgNewBill" Grid.Row="0" Grid.Column="0" MinHeight="500" HorizontalAlignment="Left" HeaderBackground="Black"  DefaultOrderIndex="1" Background="Black" RowBackgroundEvenBrush="Black" RowBackgroundOddBrush="Black" >
                                <controls:DataGrid.RowStyle>
                                    <Style TargetType="ListBoxItem">
                                        <Setter Property="Padding" Value="0"></Setter>
                                        <Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
                                    </Style>
                                </controls:DataGrid.RowStyle>

                                <controls:DataGrid.Columns>
                                    <controls:DataGridTextColumn Width="50" Binding="{Binding SNumber}" Foreground="White"
                     IsAscendingDefault="False" CanSort="False">
                                        <controls:DataGridTextColumn.Header>
                                            <Button x:Uid="RSNO" Height="40"  Width="50" HorizontalAlignment="Left" Style="{StaticResource RoundButtonTemplate}" Margin="-10,0,0,0"/>
                                        </controls:DataGridTextColumn.Header>
                                        <controls:DataGridTextColumn.Style>
                                            <Style TargetType="TextBlock">
                                                <Setter Property="TextAlignment" Value="Center"></Setter>
                                            </Style>
                                        </controls:DataGridTextColumn.Style>
                                    </controls:DataGridTextColumn>

                                    <!--Item Column-->
                                    <controls:DataGridTextColumn Width="380" Binding="{Binding description}" Foreground="White" CanSort="False">
                                        <controls:DataGridTextColumn.Header>
                                            <Button x:Uid="RItem"  Height="40" Width="380"   Style="{StaticResource RoundButtonTemplate}"  Margin="-12,0,0,0"/>
                                        </controls:DataGridTextColumn.Header>
                                        <controls:DataGridTextColumn.Style>
                                            <Style TargetType="TextBlock">
                                                <Setter Property="TextAlignment" Value="Center"></Setter>
                                            </Style>
                                        </controls:DataGridTextColumn.Style>
                                    </controls:DataGridTextColumn>
                                    <!--UOM column-->
                                    <controls:DataGridTextColumn Width="120" Binding="{Binding uom}" Foreground="White" CanSort="False">
                                        <controls:DataGridTextColumn.Header>
                                            <Button x:Uid="RUOM" Height="40" Width="120"  Style="{StaticResource RoundButtonTemplate}"  Margin="-12,0,0,0"/>
                                        </controls:DataGridTextColumn.Header>
                                        <controls:DataGridTextColumn.Style>
                                            <Style TargetType="TextBlock">
                                                <Setter Property="TextAlignment" Value="Center"></Setter>
                                            </Style>
                                        </controls:DataGridTextColumn.Style>
                                    </controls:DataGridTextColumn>
                                    <!--Price Column-->
                                    <controls:DataGridTemplatedColumn>
                                        <controls:DataGridTemplatedColumn.Header>
                                            <Button x:Uid="RPrice" Height="40" Width="110"  Style="{StaticResource RoundButtonTemplate}"  Margin="-12,0,0,0"/>
                                        </controls:DataGridTemplatedColumn.Header>
                                        <controls:DataGridTemplatedColumn.CellTemplate>
                                            <DataTemplate>
                                                <StackPanel Name="pricePanel" Width="110" Height="30" Tapped="pricePanel_Tapped" >
                                                    <TextBlock Name="price" Foreground="White"  Text='{Binding price}' VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,5,0,0"></TextBlock>
                                                </StackPanel>
                                            </DataTemplate>
                                        </controls:DataGridTemplatedColumn.CellTemplate>
                                    </controls:DataGridTemplatedColumn>


                                     <!--Qty Column-->
                                    <controls:DataGridTemplatedColumn>
                                        <controls:DataGridTemplatedColumn.Header>
                                            <Button x:Uid="RQty" Height="40" Width="110"  Style="{StaticResource RoundButtonTemplate}"  Margin="-25,0,0,0"/>
                                        </controls:DataGridTemplatedColumn.Header>
                                        <controls:DataGridTemplatedColumn.CellTemplate>
                                            <DataTemplate>
                                                <StackPanel Name="quantityPanel" Width="50" Height="30" Tapped="quantityPanel_Tapped">
                                                    <TextBlock Name="quantity" Foreground="White"  Text='{Binding quantity}' VerticalAlignment="Center" Margin="0,5,0,0"></TextBlock>
                                                </StackPanel>
                                            </DataTemplate>
                                        </controls:DataGridTemplatedColumn.CellTemplate>
                                    </controls:DataGridTemplatedColumn>

                                    <!--Discount Column-->
                                    <controls:DataGridTemplatedColumn>
                                        <controls:DataGridTemplatedColumn.Header>
                                            <Button x:Uid="Rdiscount" Height="40" Width="60"  Style="{StaticResource RoundButtonTemplate}"  Margin="-25,0,0,0"/>
                                        </controls:DataGridTemplatedColumn.Header>
                                        <controls:DataGridTemplatedColumn.CellTemplate>
                                            <DataTemplate>
                                                <StackPanel Name="discountPanel" Width="60" Height="30" Tapped="discountPanel_Tapped" >
                                                    <TextBlock Name="Discount" Foreground="White" Text='{Binding discount}' VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,5,0,0"></TextBlock>
                                                </StackPanel>
                                            </DataTemplate>
                                        </controls:DataGridTemplatedColumn.CellTemplate>
                                    </controls:DataGridTemplatedColumn>

                                    <!--Cost Column-->
                                    <controls:DataGridTextColumn Width="110" Binding="{Binding cartTotal}" Foreground="White" CanSort="False" >
                                        <controls:DataGridTextColumn.Header>
                                            <Button x:Uid="RCartTotal" Height="40" Width="110"   Style="{StaticResource RoundButtonTemplate}"  Margin="-25,0,0,0"/>
                                        </controls:DataGridTextColumn.Header>
                                        <controls:DataGridTextColumn.Style>
                                            <Style TargetType="TextBlock">
                                                <Setter Property="TextAlignment" Value="Center"></Setter>
                                            </Style>
                                        </controls:DataGridTextColumn.Style>
                                    </controls:DataGridTextColumn>

                                <!--void image column-->
                                    <controls:DataGridTemplatedColumn>
                                        <controls:DataGridTemplatedColumn.Header>
                                            <Button Name="Cancelbtn" Height="50" Click="Cancelbtn_Click" Width="55" >
                                                <Image Source="/Images/erase.png"  Name="ImgClearCartp" Height="40" Width="40" ></Image>
                                            </Button>
                                        </controls:DataGridTemplatedColumn.Header>
                                        <controls:DataGridTemplatedColumn.CellTemplate>
                                            <DataTemplate>
                                                <StackPanel Name="voidImagePanel" Width="50" Height="30" Tapped="voidImagePanel_Tapped" >
                                                    <Image Name="VoidImage" Source='{Binding imageUrl}' Height="20" Width="30" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="0,5,0,0"></Image>
                                                </StackPanel>
                                            </DataTemplate>
                                        </controls:DataGridTemplatedColumn.CellTemplate>
                                    </controls:DataGridTemplatedColumn>
                                </controls:DataGrid.Columns>
                            </controls:DataGrid>

I have tested and according to my understanding, because of using DataGridTemplatedColumn getting this exception. But according to my scope I have to use TemplateColumn instead of DataGridTextColumn.

And I have used https://github.com/MyToolkit/MyToolkit/wiki/DataGrid

link. Please suggest me how can I solve this issue?

May be it would be better write issue on github? – Alexej Sommer Jun 04 '16 at 16:18 — Alexej Sommer, Jun 04 '16 at 16:18

score 1 · Accepted Answer · answered Jun 07 '16 at 10:03

I have tested and according to my understanding, because of using DataGridTemplatedColumn getting this exception. But according to my scope I have to use TemplateColumn instead of DataGridTextColumn.

Yes, for this issue, one workaround is to replace DataGridTemplatedColumn to DataGridTextColumn.But there are other two workarounds you can use which I think are better than directly replacing.

You can add the order property like Order="{Binding imageUrl}"for the DataGridTemplatedColumn as follows:

<controls:DataGridTemplatedColumn Order="{Binding imageUrl}">
<controls:DataGridTemplatedColumn.Header>
    <Button Name="Cancelbtn"
            Width="55"
            Height="50"
            Background="Green"
            Click="Cancelbtn_Click">
        <Image Name="ImgClearCartp"
               Width="40"
               Height="40"
               Source="Assets/cafee2.jpg" />
    </Button>
</controls:DataGridTemplatedColumn.Header>
<controls:DataGridTemplatedColumn.CellTemplate>
    <DataTemplate>
        <StackPanel Name="voidImagePanel"
                    Width="50"
                    Height="30"
                    Tapped="voidImagePanel_Tapped">
            <Image Name="VoidImage"
                   Width="30"
                   Height="20"
                   Margin="0,5,0,0"
                   HorizontalAlignment="Left"
                   VerticalAlignment="Center"
                   Source="{Binding imageUrl}" />
        </StackPanel>
    </DataTemplate>
</controls:DataGridTemplatedColumn.CellTemplate>

If you don't need to sort the column you can simply add the CanSort="False" for the DataGridTemplatedColumn element as follows:
```
<controls:DataGridTemplatedColumn  CanSort="False">
...
</controls:DataGridTemplatedColumn.CellTemplate>
```
The reason of the exception from MyToolkit is the order property of DataGridTemplatedColumn element is null initial but to be got path parameter from it as following picture shows.You can also submit this issue to MyToolKit issues to ask the MyToolKit team to fix it.

Yes, you are correct.Grid is having Images and by default sorting is enabled so because of Sorting getting this issue. After doing number of attempts got the solution.Small correction to your solution is **Order** Usage is not required. Thanks @Sunteen — Sagar, Jun 07 '16 at 11:33

Unable to handle MyToolKit.Extended DataGrid in UWP

1 Answers1