How to Import selected data from Xamgrid using WPF and MVVM

Shikha Gupta
 
SharePoint Developer
April 9, 2017
 
Rate this article
 
Views
3113

In the first part we saw that how we can bind the data in Xamgrid and now we will have checkbox column where we can select the data and import the selected data.

Let’s modify the previous solution.

1. Open XamgridViewModel.cs and in Binddata() method after the following line

 var table = new DataView(dtDataXML).ToTable(false, selectedColumns);

2. Add the following code as we have to add a select column for checkboxes.

 DataColumn col = new DataColumn("Select", typeof(bool));
             table.Columns.Add(col);
             table.Columns["Select"].SetOrdinal(0);
             table.Columns["Select"].DefaultValue = false;
             foreach (var row in table.Rows)
                 ((DataRow)row)["Select"] = false;
 

The code will look like below.

clip_image002

3. Open MainWindow.Xaml and after the closing tag of row selector settings.

 (</ig:XamGrid.RowSelectorSettings>)

Add the following code:

 <ig:XamGrid.Columns>
                                         <ig:TemplateColumn Key="Select" IsFixable="True">
                                             <ig:TemplateColumn.ItemTemplate>
                                                 <DataTemplate>
                                                     <CheckBox Name="_checkBoxDataTemplate" IsChecked="{Binding Select}"/>
                                                 </DataTemplate>
                                             </ig:TemplateColumn.ItemTemplate>
                                         </ig:TemplateColumn>
                                     </ig:XamGrid.Columns>
 

The screen will look like below:

clip_image004

4. Add an Import button in MainWindowXaml file after the hide popup button for that copy and paste the following code. This will imported the selected rows.

 <Button x:Name="ImportButton"   Content="Import Selected Comps" Command="{Binding ImportSelectedComps}" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="8"/>

5. Open XamgridViewModel.cs and add the following code.

 private List<string> _compidlist;
         public List<string> Cmpidlist
         {
             get { return _compidlist; }
             set
             {
                 _compidlist = value;
                 RaisePropertyChanged("Cmpidlist");
             }
         }
 protected RelayCommand _importSelectedComps;
         public ICommand ImportSelectedComps
         {
             get
             {
                 if (_importSelectedComps == null)
                 {
                     _importSelectedComps = new RelayCommand(() => this.ImportSelected(),
                         () => this.CanImportSelected());
                 }
                 return _importSelectedComps;
             }
         }
         public bool CanImportSelected()
         {
             return true;
         }
         public void ImportSelected()
         {
             Cmpidlist = new List<string>();
             foreach (var row in DataEditorDataTable.DefaultView)
             {
                 DataRowView rowView = (DataRowView)row;
 
                 if (rowView["Select"] != DBNull.Value)
                 {
                     var isSelected = (bool)rowView["Select"];
                     if (isSelected)
                     {
                         Cmpidlist.Add(rowView["Compid"].ToString());
                     }
                 }
             }
             Cmpidlist = Cmpidlist.Distinct().ToList();
         }
 

6. Add a listbox in MainWindowXaml file after the closing tag of xamgrid which will contain the compid of checked rows.

     <ListBox Grid.Row="1" Grid.Column="1" Width="100" Height="200" HorizontalAlignment="Right" VerticalAlignment="Center" ItemsSource="{Binding Path=DataContext.Cmpidlist, RelativeSource={RelativeSource AncestorType=UserControl}, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
     </ListBox>
 

7. Now run the project and select the rows and click on Import Selected Comps button. You have the id of the selected rows and now you can use it in any way you want.

The screen will look like below after selecting few data and clicking on Import button you will get the compid in Listbox on the right.

clip_image006

Happy CodingJ.

Category : MVVM, WPF

Author Info

Shikha Gupta
 
SharePoint Developer
 
Rate this article
 
Sikha has been working in IT Industry for over 5 years. She holds a B-tech degree. She is passionate about learning and sharing the tricks and tips in .Net , ...read more
 

Leave a comment