I’m new to silverlight and I’m tasked with changing the datagrid TextColumns to autocomplete boxes. I thought this should be fairly simple but apparently it isn’t.
I’m able to bind the data from a list outside the datagrid but not from within.
I’ve been researching for two days now and everything I find seems to incorporate data from a database or is otherwise too complex for my newbie brain to figure out.
All I really need is a simple example and explanation of how to do this in a datagrid as opposed to regularly.
My code follows. It builds succesfully but does not work properly.
I’m sure this is a problem that many others must have come across.
I appreciate anyone’s input,
Thanks in advance.
d.
<UserControl xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" x:Class="AccordionAutoCompleteBox.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"
mc:Ignorable="d"
d:DesignHeight="680" d:DesignWidth="1240">
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel VerticalAlignment="Center">
<toolkit:AccordionItem x:Name="AccordionItem2" FontSize="12" Background="LightBlue" BorderBrush="Wheat" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsSelected="False" MaxHeight="400">
<sdk:DataGrid Name="AccordionGrid" ItemsSource="{Binding ExpData}" AutoGenerateColumns="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HeadersVisibility="All" BorderThickness="1" Margin="8" SelectionMode="Single" Canvas.ZIndex="-1" MaxHeight="360">
<sdk:DataGrid.Columns>
<sdk:DataGridTemplateColumn Header="Exp">
<sdk:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<sdk:AutoCompleteBox x:Name="AutoCompGrid" Text="{Binding Exp, Mode=TwoWay}" ItemsSource="{Binding Exp}" IsTextCompletionEnabled="True" />
</DataTemplate>
</sdk:DataGridTemplateColumn.CellTemplate>
</sdk:DataGridTemplateColumn>
<sdk:DataGridTextColumn Header="Exp" Binding="{Binding Exp}" IsReadOnly="False" />
<sdk:DataGridTextColumn Header="Desc" Binding="{Binding Desc}" IsReadOnly="False" />
<sdk:DataGridTextColumn Header="Prod" Binding="{Binding Prod}" IsReadOnly="False" />
<sdk:DataGridTextColumn Header="Source" Binding="{Binding Source}" IsReadOnly="False" />
<sdk:DataGridTextColumn Header="Start" Binding="{Binding Start}" IsReadOnly="False" />
<sdk:DataGridTextColumn Header="Reset" Binding="{Binding Reset}" IsReadOnly="False" />
<sdk:DataGridTextColumn Header="Amt" Binding="{Binding Amt}" IsReadOnly="False" />
</sdk:DataGrid.Columns>
</sdk:DataGrid>
</toolkit:AccordionItem>
<sdk:AutoCompleteBox x:Name="AutoCompGrid2" Text="{Binding Exp}" ItemsSource="{Binding Exp}" IsTextCompletionEnabled="False" />
</StackPanel>
</Grid>
And the code behind
namespace AccordionAutoCompleteBox
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
List<ExpData> myList = new List<ExpData>
{
new ExpData
{Exp = "cell 1",
Desc = "cell 2",
Prod = "cell 3",
Source = "cell 4",
Start = "cell 5",
Amt = "cell 6",
Reset = "cell 7"},
new ExpData
{Exp = "cell 8",
Desc = "cell 9",
Prod = "cell 10",
Source = "cell 11",
Start = "cell 12",
Amt = "cell 13",
Reset = "cell 14"}
};
AccordionGrid.ItemsSource = myList;
AutoCompGrid2.ItemsSource = myList;
this.AccordionItem2.Header = " Accordion Header ";
}
}
public class ExpData
{
public String Exp { get; set; }
public String Desc { get; set; }
public String Prod { get; set; }
public String Source { get; set; }
public String Start { get; set; }
public String Reset { get; set; }
public String Amt { get; set; }
public ExpData(String exp, string desc, string prod, string source, string start, String reset, String amt)
{
Exp = exp;
Desc = desc;
Prod = prod;
Source = source;
Start = start;
Reset = reset;
Amt = amt;
}
public override string ToString()
{
return Exp;
}
Your life would be a lot easier if you had a view model. 🙂 Quick example of using a ViewModel to solve this.
Then you would need to change your view:
And you can remove all your custom code from the code behind file.