1. Home
  2. Forum
  3. WPF
  4. my user control in GridUnBoundRow

my user control in GridUnBoundRow

Hi!

Can I add my user control in SfDataGrid (not in GridDataControl) in GridUnBoundRow?
I looked example "Unbound row" from Syncfusion Dashboard, but they work through the styles/templates, not through user control.

Regards,
Vitalii



4 Replies
SV Srinivasan Vasu Syncfusion Team May 9, 2016 12:22 PM UTC

Hi Vitalii, 
 
Thanks for contacting Syncfusion support. 
 
We have analyzed your query and you have to create custom cell render which should be derive from GridUnBoundRowCellRenderer. You can load any user controls as EditElement or DisplayElement like below code example. 
 
Please refer the below code example and download sample from the below location. 
 
C# 
 
//Customized UnBoundRowCellRenderer 
 
public class DatePickerRenderer : GridUnBoundRowCellRenderer<TextBlock, DatePicker> 
    {       
        public DatePickerRenderer() 
        { 
 
        }   
        protected override TextBlock OnCreateDisplayUIElement() 
        { 
            return new TextBlock(); 
        }       
        protected override DatePicker OnCreateEditUIElement() 
        { 
            return new DatePicker(); 
        } 
     
        public override void OnInitializeDisplayElement(DataColumnBase dataColumn, TextBlock uiElement, object dataContext) 
        { 
            uiElement.Text = dataColumn.GridUnBoundRowEventsArgs.Value.ToString(); 
        } 
        public override void OnUpdateDisplayBinding(DataColumnBase dataColumn, TextBlock uiElement, object dataContext) 
        { 
            uiElement.Text = dataColumn.GridUnBoundRowEventsArgs.Value.ToString(); 
        } 
 
        #region Edit Element 
      
        public override void OnInitializeEditElement(DataColumnBase dataColumn, DatePicker uiElement, object dataContext) 
        { 
            uiElement.SelectedDate = (DateTime?)dataColumn.GridUnBoundRowEventsArgs.Value; 
            uiElement.Tag = dataColumn; 
        } 
        
        public override void OnUpdateEditBinding(DataColumnBase dataColumn, DatePicker element, object dataContext) 
        { 
            element.SelectedDate = (DateTime?)dataColumn.GridUnBoundRowEventsArgs.Value; 
            element.Tag = dataColumn; 
        } 
      
        protected override void OnWireEditUIElement(DatePicker uiElement) 
        { 
            base.OnWireEditUIElement(uiElement); 
            uiElement.SelectedDateChanged += uiElement_SelectedDateChanged; 
        }        
        
        public void uiElement_SelectedDateChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e) 
        { 
            var datapicker = sender as DatePicker; 
            if (datapicker.Tag is DataColumn) 
            { 
                var dataColumn = datapicker.Tag as DataColumn; 
                dataColumn.GridUnBoundRowEventsArgs.Value = (sender as DatePicker).SelectedDate; 
                DataGrid.RaiseQueryUnBoundRow(dataColumn.GridUnBoundRowEventsArgs.GridUnboundRow, UnBoundActions.CommitData, dataColumn.GridUnBoundRowEventsArgs.Value, dataColumn.GridColumn, dataColumn.GridUnBoundRowEventsArgs.CellType, new Syncfusion.UI.Xaml.ScrollAxis.RowColumnIndex(dataColumn.RowIndex, dataColumn.ColumnIndex)); 
            } 
        } 
        #endregion 
 
        #region Update 
     
        protected override void OnEditingComplete(DataColumnBase dataColumn, FrameworkElement currentRendererElement) 
        { 
            dataColumn.GridUnBoundRowEventsArgs.Value = (currentRendererElement as DatePicker).Text; 
            DataGrid.RaiseQueryUnBoundRow(dataColumn.GridUnBoundRowEventsArgs.GridUnboundRow, UnBoundActions.CommitData, dataColumn.GridUnBoundRowEventsArgs.Value, dataColumn.GridColumn, dataColumn.GridUnBoundRowEventsArgs.CellType, new Syncfusion.UI.Xaml.ScrollAxis.RowColumnIndex(dataColumn.RowIndex, dataColumn.ColumnIndex)); 
        } 
        #endregion 
    } 
 
 
… 
 
 
  public MainWindow() 
        { 
            InitializeComponent();        
            sfDataGrid.QueryUnBoundRow += sfDataGrid_QueryUnBoundRow; 
            sfDataGrid.UnBoundRowCellRenderers.Add("DatePickerRenderer", new DatePickerRenderer()); 
        } 
 
 
private void sfDataGrid_QueryUnBoundRow(object sender,  
 
Syncfusion.UI.Xaml.Grid.GridUnBoundRowEventsArgs e) 
        { 
            if (e.UnBoundAction == UnBoundActions.QueryData) 
            { 
                if (e.RowColumnIndex.ColumnIndex == 0) 
                { 
                    e.CellType = "DatePickerRenderer"; 
                    e.Value = DateTime.Now; 
                    e.Handled = true; 
                }              
            } 
        }     
 
 
 
Please refer the below UG Link to know more about GridUnBoundRow. 
 
 
Sample Location: CS 
 
 
Regards, 
Srinivasan 
 


SV Srinivasan Vasu Syncfusion Team May 10, 2016 11:34 AM UTC

 Hi Vitalii, 
 
You can also load any user controls for unbound row cells using GridUnBoundRowEventArgs.CellTemplate and GridUnBoundRowEventsArgs.EditTemplate property. And also you have to create custom cell render for user control operations, which should be derive from GridUnBoundRowCellRenderer.  
 
Please refer the below code example and download sample from the below location. 
 
C# 
 
//Customized UnBoundRowCellRenderer 
 
  public class GridUnBoundRowCellTextBoxRendererExt : GridUnBoundRowCellRenderer<TextBlock, ComboBox> 
    { 
        public GridUnBoundRowCellTextBoxRendererExt() 
        { 
 
        } 
        protected override TextBlock OnCreateDisplayUIElement() 
        { 
            return new TextBlock(); 
        } 
 
        /// <summary> 
        /// Edit Element creation. 
        /// </summary> 
        /// <returns></returns> 
        protected override ComboBox OnCreateEditUIElement() 
        { 
            return new ComboBox(); 
        } 
        public override void OnInitializeDisplayElement(DataColumnBase dataColumn, TextBlock uiElement, object dataContext) 
        { 
            uiElement.Text = dataColumn.GridUnBoundRowEventsArgs.Value.ToString(); 
        } 
 
        /// <summary> 
        /// Updates the value for display element. 
        /// </summary> 
        /// <param name="dataColumn"></param> 
        /// <param name="uiElement"></param> 
        /// <param name="dataContext"></param> 
        public override void OnUpdateDisplayBinding(DataColumnBase dataColumn, TextBlock uiElement, object dataContext) 
        { 
            uiElement.Text = dataColumn.GridUnBoundRowEventsArgs.Value.ToString(); 
        } 
        #region Edit Element 
         
        ComboBox combo = new ComboBox(); 
        protected override void OnEditElementLoaded(object sender, RoutedEventArgs e) 
        { 
            var displayValue = combo.SelectedValue; 
             combo = sender as ComboBox; 
            List<string> itemsCollection = new List<string>(); 
            itemsCollection.Add("India"); 
            itemsCollection.Add("USA"); 
            combo.ItemsSource = itemsCollection;             
            combo.SelectionChanged += combo_SelectionChanged; 
            combo.SelectedValue = displayValue.ToString();           
        } 
 
        void combo_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e) 
        { 
           combo = sender as ComboBox; 
           
            if (combo != null && combo.SelectedItem != null) 
            { 
                (DataGrid.DataContext as SalesInfoViewModel).DisplayValue = combo.SelectedItem.ToString(); 
                var binding = new Binding(); 
                binding.Converter = new CurrencyConverter(); 
                binding.ConverterParameter = combo.SelectedItem.ToString(); 
                DataGrid.Columns[2].DisplayBinding = binding; 
                DataGrid.Columns[2].ValueBinding = binding; 
            } 
        } 
        /// <summary> 
        /// Initialize the value for edit element. 
        /// </summary> 
        /// <param name="dataColumn"></param> 
        /// <param name="uiElement"></param> 
        /// <param name="dataContext"></param> 
 
        public override void OnInitializeEditElement(DataColumnBase dataColumn, ComboBox uiElement, object dataContext) 
        { 
            if(dataColumn.GridUnBoundRowEventsArgs.Value!=null) 
                combo.SelectedValue = dataColumn.GridUnBoundRowEventsArgs.Value.ToString();                                
        } 
 
        void uiElement_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e) 
        { 
            var comboBox = sender as ComboBox; 
            if (comboBox != null && comboBox.SelectedItem != null) 
            { 
                (DataGrid.DataContext as SalesInfoViewModel).DisplayValue = comboBox.SelectedItem.ToString(); 
 
                var binding = new Binding(); 
                binding.Converter = new CurrencyConverter(); 
                binding.ConverterParameter = comboBox.SelectedItem.ToString(); 
                DataGrid.Columns[2].DisplayBinding = binding; 
                DataGrid.Columns[2].ValueBinding = binding; 
                 
                //(DataGrid.Columns[2].DisplayBinding as Binding).ConverterParameter = comboBox.SelectedItem.ToString(); 
                //(DataGrid.Columns[2].DisplayBinding as Binding).Converter = new CurrencyConverter(); 
               
            } 
        } 
        public override void OnUpdateEditBinding(DataColumnBase dataColumn, ComboBox element, object dataContext) 
        {             
       
           var displayValue = (DataGrid.DataContext as SalesInfoViewModel).DisplayValue;                         
            element.SelectedValue = displayValue;             
        } 
        #endregion 
        #region Update 
 
        /// <summary> 
        /// Update display value and raise event 
        /// </summary> 
        /// <param name="dataColumn"></param> 
        /// <param name="currentRendererElement"></param> 
        protected override void OnEditingComplete(DataColumnBase dataColumn, FrameworkElement currentRendererElement) 
        { 
            dataColumn.GridUnBoundRowEventsArgs.Value = (currentRendererElement as ComboBox).SelectedValue; 
            DataGrid.RaiseQueryUnBoundRow(dataColumn.GridUnBoundRowEventsArgs.GridUnboundRow, UnBoundActions.CommitData, dataColumn.GridUnBoundRowEventsArgs.Value, dataColumn.GridColumn, dataColumn.GridUnBoundRowEventsArgs.CellType, new Syncfusion.UI.Xaml.ScrollAxis.RowColumnIndex(dataColumn.RowIndex, dataColumn.ColumnIndex)); 
        } 
        #endregion 
 
… 
 
            public MainWindow() 
           { 
            InitializeComponent();        
            sfDataGrid.QueryUnBoundRow += sfDataGrid_QueryUnBoundRow; 
            sfDataGrid.UnBoundRowCellRenderers.Add("GridUnBoundRowCellTextBoxRendererExt",    new               GridUnBoundRowCellTextBoxRendererExt());         
            } 
 
 
        void sfDataGrid_QueryUnBoundRow(object sender, Syncfusion.UI.Xaml.Grid.GridUnBoundRowEventsArgs e) 
        { 
            if (e.UnBoundAction == UnBoundActions.QueryData) 
            { 
                if (e.GridUnboundRow.UnBoundRowIndex == 0 && e.GridUnboundRow.Position == UnBoundRowsPosition.Top) 
                { 
                    if (e.RowColumnIndex.ColumnIndex == 2) 
                    { 
                        e.CellType = "GridUnBoundRowCellTextBoxRendererExt"; 
                        e.Value = (sfDataGrid.DataContext as SalesInfoViewModel).DisplayValue; 
                        e.Handled = true;                       
                    } 
                } 
            } 
            else if(e.UnBoundAction == UnBoundActions.CommitData) 
            { 
                if(e.Value!=null) 
                    (sfDataGrid.DataContext as SalesInfoViewModel).DisplayValue = e.Value.ToString(); 
            } 
            e.Handled = true; 
        } 
 
        private void ComboBox_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e) 
        { 
            var comboBox = sender as ComboBox; 
            if (comboBox != null && comboBox.SelectedItem != null) 
            { 
                (sfDataGrid.DataContext as SalesInfoViewModel).DisplayValue = (comboBox.SelectedItem as ComboBoxItem).Content.ToString(); 
                var binding = new Binding(); 
                binding.Converter = new CurrencyConverter(); 
                binding.ConverterParameter = (comboBox.SelectedItem as ComboBoxItem).Content; 
                sfDataGrid.Columns[2].DisplayBinding = binding; 
                sfDataGrid.Columns[2].ValueBinding = binding; 
            } 
        }      
   }     
 
 
XAML 
<Window.Resources> 
        <local:SalesInfoViewModel x:Key="ViewModel" /> 
        <DataTemplate x:Key="UnBoundRowCellTemplate"> 
            <TextBlock HorizontalAlignment="Right" 
                       VerticalAlignment="Center" 
                       Padding="3" 
                       Text="{Binding}" 
                       TextWrapping="Wrap" /> 
        </DataTemplate> 
        <DataTemplate x:Key="UnBoundRowEditTemplate"> 
            <ComboBox x:Name="comboBox" 
                      SelectedValue="{Binding}" 
                      SelectionChanged="ComboBox_SelectionChanged"> 
                <ComboBoxItem>India</ComboBoxItem> 
                <ComboBoxItem>USA</ComboBoxItem> 
            </ComboBox> 
        </DataTemplate> 
        <local:CurrencyConverter x:Key="CurrencyConverter" /> 
    </Window.Resources> 
 
  
Please refer the below UG Link to know more about GridUnBoundRow. 
 
 
Sample Location: CS 
 
Regards,
Srinivasan 




VI vitalii May 10, 2016 06:52 PM UTC

Hi, Srinivasan,
Your examples helped me.  )))
Thank you.

Regargs,
Vitalii

SV Srinivasan Vasu Syncfusion Team May 11, 2016 05:19 AM UTC

Hi Vitalii, 
  
Thanks for your update. 
  
Regards,
Srinivasan 


Loader.
Up arrow icon