a complete source code for GridView commands demo

[Johnny]

Hi,

I am developing a gridview application in silverlight that functions almost exactly as the commands demo posted in Telerik website. The application will have a button that allows user to add row and delete row inside GridView. However, I am having a difficult time to program the application that contains a few empty textbox column to allow users to type in either number quantity or a string of text. Since I am very new to silverlight development, I am very confused with which gridview item I should be using as my textfile. I saw that there is a GridViewTextBoxColumn from your website http://www.telerik.com/help/winforms/gridview-columns-gridviewtextboxcolumn.html. I think this is not a support for silverlight development because I cannot use GridViewTextBoxColumn in XAML code. I am currently use GridViewDataColumn for those columns that I want them to be a text fields. I am not sure if I am doing it correctly but my problem is that when I run my application, i can click on those text fields to start inputting some string or number, however, those input would not stay there if I click other columns. I have been looking around for answers but there is no luck to find what I want.

The commands demo for GridView in Silverlight has exactly what I wanted. It has button that let users to add or delete row, and on top of that, the empty added row allows me to input text or number. I would like to use this example as the base to develop my application. However, the code for this example is very minimum. I wonder if Telerik can post the source code for the commands demo for GridView or post a similar project source code to the commands demo. Thank you so much. 

[Maya]

Hello Johny,

Firstly, I would recommend you to run through our online documentation and demos for RadControls for Silverlight. Considering your exact problem at the moment, you could pay attention to the Columns section where you can find information about how to define those columns, set their bindings properly and what are the built-in types. Furthermore, if you decide on customizing a particular column, you can set its CellTemplate/ CellEditTemplate. Once you bind the columns properly, this binding will take care for updating the underlying property and its value.
Considering the Commands demo, you find the example in your local copy of the demos and get the whole source code. You can also run through our documentation as well.

All the best,
Maya
the Telerik team

[Johnny]

Hi

Thank you for the reply. I read the documents and have a better understanding of it. However, I am still confused about the TextBlock and TextBox properties. I read the source code from a telerik online demo, and there is one data column that has both TextBlock and TextBox properties. I tried to follow the sample source code and copied the exact same code to my web app for testing. but I have the following error: "Unable to cast object of type 'Telerik.Windows.Controls.GridViewDataColumn' to type 'Telerik.Windows.Controls.GridViewComboBoxColumn'." 

Here is a piece of XAML code I copied from the telerik GridView demo:               
                  <telerik:GridViewDataColumn Header="Name"
                        DataMemberBinding="{Binding Name, Mode=TwoWay}" Width="*">
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Name}" />
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>
                    <telerik:GridViewDataColumn.CellEditTemplate>
                        <DataTemplate>
                            <TextBox Text="{Binding Name, Mode=TwoWay}"  />
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellEditTemplate>
                </telerik:GridViewDataColumn>

In my web app, I can only edit the column if I set a TextBox inside the CellTemplate section. However, if I put the TextBox inside CellEditTemplate section, the input text wouldn't stay there.

Here is the XAML code for my web app that can allows me to input text for the column.
                            <telerik:GridViewDataColumn DataMemberBinding="{Binding ItemDescription}" Header="Item Description" TextAlignment="Center" >
                                <telerik:GridViewColumn.CellTemplate>
                                    <DataTemplate>
                                        <TextBox Text="{Binding ItemDescription, Mode=TwoWay}" TextWrapping="Wrap" Width="150" MinWidth="150" Opacity="10" BorderBrush="Transparent" Background="Transparent" OpacityMask="White" />
                                    </DataTemplate>
                                </telerik:GridViewColumn.CellTemplate>
                            </telerik:GridViewDataColumn>

Here is the c# code to set and get the column:
 public class TextBoxes : INotifyPropertyChanged
   {
       private string itemDescription;
       public string ItemDescription  
       {
           get
           {
           return this.ItemDescription;  
           }
           set
           {
               this.ItemDescription = value;
               this.OnPropertyChanged("ItemDescription");
           }
       }
   #region INotifyPropertyChanged Members

       public event PropertyChangedEventHandler PropertyChanged;

       private void OnPropertyChanged(string propertyName)
       {
           if (this.PropertyChanged != null)
           {
               this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
           }
       }

       #endregion
}

Can you please tell me where I get it wrong and how does the TextBlock and TextBox works in general?

[Maya]

Hello Johnny,

 Actually, the behavior you described is quite an unexpected one in case everything is defined properly. Could you take a look at the sample attached and let me know whether you can get the same issues on it ? Where do you work with GridViewComboBoxColumn so that you get invalid cast exception ? Am I missing something in the sample project compared to your scenario ?

Regards,
Maya
the Telerik team

[Johnny]

Hi,

I tried to complie the example project but it doesn't work. While I tried to complie the project, it gives me the following error:
"The type or namespace name 'RadGridView' could not be found (are you missing a using directive or an assembly reference?)"
The error occured in both line 40 and 55 of the MainPage.g.i.cs file. In addition to that, the xaml file wouldn't load the user interface. It seems like there is a reference file missing. Can you please take a look at the example project you gave me and see if you can duplicate the error I have? Thanks.

[Johnny]

hi,

I still haven't able to figure out the problem of where I get the cast error, but since I still have other columns to play with, I can igore adding more columns for now. Seems like the casting problem only exists when I try to add more columns into my Grid, but for those existing data columns, I can complie the add TextBlock and TextBox into CellTemplate and CellEditTemplte, respectively, without any compiling errors. However, input text only stays inside the textbox if I put the textbox inside CellTemplate section, instead of the cellEditTemplte, which I think it is the proper wayt to do it. Anyways, I have the following xaml code for one of my input text column inside my GridView: 

<

telerik:GridViewDataColumn DataMemberBinding="{Binding Quantity}" Header="Design Quantity" TextAlignment="Center" IsResizable="False">

<telerik:GridViewColumn.CellTemplate>

<DataTemplate>

<TextBlock Text="{Binding Quantity, Mode=TwoWay}" />

</DataTemplate>

</telerik:GridViewColumn.CellTemplate>

<telerik:GridViewColumn.CellEditTemplate>

 <DataTemplate>

 <TextBox Text="{Binding Quantity, Mode=TwoWay}"/>

</DataTemplate>

</telerik:GridViewColumn.CellEditTemplate>

</telerik:GridViewDataColumn>

I have the following c# code to control the above xaml grid code:

public

 

 

class TextBoxes : INotifyPropertyChanged
{
    private string quantity; 
    public string Quantity; 

    {

     get

    {

    return this.quantity;

    }

    set

     {

     this.quantity = value;

     this.OnPropertyChanged("Quantity");

    }

    }

    #region

INotifyPropertyChanged Members 
    public event PropertyChangedEventHandler PropertyChanged; 
    private void OnPropertyChanged(string propertyName)  

    {

    if (this.PropertyChanged != null)

    {

    this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

    }

    }
#endregion

}

My intention is just setting up an empty column and lets user input the number of items they want into the GridView. But seems like the problem is harder than I thought.  Although the attached project you sent last time wasn't able to compile, I had tried to copy and tailor the code to fit my project, but I still can't able to make my gridview working. Since I have never done programming in c# in the .NET environment before, and I have very little time to tackle down this problem, Can you please to give me some advise on how to make that column work in the GridView?

Thanks!

[Maya]

Hi Johny,

I have retested the sample I previously attached, but everything works correctly on my side. Could you try to remove the references to Telerik assemblies in it, Clean the project, add references to the binaries you have and rebuild it ? Do you get the same errors as before ?
Nevertheless, if you cannot manage to run the application I previously attached, could you try to create one of your own that illustrates exactly your scenario ? Generally, I can see no errors in the snippets you provided, so I am not able to help any further unless having a sample reproducing the behavior. I will be glad to debug your sample application and suggest a solution. 

Kind regards,
Maya
the Telerik team

[Johnny]

Hi,

Thank you so much for the example project, I got a lot out of it. However, I still have difficulty to emerge your example project to my web app. Therefore I crated a brand new project in VS and hopefully you can give me some advice. My grid was built on the modification from your example project. My project has two tabs, and the first tab contains a grid with four columns. Those four columns are one text column, one integer column, and two combo box columns. And those combo boxes are interacting with each other. For example, one combo box column contains the name of different continents and the second combo box column contains name for different countries. Therefore, if a user wants to select Japan as the name of the county, he has to first select Asia as the continent.

So far I have get the string and integer columns work but I still have difficulty to get the combo boxes work. Based on your example project, I understand that you have pass the string and integer together to a method in club class called club() and retreat the information with the method of GetClubs(). However, how can I pass the information from combo box in it?  I would like to attach my project for you but seems like the forums is limited to image files. Therefore, I just post my code here and hopefully you can crate a project based from them and you can give me some advise how I can incorporate the two combo boxes with other columns. I have five files for my project. There are location.cs, club.cs, MyViewModel.cs, MainPage.xaml.cs, and MainPage.xaml. Please take a look and give me some advise how i can get my grid works.

Thanks.

@ Club.cs
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;
using System.Collections.Generic;
using System.ComponentModel;
namespace GridViewExampleProject
{
    public class Club : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        private string name;
        private int stadiumCapacity;
        private string continentCode;
        private int? countryID;

        public string Name
        {
            get { return this.name; }
            set
            {
                if (value != this.name)
                {
                    this.name = value;
                    this.OnPropertyChanged("Name");
                }
            }
        }

        public int StadiumCapacity
        {
            get { return this.stadiumCapacity; }
            set
            {
                if (value != this.stadiumCapacity)
                {
                    this.stadiumCapacity = value;
                    this.OnPropertyChanged("StadiumCapacity");
                }
            }
        }

        public string ContinentCode
        {
            get
            {
                return this.continentCode;
            }
            set
            {
                if (value != this.continentCode)
                {
                    this.continentCode = value;
                    this.OnPropertyChanged("ContinentCode");
                    this.CountryID = null;
                }
            }
        }

        public int? CountryID
        {
            get
            {
                return this.countryID;
            }
            set
            {
                this.countryID = value;
                this.OnPropertyChanged("CountryID");
            }
        }

        

        public Club()
        {

        }

        public Club(string name, int stadiumCapacity )
        {
            this.name = name;
            this.stadiumCapacity = stadiumCapacity;
        }

        protected virtual void OnPropertyChanged(PropertyChangedEventArgs args)
        {
            PropertyChangedEventHandler handler = this.PropertyChanged;
            if (handler != null)
            {
                handler(this, args);
            }
        }

        private void OnPropertyChanged(string propertyName)
        {
            this.OnPropertyChanged(new PropertyChangedEventArgs(propertyName));
        }

        public override string ToString()
        {
            return this.Name;
        }
        
        public static ObservableCollection<Club> GetClubs()
        {
            ObservableCollection<Club> clubs = new ObservableCollection<Club>();
            Club club;

            // Empty Row
            club = new Club();
            clubs.Add(club);
            // Manchester Utd.
            club = new Club("Manchester Utd.", 76212);
            clubs.Add(club);

            return clubs;
        }

    }
}

@ Locations.cs
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.Generic;
namespace GridViewExampleProject
{
    public static class Locations
    {
        public static List<Country> Countries;
        public static List<Continent> Continents;

        static Locations()
        {
            Countries = new List<Country>();
            Continents = new List<Continent>();

            Continents.Add(new Continent() { Name = "North America", Code = "1" });
            Continents.Add(new Continent() { Name = "Asia", Code = "2" });
            

            Countries.Add(new Country() { Name = "United States", ContinentCode = "1", ID = 1 });
            Countries.Add(new Country() { Name = "Canada", ContinentCode = "1", ID = 2 });
            Countries.Add(new Country() { Name = "Mexico", ContinentCode = "1", ID = 3 });
            Countries.Add(new Country { Name = "Japan", ContinentCode = "2", ID = 4 });
            Countries.Add(new Country { Name = "Korea", ContinentCode = "2", ID = 5 });
            Countries.Add(new Country { Name = "Taiwan", ContinentCode = "2", ID = 6 });
        }
    }

    public class Continent
    {
        public string Code { get; set; }
        public string Name { get; set; }
    }

    public class Country
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public string ContinentCode { get; set; }
    }
}

@ MyViewModel.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Navigation;
using System.ComponentModel;
using System.Collections.ObjectModel;
using System.Xml;
using Telerik.Windows;
using Telerik.Windows.Controls.GridView;
using Telerik.Windows.Controls;
namespace GridViewExampleProject
{
    public class MyViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        private ObservableCollection<Club> clubs;
        private object selectedItem;

        public ObservableCollection<Club> Clubs
        {
            get
            {
                if (this.clubs == null)
                {
                    this.clubs = Club.GetClubs();
                }

                return this.clubs;
            }
        }

        public object SelectedItem
        {
            get { return this.selectedItem; }
            set
            {
                if (value != this.selectedItem)
                {
                    this.selectedItem = value;
                    this.OnPropertyChanged("SelectedItem");
                }
            }
        }

        protected virtual void OnPropertyChanged(PropertyChangedEventArgs args)
        {
            PropertyChangedEventHandler handler = this.PropertyChanged;
            if (handler != null)
            {
                handler(this, args);
            }
        }

        private void OnPropertyChanged(string propertyName)
        {
            this.OnPropertyChanged(new PropertyChangedEventArgs(propertyName));
        }

        private void initDropDowns()
        {
            List<Location> locations = new List<Location>();
            
            ((GridViewComboBoxColumn)this.ClubsGrid.Columns[4]).ItemsSource = Locations.Continents;
            this.ClubsGrid.ItemsSource = locations;
            this.AddHandler(RadComboBox.SelectionChangedEvent, new Telerik.Windows.Controls.SelectionChangedEventHandler(cbxItemType_PropertyChanged), false);
        }

        private void cbxItemType_PropertyChanged(object sender, RadRoutedEventArgs args)
        {
            RadComboBox comboBox = (RadComboBox)args.OriginalSource;

            if (comboBox.SelectedValue == null
                || comboBox.SelectedValuePath != "Code") // we take action only if the continent combo is changed
                return;

            Location location = comboBox.DataContext as Location;
            location.ContinentCode = (string)comboBox.SelectedValue;//we submit the value immediately rather than waiting the cell to lose focus.
        }

    }

    public class Location : INotifyPropertyChanged
    {

        private string continentCode;
        public string ContinentCode
        {
            get
            {
                return this.continentCode;
            }
            set
            {
                if (value != this.continentCode)
                {
                    this.continentCode = value;
                    this.OnPropertyChanged("ContinentCode");
                    this.CountryID = null;
                }
            }
        }
        private int? countryID;
        public int? CountryID
        {
            get
            {
                return this.countryID;
            }
            set
            {
                this.countryID = value;
                this.OnPropertyChanged("CountryID");
            }
        }

        public IEnumerable<Country> AvailableCountries
        {
            get
            {
                return from c in Locations.Countries
                       where c.ContinentCode == this.ContinentCode
                       select c;
            }
        }

        #region INotifyPropertyChanged Members

        public event PropertyChangedEventHandler PropertyChanged;

        private void OnPropertyChanged(string propertyName)
        {
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        #endregion
    }
}

@MainPage.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace GridViewExampleProject
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

@MainPage.xaml
<UserControl x:Class="GridViewExampleProject.MainPage"
        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"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
        xmlns:telerikGrid="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"
        xmlns:my="clr-namespace:GridViewExampleProject"
        mc:Ignorable="d" d:DesignWidth="668" d:DesignHeight="453">

    <UserControl.Resources>
        <my:MyViewModel x:Key="MyViewModel"/>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Width="668" Height="453" DataContext="{StaticResource MyViewModel}">
       <controls:TabControl Height="453"
                            HorizontalAlignment="Left"
                            Name="tabControl1"
                            VerticalAlignment="Top"
                            Width="668">
            <controls:TabItem Header="Tab 1"
                              Name="tabItem1">
                <Grid>
                    <telerik:RadGridView AutoGenerateColumns="False"
                                         Name="ClubsGrid"
                                         Width="662"
                                         ItemsSource="{Binding Clubs}">
                        <telerik:RadGridView.Columns>
                            
                            <!--First Column (Delete Row)-->
                            <telerik:GridViewColumn Width="50">
                                <telerik:GridViewColumn.CellTemplate>
                                    <DataTemplate>
                                        <telerik:RadButton Content="Delete"
                                                           Command="telerikGrid:RadGridViewCommands.Delete"
                                                           CommandParameter="{Binding}" />
                                    </DataTemplate>
                                </telerik:GridViewColumn.CellTemplate>
                            </telerik:GridViewColumn>
                            
                            <!--Second Column (String Column)-->
                            <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}"
                                                        Header="String Type"
                                                        Width="115">                                                        
                                <telerik:GridViewDataColumn.CellTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding Name, Mode=TwoWay}" />
                                    </DataTemplate>
                                </telerik:GridViewDataColumn.CellTemplate>
                                <telerik:GridViewDataColumn.CellEditTemplate>
                                    <DataTemplate>
                                        <TextBox Text="{Binding Name, Mode=TwoWay}" />
                                    </DataTemplate>
                                </telerik:GridViewDataColumn.CellEditTemplate>
                            </telerik:GridViewDataColumn>
                            
                            <!--Third Column (Integer Colum)-->
                            <telerik:GridViewDataColumn DataMemberBinding="{Binding StadiumCapacity}"
                                                        Header="Integer Type"
                                                        Width="115"
                                                        DataFormatString="{}{0:N0}">
                            </telerik:GridViewDataColumn>
                            
                            <!--Fourth Column (First Dropdown Column)-->
                            <telerik:GridViewComboBoxColumn DataMemberBinding="{Binding ContinentCode, Mode=TwoWay}"
                                                            Width="80"
                                                            Header="Continents"
                                                            DisplayMemberPath="Name"
                                                            SelectedValueMemberPath ="Code">
                            </telerik:GridViewComboBoxColumn>

                            <!--Fifth Column (Second Dropdown Column; value can only be selected after DropDown1)-->
                            <telerik:GridViewComboBoxColumn DataMemberBinding="{Binding CountryID}"
                                                            ItemsSourceBinding="{Binding AvailableCountries}"                                                             
                                                            Width="80"
                                                            Header="Countries"
                                                            DisplayMemberPath="Name"
                                                            SelectedValueMemberPath="ID">
                            </telerik:GridViewComboBoxColumn>

                        </telerik:RadGridView.Columns>                     
                    </telerik:RadGridView>
                    
                    <!--
                    <StackPanel Orientation="Horizontal"
                                HorizontalAlignment="Center"
                                Margin="444,0,62,383"
                                Width="150">
                        <telerik:RadButton Width="150"
                                           Content="Add new row"
                                           Command="telerikGrid:RadGridViewCommands.BeginInsert"
                                           CommandTarget="{Binding ElementName=RadGridView1}"
                                           Height="29" />
                    </StackPanel>
                    -->
                    
                </Grid>                               
            </controls:TabItem>   
           
            <!-- Let tab2 blank -->
            <controls:TabItem Header="Tab 2" Name="tabItem2">
            </controls:TabItem>

       </controls:TabControl>    
    </Grid>
</UserControl>

[Maya]

Hi Johnny,

Based on the code-snippets provided, I get the impression that you used this blog post for a reference. What are the exact troubles that you have with it - are you incapable of binding the columns properly ? Why do you reference your grid is the ViewModel (in initDropDonws() method) ? 
Nevertheless, you can attach a sample project by opening a new support ticket. 

All the best,
Maya
the Telerik team