bind CheckBox inside sfDataGrid DataGridTemplateColumn

[Les Caudle]

I'm using a sfDataGrid that uses DataGridTemplateColumns so that I can stack several fields in two or three rows to be able to Fit the width of a small iPhone.

I'm bound properly to a view model usiong ObservableObject and [ObservableProperty].

My data (other than the checkbox) displays perfectly in the grid.

But I can't seem to bind my ViewModel to the CheckBox to display it - or save the data in the ViewModel when checked by a user?

How can I resolve this problem?

I'd setting for a workaround where I could view the grid's controls one by one and pull the checked data out by hand.

But obviously I need a way to Bind the CheckBox inside a DataGridTemplateColumn?

And of course what's the status of an sfCheckBox control for Maui that would fit inside the grid?

 <syncfusion:DataGridTemplateColumn MappingName="Name" HeaderText="Type/Interested" HeaderTextAlignment="Center" HeaderPadding="0" Width="165">

      <syncfusion:DataGridTemplateColumn.CellTemplate>

          <DataTemplate>

              <StackLayout>

                  <Label Text="{Binding TypeId}" TextColor="Black" HorizontalTextAlignment="Center" />

                  <CheckBox x:Name="interestedChk" IsChecked="{Binding interested}" HorizontalOptions="Center" />

              </StackLayout>

          </DataTemplate>

      </syncfusion:DataGridTemplateColumn.CellTemplate>

</syncfusion:DataGridTemplateColumn>

[Nirmalkumar Yuvaraj]

Hi Les,

S.NO	Query	Response
1	I need a way to Bind the CheckBox inside a DataGridTemplateColumn	Based on the information provided, it appears that the issue you are experiencing is related to Binding. The CellTemplate Binding should be set properly to get the selected item on the ViewModel. Please refer to the below code snippet for reference.   Code Snippet : <syncfusion:DataGridTemplateColumn.CellTemplate>     <DataTemplate>         <StackLayout>             <Label Text="{Binding Name}" TextColor="Black" HorizontalTextAlignment="Center" />             <CheckBox x:Name="interestedChk" CheckedChanged="interestedChk_CheckedChanged" IsChecked="{Binding interested, Source={RelativeSource AncestorType={x:Type local:ViewModel}}}" HorizontalOptions="Center" />         </StackLayout>     </DataTemplate> </syncfusion:DataGridTemplateColumn.CellTemplate>
2	what's the status of an sfCheckBox control for Maui that would fit inside the grid?	Currently we are migrating existing feature from Xamarin forms controls to .Net MAUI. We have already considered to implement SfCheckBox  support in any of our upcoming 2023 Volume 3 release which is scheduled on end of September 2023. You can refer to the below document to know about upcoming Controls in .Net MAUI.   https://www.syncfusion.com/blogs/post/syncfusion-net-maui-2023-roadmap.aspx

Regards,

Nirmalkumar

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[Les Caudle]

I'm creating the ViewModel using Dependency Injection so I don't want to Also include it at the top of the XAML where it would be created twice.

And I'm guessing that is causing my problem?

Error XFC0000 Cannot resolve type ":TestGridViewModel"

Possibly I also need to declare the ViewModel at the top of the XAML in some fashion where it can be resolved?

The 'TypeId' field resolves correctly by just using the "{Binding TypeId}" so I'm unclear why "{Binding interested" doesn't work the same?

Or do I need to tweak the "Source={RelativeSource AncestorType={x:Type local:TestGridViewModel}}"?

BTW - I REALLY hope that SyncFusion can release their Maui sfCheckBox a bit earlier?

That's something I really Need .. one of the very basic Essentials .. and the Microsoft CheckBox is very inferior to what SyncFusion will provide.

Also - I'm copying this code from a text editor.  The extra blank lines are being added when I paste.  How can I stop that from happening - and it would be great to be able to paste Code in and have that formatted differently from normal text?

Here's more code snippets if this will help to understand what I'm trying to accomplish.

I'm obviously missing something .. obvious lol???

public partial class TestGrid : ContentPage, IQueryAttributable {

    public TestGridViewModel vm { get; set; }

    public TestGrid(TestGridViewModel vm) {

        InitializeComponent();

        this.vm = vm;

        BindingContext = vm;

    }

}

public partial class TestGridViewModel : ObservableObject {

    [ObservableProperty]

    private List<GridItems> gridItems;

    public TestGridViewModel() {

        GridItems = new List<GridItems>();

    }

}

public sealed partial class GridItems : ObservableObject {

  [ObservableProperty]

  public bool interested;

  [ObservableProperty]

  public string typeId;

}

<syncfusion:SfDataGrid x:Name="dataGrid" Grid.Row="1" BackgroundColor="#DDE8EC"

             AutoGenerateColumnsMode="None"

             ColumnWidthMode="FitByHeader"

             SelectionMode="None"

             SortingMode="None"

             ShowSortNumbers="False"

             AllowTriStateSorting="False"

             RowHeight="65"

             VerticalScrollBarVisibility="Always"

             Margin="0"

             ItemsSource="{Binding GridItems}">

  <syncfusion:SfDataGrid.Columns>

  <syncfusion:DataGridTemplateColumn MappingName="Name" HeaderText="Modality/Interested" HeaderTextAlignment="Center" HeaderPadding="0" Width="165">

      <syncfusion:DataGridTemplateColumn.CellTemplate>

          <DataTemplate>

              <StackLayout>

                  <Label Text="{Binding TypeId}" TextColor="Black" HorizontalTextAlignment="Center" />

                  <CheckBox x:Name="interestedChk" CheckedChanged="interestedChk_CheckedChanged"

                            IsChecked="{Binding interested, Source={RelativeSource AncestorType={x:Type local:TestGridViewModel}}}"

                            HorizontalOptions="Center" />

              </StackLayout>

          </DataTemplate>

      </syncfusion:DataGridTemplateColumn.CellTemplate>

  </syncfusion:DataGridTemplateColumn>

</syncfusion:SfDataGrid.Columns>

</syncfusion:SfDataGrid>

[Les Caudle]

I just tried adding

xmlns:local="clr-namespace:MyNameSpace"

and using

<CheckBox x:Name="interestedChk"

          IsChecked="{Binding interested, Source={RelativeSource AncestorType={x:Type local:GridItems}}}"

          HorizontalOptions="Center" />

and that compiles (I'm using compiled XAML) but still doesn't display the data .. or more importantly Save the 'true' bool when I click on the checkbox.

It doesn't seem to actually be bound in the way that {Binding TypeId} is bound and displays the data in the ViewModel?

and if it's Bound and displaying the original data (it's not) and hopefully causing the bounc ViewModel's data to change when clicked, what's the purpose of CheckedChanged="interestedChk_CheckedChanged" ?

[Nirmalkumar Yuvaraj]

Hi Les,

S.NO	Query	Response
1	I need a way to Bind the CheckBox inside a DataGridTemplateColumn	Based on the information provided, it appears that the issue you are experiencing is related to Binding. Please refer to the below code snippet for reference.   Code Snippet : <syncfusion:DataGridTemplateColumn.CellTemplate>     <DataTemplate>         <StackLayout>             <Label Text="{Binding Name}" TextColor="Black" HorizontalTextAlignment="Center" />             <CheckBox x:Name="interestedChk"         IsChecked="{Binding Interested}" HorizontalOptions="Center" />         </StackLayout>     </DataTemplate> </syncfusion:DataGridTemplateColumn.CellTemplate>
2	I'm copying this code from a text editor.  The extra blank lines are being added when I paste.  How can I stop that from happening - and it would be great to be able to paste Code in and have that formatted differently from normal text?	Based on the information provided, we tried to replicate the reported issue. we were unable to reproduce. It is working fine on our side.
3	what's the purpose of CheckedChanged="interestedChk_CheckedChanged"	Please ignore that event code. We used it to check another issue.

Regards,

Nirmalkumar

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[Les Caudle]

Please look at my Original message in this thread?

I clearly show:

  <CheckBox x:Name="interestedChk" IsChecked="{Binding interested}" HorizontalOptions="Center" />

and that is what you are now suggesting instead of your original suggestion?

That doesn't actually Bind for some reason.  The label above it Does bind so I have my code setup properly?

I really need to get this working with CheckBox as your improved version has not been released yet?

Could you generate tested sample code where this works

[Nirmalkumar Yuvaraj]

Hi Les,

Based on the information provided, it appears that the issue you are experiencing is related to Binding. Please refer to the below code snippet for reference.

Your Code snippet:

<Label Text="{Binding TypeId}"/>

 <CheckBox   IsChecked="{Binding interested}"/>

In this case, you are attempting to bind the Property of the Model class to the label ("TypeID" starting with "T"), and the field of the model class to the CheckBox ("intrested" starting with "i") instead of the property (“Interested” with an “I”). Please modify the binding property name from "interested" to "Interested".

Working Code Snippet :

<Label Text="{Binding TypeId }" />

<CheckBox IsChecked="{Binding Interested}" />

Regards,

Nirmalkumar

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[Les Caudle]

You have .. Way .. better eyes than I do lol !!!   I couldn't tell the difference between an 'i' and an 'I'?  

Thank you for your patience in explaining my error!!

I had

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]

in MauiProgram.cs so I'd assumed I'd see a binding failure during compilation?

Apparently I needed to instead look in 'XAML Binding Failures' tab while the program is Executing instead?

Lesson learned!!   I still can't Wait until sfCheckBox is released for Maui though!!!

[Nirmalkumar Yuvaraj]

Glad that your issue is resolved!! Please let us know if you require any further assistance. As always, we are happy to help you out.