none
datagrid and dataform binding trouble

    Question

  • May be this is a real stupid question, but somehow I cannot figure it out. Any help will be greatly appreciated.

    I am using a silverlight 3 application, I need to show some data into a silverlight grid from a database table. I won't be knowing the structure of the table at runtime. So what I am doing is, getting the dataset from the database, converting it into xml and trying to show the XML into the datagrid. I followed this example and it works great. I can show the xml into my datagrid. 

    But now I need to have a dataform where the selected row of the grid will be visible. All I need is a simple case of 

    dataform.currentItem = datagrid.selectedItem;

    but this code is obviously not working. How can I bind one row of my grid to the data form under this scenario? 

    Thanks 

    Monday, January 30, 2012 11:33 AM

Answers

  • Hi neel_09,

     

    But now I need to have a dataform where the selected row of the grid will be visible. All I need is a simple case of 

    dataform.currentItem = datagrid.selectedItem;

    but this code is obviously not working. How can I bind one row of my grid to the data form under this scenario? 

    In order to resolve your issue, we need to add a DataForm control in the page and bind it the _dataGrid as follows:

     <toolkit:DataForm Height="100" CurrentItem="{Binding ElementName=_dataGrid, Path=SelectedItem,Mode=TwoWay}" 
                   Margin="10,10,0,0" Name="dataForm1" AutoGenerateFields="False" VerticalAlignment="Top" Width="200" >

    Then, please create the DataField and and it to DataForm in the code behind.

    //** Add DataField to DataForm
                StackPanel sp = new StackPanel();
                dataForm1.Content = sp;
                foreach (string columnName in columnNames)
                {
                    _dataGrid.Columns.Add(CreateColumn(columnName));
                    DataField field = new DataField();
                    field.Label = columnName;
                    field.Content = CreateField(columnName);
                    sp.Children.Add(field);
                }
     //** Define binding for each field
            private TextBox CreateField(string property)
            {
                TextBox tb = new TextBox();
                Binding b = new Binding("Data");
                b.Converter = _rowIndexConverter;
                b.ConverterParameter = property;
                tb.SetBinding(TextBox.TextProperty, b);
                return tb;
            }

    In addition, I have uploaded it to the skydrive. Please download  and test it locally.

    Best wishes, 

    Wednesday, February 01, 2012 10:55 PM
  • Hi neel_09,

    Thank you for your response.

    I have checked the screenshots you provided. From the description of the issue, that means that there is something wrong about datafrom in the .xaml. Please check whether there are some spelling mistakes or Syntax errors at first. Then, I will paste the corresponding code, please compare it with yours and try to find the difference.

    <UserControl xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"  xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" 
        xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
        x:Class="SilverlightTable.PageTwo"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:local="clr-namespace:SilverlightTable"
        Width="300" Height="470"
        >
        
        <StackPanel x:Name="LayoutRoot" Background="White">
            <data:DataGrid Name="_dataGrid" AutoGenerateColumns="False"
                           IsReadOnly="False" Margin="5" Height="150" >           
            </data:DataGrid>
    
            
            <StackPanel Orientation="Horizontal">
                <Button Margin="5" Click="ButtonGridToXML_Click">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="DataGrid to XML"/>
                        <Image Source="down_arrow.png" Margin="8 0 0 0"/>
                    </StackPanel>
                </Button>
                <Button Margin="5" Click="ButtonXMLToGrid_Click">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="XML to DataGrid"/>
                        <Image Source="up_arrow.png"  Margin="8 0 0 0"/>       
                    </StackPanel>
                </Button>
                  </StackPanel>
            <toolkit:DataForm Height="100" CurrentItem="{Binding ElementName=_dataGrid, Path=SelectedItem,Mode=TwoWay}" 
                   Margin="10,10,0,0" Name="dataForm1" AutoGenerateFields="False" VerticalAlignment="Top" Width="200" >
                       </toolkit:DataForm>
    
            <TextBox Name="_xmlInput" Margin="5" Height="270" AcceptsReturn="True"
                     VerticalScrollBarVisibility="Visible" />
        </StackPanel>
    </UserControl>

    In addition, I would suggest you to comment out some unnecessarycodes and try to find what makes this issue.

    Best wishes,

    Friday, February 03, 2012 4:14 AM

All replies

  • please check below it might helps

    http://stackoverflow.com/questions/5042596/databinding-combobox-in-dataform-silverlight-using-mvvm-in-update

    or

    http://social.msdn.microsoft.com/Forums/en-US/silverlightarchieve/thread/cb5218ad-09ac-4bf4-a990-df8f601b1083#e1462188-b606-454e-b0d3-089912f1a936

    http://stackoverflow.com/questions/4591501/filterdescriptor-datagrid-and-dataform-problem

    Monday, January 30, 2012 12:31 PM
  • Thanks chrishokiee for the reply.

    I have seen the threads, I have tried to set the itemsource of the datagrid and the dataform to the same value. here is the code that this link uses to bind a xml block to a datagrid.

     private void XmlToGrid()
            {
                // clear the grid
                _dataGrid.ItemsSource = null;
                _dataGrid.Columns.Clear();
                ImageDataForm.ItemsSource = null;
                
                string xmlstr =
    @"<data>
    <columns>
    <column name=""Name""/>
    <column name=""Age""/>
    <column name=""Occupation""/>
    <column name=""Designation""/>
    <column name=""Paygrade""/>
    <column name=""ManagerName""/>
    <column name=""salary""/>
    </columns>
    <rows>
    <row>
    <cell>Bob</cell>
    <cell>45</cell>
    <cell>Vicar</cell>
    <cell>Manager</cell>
    <cell>Grade 4</cell>
    <cell>John</cell>
    <cell>40k</cell>
    </row>
    <row>
    <cell>Steph</cell>
    <cell>22</cell>
    <cell>Shop supervisor</cell>
    <cell>Analyst</cell>
    <cell>Grade 3</cell>
    <cell>Sam</cell>
    <cell>30k</cell>
    </row>
    <row>
    <cell>Frank</cell>
    <cell>27</cell>
    <cell>Engineer</cell>
    <cell>Manager</cell>
    <cell>Grade 4</cell>
    <cell>John</cell>
    <cell>40k</cell>
    </row>
    </rows>
    </data>";
    
                // grab the xml into a XDocument
                XDocument xmlDoc = XDocument.Parse(xmlstr);
    
                // find the columns
                List<string> columnNames = xmlDoc.Descendants("column")
                                                 .Attributes("name")
                                                 .Select(a => a.Value)
                                                 .ToList();
    
                // add them to the grid
                foreach (string columnName in columnNames)
                {
                    _dataGrid.Columns.Add(CreateColumn(columnName));
                }
    
                SortableCollectionView data = new SortableCollectionView();
    
                // add the rows
                var rows = xmlDoc.Descendants("row");
                foreach (var row in rows)
                {
                    Row rowData = new Row();
                    int index = 0;
                    var cells = row.Descendants("cell");
                    foreach (var cell in cells)
                    {
                        rowData[columnNames[index]] = cell.Value;
                        index++;
                    }
                    data.Add(rowData);
                }
    
                _dataGrid.ItemsSource = data;
                ImageDataForm.ItemsSource = _dataGrid.ItemsSource;
                // above line results in a stackoverflowexception on ICollectionView member
            }

    SortableCollectionView class uses an ObservableCollection<Row> and ICollectionView to add sorting to the datagrid. What I am doing wrong?

    Tuesday, January 31, 2012 3:36 AM
  • Hi neel_09,

     

    But now I need to have a dataform where the selected row of the grid will be visible. All I need is a simple case of 

    dataform.currentItem = datagrid.selectedItem;

    but this code is obviously not working. How can I bind one row of my grid to the data form under this scenario? 

    In order to resolve your issue, we need to add a DataForm control in the page and bind it the _dataGrid as follows:

     <toolkit:DataForm Height="100" CurrentItem="{Binding ElementName=_dataGrid, Path=SelectedItem,Mode=TwoWay}" 
                   Margin="10,10,0,0" Name="dataForm1" AutoGenerateFields="False" VerticalAlignment="Top" Width="200" >

    Then, please create the DataField and and it to DataForm in the code behind.

    //** Add DataField to DataForm
                StackPanel sp = new StackPanel();
                dataForm1.Content = sp;
                foreach (string columnName in columnNames)
                {
                    _dataGrid.Columns.Add(CreateColumn(columnName));
                    DataField field = new DataField();
                    field.Label = columnName;
                    field.Content = CreateField(columnName);
                    sp.Children.Add(field);
                }
     //** Define binding for each field
            private TextBox CreateField(string property)
            {
                TextBox tb = new TextBox();
                Binding b = new Binding("Data");
                b.Converter = _rowIndexConverter;
                b.ConverterParameter = property;
                tb.SetBinding(TextBox.TextProperty, b);
                return tb;
            }

    In addition, I have uploaded it to the skydrive. Please download  and test it locally.

    Best wishes, 

    Wednesday, February 01, 2012 10:55 PM
  • Hi Catherine,

    Thanks a ton for the reply. I can see how to use the dynamic data for itemsource of a dataform. I am using Silverlight 3 with VS 2008, I have downloaded the code  but cant run it for the versioning issues.

    I have however incorporated the changes in the codes, but I am facing a XAML Parse Exception which states:

    Invalid attribute value {Binding ElementName =_dataGrid, Path = SelectedItem, Mode=TwoWay} for property CurrentItem.
    
    

    Am I doing something wrong here?

     

    Edit:

    I have removed the binding statement from the xaml block and have put the plain old

    DataForm.CurrentItem = _dataGrid.SelectedItem; block in XmlToGrid(). it is working. thanks again for showing me how to create dataform textfields dynamically.

    Thursday, February 02, 2012 4:02 AM
  • Hi neel_09,

    can see how to use the dynamic data for itemsource of a dataform. I am using Silverlight 3 with VS 2008, I have downloaded the code  but cant run it for the versioning issues.

    In fact, I am using Silverlight 5 and VS2010 sp1. If you want to run the project I provided, I would suggest you to install VS 2010 and update it to sp1. Download it from the link below:
    http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=23691
    Then install Silverlight 5 as follows:
    1. Silverlight 5 SDK
    2. Silverlight Runtime
    3. Silverlight Developer Runtime
    4. Silverlight 5 Toolkit

    Invalid attribute value {Binding ElementName =_dataGrid, Path = SelectedItem, Mode=TwoWay} for property C

    It should work.  Please check whether you have added the corresponding reference in the .xaml as follows:

       xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"                                                                   
    

     If it doesn't work, please provide a screenshot.  That will help us to continue.

    Thursday, February 02, 2012 4:53 AM
  • Dear Catherine,

    Sorry for the late reply. I am using the reference you mentioned in the .xaml code.

    I have uploaded the screenshots in here

     

    Friday, February 03, 2012 3:22 AM
  • Hi neel_09,

    Thank you for your response.

    I have checked the screenshots you provided. From the description of the issue, that means that there is something wrong about datafrom in the .xaml. Please check whether there are some spelling mistakes or Syntax errors at first. Then, I will paste the corresponding code, please compare it with yours and try to find the difference.

    <UserControl xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"  xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" 
        xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
        x:Class="SilverlightTable.PageTwo"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:local="clr-namespace:SilverlightTable"
        Width="300" Height="470"
        >
        
        <StackPanel x:Name="LayoutRoot" Background="White">
            <data:DataGrid Name="_dataGrid" AutoGenerateColumns="False"
                           IsReadOnly="False" Margin="5" Height="150" >           
            </data:DataGrid>
    
            
            <StackPanel Orientation="Horizontal">
                <Button Margin="5" Click="ButtonGridToXML_Click">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="DataGrid to XML"/>
                        <Image Source="down_arrow.png" Margin="8 0 0 0"/>
                    </StackPanel>
                </Button>
                <Button Margin="5" Click="ButtonXMLToGrid_Click">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="XML to DataGrid"/>
                        <Image Source="up_arrow.png"  Margin="8 0 0 0"/>       
                    </StackPanel>
                </Button>
                  </StackPanel>
            <toolkit:DataForm Height="100" CurrentItem="{Binding ElementName=_dataGrid, Path=SelectedItem,Mode=TwoWay}" 
                   Margin="10,10,0,0" Name="dataForm1" AutoGenerateFields="False" VerticalAlignment="Top" Width="200" >
                       </toolkit:DataForm>
    
            <TextBox Name="_xmlInput" Margin="5" Height="270" AcceptsReturn="True"
                     VerticalScrollBarVisibility="Visible" />
        </StackPanel>
    </UserControl>

    In addition, I would suggest you to comment out some unnecessarycodes and try to find what makes this issue.

    Best wishes,

    Friday, February 03, 2012 4:14 AM
  • Dear Catherine,

    thanks a ton for your support, I have checked the syntax for any silly typo errors, have not found any. I will try to write a fresh solution and look to implement the binding you suggested.

    Thursday, February 09, 2012 6:47 AM