1. Home
  2. Forum
  3. .NET MAUI
  4. Attempting to use an sfSlider control inside of a grid cell, but I can't seem to make the binding work correctly. Does anyone have any ideas?

Attempting to use an sfSlider control inside of a grid cell, but I can't seem to make the binding work correctly. Does anyone have any ideas?

               <datagrid:SfDataGrid x:DataType="vm:AddSchedulePopupViewModel"

                                    ItemsSource="{Binding SelectedSchedule.ObservableSteps}"

                                    SelectedRow="{Binding SelectedStep}"

                                    AllowDeleting="True"

                                    AllowEditing="True"

                                    SelectionMode="Single"

                                    SelectionUnit="Row"

                                    RowHeight="90"

                                    WidthRequest="1000"

                                    AutoGenerateColumnsMode="None">

                   <datagrid:SfDataGrid.SortColumnDescriptions>

                       <datagrid:SortColumnDescription ColumnName="StepOrder"

                                                       SortDirection="Ascending" />

                   </datagrid:SfDataGrid.SortColumnDescriptions>

                   <datagrid:SfDataGrid.Columns>

                       <datagrid:DataGridTemplateColumn HeaderText="Target (C)" MappingName="TargetTemp"

                                                        Width="600">

                           <datagrid:DataGridTemplateColumn.CellTemplate>

                               <DataTemplate>


                                   <sliders:SfSlider Minimum="100"

                                                     Maximum="1600"

                                                     StepSize="1"

                                                     Interval="1"

                                                     NumberFormat="#,##0"

                                                     ShowLabels="False"

                                                     Value="{Binding TargetTemp}">

                                       <sliders:SfSlider.Tooltip>

                                           <sliders:SliderTooltip ShowAlways="True"

                                                                  Fill="Red"

                                                                  FontSize="20"

                                                                  FontAttributes="Bold"

                                                                  TextColor="White" />

                                       </sliders:SfSlider.Tooltip>

                                   </sliders:SfSlider>



                               </DataTemplate>

                           </datagrid:DataGridTemplateColumn.CellTemplate>

                       </datagrid:DataGridTemplateColumn>

                       <datagrid:DataGridTemplateColumn HeaderText="DPM (C)" MappingName="RampRate"

                                                        Width="100">

                           <datagrid:DataGridTemplateColumn.CellTemplate>

                               <DataTemplate>

                                   <sliders:SfSlider Minimum="0"

                                                     Maximum="150"

                                                     StepSize="1"

                                                     Interval="15"

                                                     NumberFormat="##0"

                                                     ShowLabels="False"

                                                     Value="{Binding RampRate}">

                                       <sliders:SfSlider.Tooltip>

                                           <sliders:SliderTooltip ShowAlways="True"

                                                                  Fill="DarkBlue"

                                                                  FontSize="20"

                                                                  FontAttributes="Bold"

                                                                  TextColor="White" />

                                       </sliders:SfSlider.Tooltip>

                                   </sliders:SfSlider>

                               </DataTemplate>

                           </datagrid:DataGridTemplateColumn.CellTemplate>

                       </datagrid:DataGridTemplateColumn>

                       <datagrid:DataGridTemplateColumn HeaderText="Hold Time (M)" MappingName="Duration"

                                                        Width="300">

                           <datagrid:DataGridTemplateColumn.CellTemplate>

                               <DataTemplate>

                                   <sliders:SfSlider Minimum="0"

                                                     Maximum="300"

                                                     StepSize="1"

                                                     Interval="15"

                                                     NumberFormat="##0"

                                                     ShowLabels="False"

                                                     Value="{Binding Duration}">

                                       <sliders:SfSlider.Tooltip>

                                           <sliders:SliderTooltip ShowAlways="True"

                                                                  Fill="DarkGreen"

                                                                  FontSize="20"

                                                                  FontAttributes="Bold"

                                                                  TextColor="White" />

                                       </sliders:SfSlider.Tooltip>

                                   </sliders:SfSlider>

                               </DataTemplate>

                           </datagrid:DataGridTemplateColumn.CellTemplate>

                       </datagrid:DataGridTemplateColumn>

                   </datagrid:SfDataGrid.Columns>

               </datagrid:SfDataGrid>



3 Replies
RM RiyasHameed MohamedAbdulKhader Syncfusion Team May 14, 2025 02:21 PM UTC

Hi David Kedall,
We have reviewed your reported query and the provided code snippet. It appears that while you have correctly set the x:DataType for the SfDataGrid's BindingContext (i.e., the ViewModel), the x:DataType was not specified for the DataTemplate used in the CellTemplate of the DataGridTemplateColumn. This is the reason the property bindings inside the CellTemplate were not working as expected.
To resolve this, please set the appropriate x:DataType on the DataTemplate used in the CellTemplate. Below is a corrected example for your reference:
<datagrid:SfDataGrid>
    <datagrid:SfDataGrid.Columns>
        <datagrid:DataGridTemplateColumn>
            <datagrid:DataGridTemplateColumn.CellTemplate>
                <DataTemplate x:DataType="vm:ScheduleStep">
                    <sliders:SfSlider Minimum="100"
                                      Maximum="1600"
                                      StepSize="1"
                                      Interval="1"
                                      NumberFormat="#,##0"
                                      ShowLabels="False"
                                      Value="{Binding TargetTemp}">
                        <sliders:SfSlider.Tooltip>
                            <sliders:SliderTooltip ShowAlways="True"
                                                   Fill="Red"
                                                   FontSize="20"
                                                   FontAttributes="Bold"
                                                   TextColor="White" />
                        </sliders:SfSlider.Tooltip>
                    </sliders:SfSlider>
                </DataTemplate>
            </datagrid:DataGridTemplateColumn.CellTemplate>
        </datagrid:DataGridTemplateColumn>
    </datagrid:SfDataGrid.Columns>
</datagrid:SfDataGrid>

We have also attached the modified sample for your reference. If you need further assistance, please feel free to let us know.
Regards,
Riyas Hameed M

Attachment: DataGridMAUI_(3)_1b12512b.zip

DK David Kendall May 14, 2025 07:09 PM UTC

Thank you, the solution basically worked with the exception that I had to define the Step Model from the model namespace. Thank you for your help


RM RiyasHameed MohamedAbdulKhader Syncfusion Team May 15, 2025 09:09 AM UTC

Hi David Kendall,

We are pleased to hear that the provided solution is working well for you. Please feel free to reach out if you require any further  assistance.

Regards,

Riyas Hameed M


Loader.
Up arrow icon