How do I change the image in the grid and store the result in database?

[Гоша]

Hello!
I'm sorry for my english ;)

I want to download images in a grid from a database, edit them and save the result back to base.

I have a database (SQLite) that has a table with images.

I use the grid as follows:

<Window.Resources>
        <my:GoodsInStoreDataSet x:Key="dsMy" />
        <CollectionViewSource x:Key="vs_t_test" Source="{Binding Path=t_test, Source={StaticResource dsMy}}" />
</Window.Resources>
<Grid DataContext="{StaticResource vs_t_test}">
        <telerik:RadGridView ItemsSource="{Binding}" Name="rdGrid" AutoGenerateColumns="False"   MouseDoubleClick="rdGrid_MouseDoubleClick">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding ID}" Header="ID"/>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding NOTE}" Header="Note"/>
                <telerik:GridViewImageColumn DataMemberBinding="{Binding Picture}" Header="Pic" MinWidth="100" ImageStretch="Fill" MaxWidth="100"/>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
</Grid>

Code when loading windows

private void Window_Loaded(object sender, RoutedEventArgs e)

{

    GoodsInStore.GoodsInStoreDataSet dsGIS = ((GoodsInStore.GoodsInStoreDataSet)(this.FindResource("dsMy")));

 

    GoodsInStore.GoodsInStoreDataSetTableAdapters.t_testTableAdapter ta_t_test = new GoodsInStore.GoodsInStoreDataSetTableAdapters.t_testTableAdapter();

    ta_t_test.Fill(dsGIS.t_test);

    System.Windows.Data.CollectionViewSource vs_t_test = ((System.Windows.Data.CollectionViewSource)(this.FindResource("vs_t_test")));

    vs_t_test.View.MoveCurrentToFirst();        

 

}

When the window boot - displays a grid with pictures. All works well.
I can make changes in the "Note" and save the changes to the database.
Saving changes is as follows:

private void  SaveButton_Click(object sender, RoutedEventArgs e)

{

    GoodsInStore.GoodsInStoreDataSet dsGIS = ((GoodsInStore.GoodsInStoreDataSet)(this.FindResource("dsMy"))); 

    GoodsInStore.GoodsInStoreDataSetTableAdapters.t_testTableAdapter ta_t_test = new GoodsInStore.GoodsInStoreDataSetTableAdapters.t_testTableAdapter();

    ta_t_test.Update(dsGIS.t_test);


}

I'm trying to change the picture in the grid as follows:

private void OnCellDoubleClick(object sender, RadRoutedEventArgs args)
{
    GridViewCellBase cell = args.OriginalSource as GridViewCellBase;
    if (cell != null && cell.Column.UniqueName == "Picture")
    {
        Microsoft.Win32.OpenFileDialog dlg = new Microsoft.Win32.OpenFileDialog();
        dlg.DefaultExt = ".jpg";
        dlg.Filter = "Jpeg pictures (.jpg)|*.jpg";
        Nullable<bool> result = dlg.ShowDialog();

        if (result == true)
        {
            string filename = dlg.FileName;
            BitmapImage myBitmapImage = new BitmapImage();

            myBitmapImage.BeginInit();
            myBitmapImage.UriSource = new Uri(filename, UriKind.RelativeOrAbsolute);
            myBitmapImage.EndInit();

            rdGrid.CurrentCell.Value =  myBitmapImage;
        }
    }
}

No changes (not in the grid, not in the database) does not occur. The grid displays the old picture.

Tell me what am I doing wrong?
How to change the image with the grid and in the database?

[Pavel Pavlov]

Hello Gosha,

Instead of doing :

rdGrid.CurrentCell.Value =  myBitmapImage;

Please set directly the Picture property of your business object like

((MyBusinessObject)CurrentCell.ParentRow.DataContext).Picture = myBitmapImage.

*please change "MyBusinessIbject" with the actual name of the class exposing the :Picture property.

*You may also need to implement the INotifyPropertyChanged interface for this class and raise PropertyChanged  in the setter of the Picture property.

In case you experience any troubles implementing this, you may just send me your project ( or a smaller repro version of it ) and let me do the changes for you .


All the best,
Pavel Pavlov
the Telerik team

[Гоша]

Pavel,

How can I send you an archive of the project?
The forum can only attach files with pictures
The project consists of two files

<Window x:Class="TestProject.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="513" Width="665" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" xmlns:my="clr-namespace:TestProject" Loaded="Window_Loaded">
    <Window.Resources>
        <my:GoodsInStoreDataSet x:Key="goodsInStoreDataSet" />
        <CollectionViewSource x:Key="t_testViewSource" Source="{Binding Path=t_test, Source={StaticResource goodsInStoreDataSet}}" />
    </Window.Resources>
    <Grid DataContext="{StaticResource t_testViewSource}">
        <Grid.RowDefinitions>
            <RowDefinition Height="0.895*"/>
            <RowDefinition Height="0.105*"/>
        </Grid.RowDefinitions>
        <telerik:RadGridView ItemsSource="{Binding}" x:Name="grid1" AutoGenerateColumns="False" >
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding id}" Header="ID" UniqueName="IDColumn" IsVisible="False"/>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding NOTE}" Header="Note" UniqueName="NoteColumn" MinWidth="100" />
                <telerik:GridViewImageColumn DataMemberBinding="{Binding Picture}" Header="Picture" ImageStretch="Fill" MinWidth="100" UniqueName="PictureColumn" ImageWidth="100"/>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
        <telerik:RadButton Content="Save" Grid.Row="1" Height="23" Margin="0,15,32,0" Name="btSave" VerticalAlignment="Top" HorizontalAlignment="Right" Width="106" Click="btSave_Click" />
    </Grid>
</Window>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Telerik.Windows.Controls.GridView;
using Telerik.Windows.Controls;
using Telerik.Windows;

namespace TestProject
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.grid1.AddHandler(GridViewCellBase.CellDoubleClickEvent, new EventHandler<RadRoutedEventArgs>(OnCellDoubleClick), true);
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {

            TestProject.GoodsInStoreDataSet goodsInStoreDataSet = ((TestProject.GoodsInStoreDataSet)(this.FindResource("goodsInStoreDataSet")));
            TestProject.GoodsInStoreDataSetTableAdapters.t_testTableAdapter goodsInStoreDataSett_testTableAdapter = new TestProject.GoodsInStoreDataSetTableAdapters.t_testTableAdapter();
            goodsInStoreDataSett_testTableAdapter.Fill(goodsInStoreDataSet.t_test);
            System.Windows.Data.CollectionViewSource t_testViewSource = ((System.Windows.Data.CollectionViewSource)(this.FindResource("t_testViewSource")));
            t_testViewSource.View.MoveCurrentToFirst();
        }

        private void btSave_Click(object sender, RoutedEventArgs e)
        {
            TestProject.GoodsInStoreDataSet goodsInStoreDataSet = ((TestProject.GoodsInStoreDataSet)(this.FindResource("goodsInStoreDataSet")));
            TestProject.GoodsInStoreDataSetTableAdapters.t_testTableAdapter goodsInStoreDataSett_testTableAdapter = new TestProject.GoodsInStoreDataSetTableAdapters.t_testTableAdapter();
            goodsInStoreDataSett_testTableAdapter.Update(goodsInStoreDataSet.t_test);
        }

        private void OnCellDoubleClick(object sender, RadRoutedEventArgs args)
        {
            GridViewCellBase cell = args.OriginalSource as GridViewCellBase;
            if (cell != null && cell.Column.UniqueName == "PictureColumn")
            {
                Microsoft.Win32.OpenFileDialog dlg = new Microsoft.Win32.OpenFileDialog();
                dlg.DefaultExt = ".jpg";
                dlg.Filter = "Jpeg pictures (.jpg)|*.jpg";
                Nullable<bool> result = dlg.ShowDialog();

                if (result == true)
                {
                    string filename = dlg.FileName;
                    BitmapImage myBitmapImage = new BitmapImage();

                    myBitmapImage.BeginInit();
                    myBitmapImage.UriSource = new Uri(filename, UriKind.RelativeOrAbsolute);
                    myBitmapImage.EndInit();

                    grid1.CurrentCell.Value = myBitmapImage;
                }
            }
        }
    }
}

[Pavel Pavlov]

Hello Gosha,

To be able to attach the project , you will need to open a support ticket ( from within your account ) .
Please  mention the thread ID 363529 and I will take care of it .

Best wishes,
Pavel Pavlov
the Telerik team

[Гоша]

I found the solution:

Instead of doing :

rdGrid.CurrentCell.Value =  myBitmapImage;

private void OnCellDoubleClick(object sender, RadRoutedEventArgs args)
        {
            TestProject.GoodsInStoreDataSet dsGIS = ((TestProject.GoodsInStoreDataSet)(this.FindResource("goodsInStoreDataSet")));
            System.Windows.Data.CollectionViewSource t_testViewSource = ((System.Windows.Data.CollectionViewSource)(this.FindResource("t_testViewSource")));


            GridViewCellBase cell = args.OriginalSource as GridViewCellBase;
            if (cell != null && cell.Column.UniqueName == "PictureColumn")
            {
                Microsoft.Win32.OpenFileDialog dlg = new Microsoft.Win32.OpenFileDialog();
                dlg.DefaultExt = ".jpg";
                dlg.Filter = "Jpeg pictures (.jpg)|*.jpg";
                Nullable<bool> result = dlg.ShowDialog();

                if (result == true)
                {
                    string filename = dlg.FileName;
                    BitmapImage myBitmapImage = new BitmapImage();

                    myBitmapImage.BeginInit();
                    myBitmapImage.UriSource = new Uri(filename, UriKind.RelativeOrAbsolute);
                    myBitmapImage.EndInit();

                    dsGIS.t_test.Rows[t_testViewSource.View.CurrentPosition]["Picture"] = ConvertImage.ConvertImageSourceToByteArray(myBitmapImage);


                }
            }
        }

public static class ConvertImage
    {
        public static byte[] ConvertImageSourceToByteArray(this ImageSource image)
        {
            // Declare variables
            byte[] result = null;

            // Use a memory stream to convert
            using (MemoryStream memoryStream = new MemoryStream())
            {
                // Get right encoder
                JpegBitmapEncoder encoder = new JpegBitmapEncoder();

                // Get right frame
                if (image is BitmapSource)
                {
                    encoder.Frames.Add(BitmapFrame.Create((BitmapSource)image));
                }

                // Now set some encoder values
                encoder.QualityLevel = 100;
                encoder.Save(memoryStream);

                // Now convert
                result = memoryStream.ToArray();
            }

            // Return result
            return result;
        }
    }