ComboBoxColumn bound to DataView Performance Issue

4 posts, 0 answers
  1. Eric
    Eric avatar
    3 posts
    Member since:
    Dec 2011

    Posted 20 May 2015 Link to this post

    Hello,

     I am having a performance problem with the combobox column of the RadGridView control. When bound to small data, the combobox works great, but when the data is large (18000+ items), the combobox seems very slow, frozes for 2 seconds when i enter edit mode, don't change the item and leave the edit mode, and frozes for 5 seconds when i change the selected item and leave the edit mode. I cannot accept this user experience. Is there a way to improve this performance?

     I made a sample to show you the problem:

    P.S.: I have to generate the columns in the code behind, because they are dynamic.

    XAML:

    <Window x:Class="TelerikWpfApp1.MainWindow"
                    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
                    Title="MainWindow" Height="350" Width="525">
            <Grid>
                <telerik:RadGridView Name="gridView" Grid.Row="0" ColumnWidth="*" AutoGenerateColumns="False"
                                     SelectionMode="Extended" ScrollMode="Deferred" GroupRenderMode="Flat"/>
            </Grid>
    </Window>

     

    Code Behind (C#):

    using System;
    using System.Data;
    using System.Windows;
    using System.Windows.Data;
    using Telerik.Windows.Controls;

    namespace TelerikWpfApp1
    {
        /// <summary>
        /// Interaction logic for MainWindow.xaml
        /// </summary>
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
                InitializeGrid();
            }

            private void InitializeGrid()
            {
                this.gridView.BeginInit();
                this.gridView.Columns.Add(new GridViewSelectColumn());
                this.gridView.Columns.Add(new GridViewDataColumn()
                {
                    Header = "Order Id",
                    DataMemberBinding = new Binding("Id")
                });

                var comboColumn = new GridViewComboBoxColumn();
                comboColumn.Header = "Client";
                comboColumn.IsComboBoxEditable = true;
                comboColumn.SelectedValueMemberPath = "Id";
                comboColumn.DisplayMemberPath = "Name";
                comboColumn.ItemsSource = getClients();
                comboColumn.DataMemberBinding = new Binding("ClientId")
                {
                    Mode = BindingMode.TwoWay
                };

                var style = new Style(typeof(RadComboBox));
                style.Setters.Add(new Setter(RadComboBox.TextSearchModeProperty,
                                                         TextSearchMode.Contains));
                comboColumn.EditorStyle = style;

                this.gridView.Columns.Add(comboColumn);

                comboColumn = new GridViewComboBoxColumn();
                comboColumn.Header = "Product";
                comboColumn.IsComboBoxEditable = true;
                comboColumn.SelectedValueMemberPath = "Id";
                comboColumn.DisplayMemberPath = "Name";
                comboColumn.ItemsSource = getProducts();
                comboColumn.DataMemberBinding = new Binding("ProductId")
                {
                    Mode = BindingMode.TwoWay
                };

                style = new Style(typeof(RadComboBox));
                style.Setters.Add(new Setter(RadComboBox.TextSearchModeProperty,
                                                         TextSearchMode.Contains));
                comboColumn.EditorStyle = style;

                this.gridView.Columns.Add(comboColumn);

                this.gridView.ItemsSource = getOrders();
                this.gridView.EndInit();
            }

            private DataView getOrders()
            {
                var dt = new DataTable();

                dt.Columns.Add(new DataColumn()
                {
                    ColumnName = "Id",
                    DataType = typeof(string),
                    MaxLength = 10
                });

                dt.Columns.Add(new DataColumn()
                {
                    ColumnName = "ClientId",
                    DataType = typeof(string),
                    MaxLength = 10
                });

                dt.Columns.Add(new DataColumn()
                {
                    ColumnName = "ProductId",
                    DataType = typeof(string),
                    MaxLength = 10
                });

                dt.Rows.Add(1, 1, 17000);
                dt.Rows.Add(2, 2, 1892);

                return dt.DefaultView;
            }

            private DataView getClients()
            {
                var dt = new Model();

                dt.Rows.Add(1, "Walmart");
                dt.Rows.Add(2, "Coca-Cola Company");

                return dt.DefaultView;
            }

            private DataView getProducts()
            {
                var dt = new Model();

                for (int i = 0; i < 18000; i++)
                    dt.Rows.Add(i, "Name " + i);

                return dt.DefaultView;
            }
        }
    }

     

    Model Class:

    using System;
    using System.Data;

    namespace TelerikWpfApp1
    {
        public class Model : DataTable
        {
            public Model() : base()
            {
                this.Columns.Add(new DataColumn()
                {
                    ColumnName = "Id",
                    DataType = typeof(string),
                    MaxLength = 10
                });

                this.Columns.Add(new DataColumn()
                {
                    ColumnName = "Name",
                    DataType = typeof(string),
                    MaxLength = 100
                });
            }
        }
    }

  2. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 21 May 2015 Link to this post

    Hello,

    You can find the following sdk example Lightweight GridViewComboBoxColumn in github. This example demonstrates how to configure lightweight GridViewComboBoxColumn with validation, it mainly increases the scrolling performance though.
    Please note you can download and benefit from SDK Samples Browser as described in the documentation.

    You can also check our online documentation on defining CellTemplate/CellEditTemplate for a reference on how to configure GridViewColumn with any view mode/editor you would like to.

    Regards,
    Dimitrina
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Eric
    Eric avatar
    3 posts
    Member since:
    Dec 2011

    Posted 22 May 2015 in reply to Dimitrina Link to this post

    Hi Dimitrina,

    The example you provided doesn't fit my needs. I think you didn't test my sample. I will open a support ticket, explaining all the situation. But anyway, thanks for the reply.

  4. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 22 May 2015 Link to this post

    Hello,

    Thank you, you can attach the demo solution in the support ticket.

    Regards,
    Dimitrina
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top