locked
Deleting row in listview with gridview using button RRS feed

  • Question

  • I am having a listview with gridview. I have an extra column which contains a button for deleting the particular row. On clicking the particular button of that row, the row should get deleted. Please help me how I can do this??

    Thanks and Regards, NIKUNJ PARIKH

    Tuesday, November 17, 2015 6:40 AM

Answers

  • This approach uses mvvmlight to make icommand easier.

    If you're unfamiliar with mvvm and or icommand then click the first link in my sig, read that then the second in the series which is linked from that.

    You can download the full solution from here:

    http://1drv.ms/1N8jVIu

    Markup:

    <Window x:Class="wpf_ListView.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            mc:Ignorable="d"
            Title="MainWindow" Height="350" Width="525"
            xmlns:local="clr-namespace:wpf_ListView">
        <Window.Resources>
        </Window.Resources>
        <Window.DataContext>
            <local:MainWindowViewModel/>
        </Window.DataContext>
        <Grid>
            <ListView Name="lvArtists" ItemsSource="{Binding Artists}" >
                <ListView.View>
                    <GridView>
                        <GridViewColumn Header="ID" Width="120" DisplayMemberBinding="{Binding Id}" />
                        <GridViewColumn Header="artist"
                                        x:Name="ArtistColumn"
                                        >
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <ContentControl>
                                        <TextBlock Text="{Binding Name}" />
                                    </ContentControl>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                        <GridViewColumn Header="" >
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                               <Button Command="{Binding DataContext.DeleteCommand  
                                    , RelativeSource={RelativeSource AncestorType=ListView}}"
                                      CommandParameter="{Binding}"
                                      Content="Delete"
                                       />
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    </GridView>
                </ListView.View>
            </ListView>
        </Grid>
    </Window>

    ViewModel

        class MainWindowViewModel : INotifyPropertyChanged
        {
    
            public ObservableCollection<Artist> Artists { get; set; }
    
            private RelayCommand<Artist> _deleteCommand;
            public RelayCommand<Artist> DeleteCommand
            {
                get
                {
                    return _deleteCommand
                      ?? (_deleteCommand = new RelayCommand<Artist>(
                        _artist =>
                        {
                            Artists.Remove(_artist);
                        }));
                }
            }
            public MainWindowViewModel()
            {
                Artists = new ObservableCollection<Artist>();
                Artists.Add(new Artist { Id = 1, Name = "Aaron Goldberg" });
                Artists.Add(new Artist { Id = 2, Name = "AC/DC" });
                Artists.Add(new Artist { Id = 3, Name = "Accept" });
            }
            public event PropertyChangedEventHandler PropertyChanged;
    
            private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
            {
                if (PropertyChanged != null)
                {
                    PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
                }
            }
        }

    Artist

        public class Artist : INotifyPropertyChanged
        {
            private int id;
            public int Id
            {
                get { return id; }
                set { id = value; NotifyPropertyChanged(); }
            }
    
            private string name;
    
            public string Name
            {
                get { return name; }
                set { name = value; NotifyPropertyChanged(); }
            }
    
            public event PropertyChangedEventHandler PropertyChanged;
    
            private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
            {
                if (PropertyChanged != null)
                {
                    PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
                }
            }
        }


    Hope that helps.

    Technet articles: WPF: MVVM Step 1; All my Technet Articles

    Tuesday, November 17, 2015 9:03 AM
  • >>On clicking the particular button of that row, the row should get deleted. Please help me how I can do this??

    It depends on the type of the collection that you use as the ItemsSource for your ListView. If you set or bind the ItemsSource property of the ListView to an ObservableCollection<T>, you could remove the item from it by handling the Click event for the Button like this:

            private void Button_Click(object sender, RoutedEventArgs e)
            {
                Button clickedButton = sender as Button;
                ObservableCollection<string> coll = listView1.ItemsSource as ObservableCollection<string>;
                coll.Remove(clickedButton.DataContext as string);
            }


    Of course you need to replace string with the actual type of your objects represented by the typeparameter T in your ObservableCollection<T>. Note that this won't work for a List<T> so you need to replace the List<T> with an ObservableCollection<T>.

    If you use a DataView, you could remove the row something like this:

            private void Button_Click(object sender, RoutedEventArgs e)
            {
                Button clickedButton = sender as Button;
                DataView dv = listView1.ItemsSource as DataView;
                DataRowView drv  = clickedButton.DataContext as DataRowView;
                dv.Table.Rows.Remove(drv.Row);
            }

    Hope that helps.

    Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

    Tuesday, November 17, 2015 5:02 PM

All replies

  • This approach uses mvvmlight to make icommand easier.

    If you're unfamiliar with mvvm and or icommand then click the first link in my sig, read that then the second in the series which is linked from that.

    You can download the full solution from here:

    http://1drv.ms/1N8jVIu

    Markup:

    <Window x:Class="wpf_ListView.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            mc:Ignorable="d"
            Title="MainWindow" Height="350" Width="525"
            xmlns:local="clr-namespace:wpf_ListView">
        <Window.Resources>
        </Window.Resources>
        <Window.DataContext>
            <local:MainWindowViewModel/>
        </Window.DataContext>
        <Grid>
            <ListView Name="lvArtists" ItemsSource="{Binding Artists}" >
                <ListView.View>
                    <GridView>
                        <GridViewColumn Header="ID" Width="120" DisplayMemberBinding="{Binding Id}" />
                        <GridViewColumn Header="artist"
                                        x:Name="ArtistColumn"
                                        >
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <ContentControl>
                                        <TextBlock Text="{Binding Name}" />
                                    </ContentControl>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                        <GridViewColumn Header="" >
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                               <Button Command="{Binding DataContext.DeleteCommand  
                                    , RelativeSource={RelativeSource AncestorType=ListView}}"
                                      CommandParameter="{Binding}"
                                      Content="Delete"
                                       />
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    </GridView>
                </ListView.View>
            </ListView>
        </Grid>
    </Window>

    ViewModel

        class MainWindowViewModel : INotifyPropertyChanged
        {
    
            public ObservableCollection<Artist> Artists { get; set; }
    
            private RelayCommand<Artist> _deleteCommand;
            public RelayCommand<Artist> DeleteCommand
            {
                get
                {
                    return _deleteCommand
                      ?? (_deleteCommand = new RelayCommand<Artist>(
                        _artist =>
                        {
                            Artists.Remove(_artist);
                        }));
                }
            }
            public MainWindowViewModel()
            {
                Artists = new ObservableCollection<Artist>();
                Artists.Add(new Artist { Id = 1, Name = "Aaron Goldberg" });
                Artists.Add(new Artist { Id = 2, Name = "AC/DC" });
                Artists.Add(new Artist { Id = 3, Name = "Accept" });
            }
            public event PropertyChangedEventHandler PropertyChanged;
    
            private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
            {
                if (PropertyChanged != null)
                {
                    PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
                }
            }
        }

    Artist

        public class Artist : INotifyPropertyChanged
        {
            private int id;
            public int Id
            {
                get { return id; }
                set { id = value; NotifyPropertyChanged(); }
            }
    
            private string name;
    
            public string Name
            {
                get { return name; }
                set { name = value; NotifyPropertyChanged(); }
            }
    
            public event PropertyChangedEventHandler PropertyChanged;
    
            private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
            {
                if (PropertyChanged != null)
                {
                    PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
                }
            }
        }


    Hope that helps.

    Technet articles: WPF: MVVM Step 1; All my Technet Articles

    Tuesday, November 17, 2015 9:03 AM
  • >>On clicking the particular button of that row, the row should get deleted. Please help me how I can do this??

    It depends on the type of the collection that you use as the ItemsSource for your ListView. If you set or bind the ItemsSource property of the ListView to an ObservableCollection<T>, you could remove the item from it by handling the Click event for the Button like this:

            private void Button_Click(object sender, RoutedEventArgs e)
            {
                Button clickedButton = sender as Button;
                ObservableCollection<string> coll = listView1.ItemsSource as ObservableCollection<string>;
                coll.Remove(clickedButton.DataContext as string);
            }


    Of course you need to replace string with the actual type of your objects represented by the typeparameter T in your ObservableCollection<T>. Note that this won't work for a List<T> so you need to replace the List<T> with an ObservableCollection<T>.

    If you use a DataView, you could remove the row something like this:

            private void Button_Click(object sender, RoutedEventArgs e)
            {
                Button clickedButton = sender as Button;
                DataView dv = listView1.ItemsSource as DataView;
                DataRowView drv  = clickedButton.DataContext as DataRowView;
                dv.Table.Rows.Remove(drv.Row);
            }

    Hope that helps.

    Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

    Tuesday, November 17, 2015 5:02 PM