none
Silverlight treeview control in LightSwitch RRS feed

  • Question

  • I've created a custom Silverlight treeview control based on the examples in this forum and it works great.  I would like to capture the value of the node and change the content of the grid.  I put a MessageBox on the Silverlight.cs page and I am seeing the value but now I am not sure how to get that value to change the contents of the grid.  So far I am getting a Invalid argument 'name' noted in the silverlight.cs page.  Included below are the xaml, silverlight.cs, the screen, and the screen code.   Any assistance would be greatly appreciated.  I may be wrong in my approach too...

    <UserControl x:Class="SilverlightProject.SilverlightTreeControl"

        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:local="clr-namespace:SilverlightProject"   

        xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"

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

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

        mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400">

        <UserControl.Resources>

            <local:EntityCollectionValueConverter x:Key="EntityCollectionValueConverter" />

        </UserControl.Resources>

        <Grid x:Name="LayoutRoot" Background="White" >

            <StackPanel Orientation="Horizontal">

                <controls:TreeView Name="treeViewControl" ItemsSource="{Binding Screen.LtoLDataTree}" Width="300" MouseLeftButtonUp="treeViewControl_MouseLeftButtonUp" >

                    <controls:TreeView.ItemTemplate>

                        <winControls:HierarchicalDataTemplate ItemsSource="{Binding Converter={StaticResource EntityCollectionValueConverter}, ConverterParameter=LtoLData}">

                            <StackPanel Orientation="Horizontal">

                                                           

                                <TextBlock Text="{Binding Path=RelatedGroupName, Mode=TwoWay}"  Margin="5,0" />

                            </StackPanel>

                        </winControls:HierarchicalDataTemplate>

                    </controls:TreeView.ItemTemplate>

                    <sdk:TreeView.BorderBrush>

                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                            <GradientStop Color="#FF79F2F2" Offset="0" />

                            <GradientStop Color="#FFA8EFEF" Offset="0.352" />

                            <GradientStop Color="#FFECF9F9" Offset="0.754" />

                        </LinearGradientBrush>

                    </sdk:TreeView.BorderBrush>

                </controls:TreeView>

            </StackPanel>

        </Grid>

    </UserControl>

    Silverlight code:

    private void treeViewControl_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
            {
                MessageBox.Show(this.treeViewControl.SelectedValue.ToString());
               // treeViewControl.SelectedItemChanged += new RoutedPropertyChangedEventHandler<object>(treeViewControl_SelectedItemChanged);
    
                var SelectedValue = (sender as TreeView).SelectedValue;
                var objDataContext = (IContentItem)this.DataContext;
                
                var Screen = (Microsoft.LightSwitch.Client.IScreenObject)objDataContext.Screen;
    
                Screen.Details.Properties["CourseGroupID"].Value = SelectedValue;  //I get an Invalid argument 'name' here
                Screen.Details.Dispatcher.BeginInvoke(() =>
                {
                    Screen.Details.Methods["UpdateRefreshCourses"].CreateInvocation().Execute();
                });
               
            }
    

    Screen code:

    partial void UpdateRefreshCourses_Execute()
      {
        TechOpsCourses.SelectedItem.CourseGroupID = this.LtoLDataTree.SelectedItem.CourseGroupID;
     }
    

    Wednesday, July 11, 2012 4:45 PM

Answers

  • I don't check the Is Parameter checkbox as I need the screen to show when it loads.  Checking will cause the screen to show once a parameter is passed in.

    Alright, now everything is in place.  I just need to be able to change the Class list in the grid based on the Treeview node ID.  First I add code to the Silverlight cs page that captures the selected change event:

    public SilverlightTreeControl()
    {
      InitializeComponent();
    
      treeViewControl.SelectedItemChanged += new RoutedPropertyChangedEventHandler<object>(treeViewControl_SelectedItemChanged);
     }

    It calls treeViewControl_SelectedItemChanged

    private void treeViewControl_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
    {
      var objDataContext = (IContentItem)this.DataContext;
      var Screen = (Microsoft.LightSwitch.Client.IScreenObject)objDataContext.Screen;
    
      //assign new value to SelectedCourseID parameter
      Screen.Details.Properties["SelectedCourseID"].Value = Int32.Parse(e.NewValue.ToString());
    }
    

    The line that I have bolded is assigned a new value each time I click a new node and automatically refreshes the grid.

    Ok that's what I did and it works great.  I hope it's clear enough to be helpful.  Here's the final result, showing Safety level classes, if you're interested:

    Thanks

    Larry

    • Marked as answer by MerlinsBones Thursday, July 19, 2012 3:44 PM
    Thursday, July 19, 2012 3:44 PM

All replies

  • How about try to change the data that the Grid have binded to?

    OR

    Please refer to the thread below:

    http://forums.silverlight.net/p/242788/605753.aspx/1?Run+time+Change+Datagrid+specific+colomn+gridcell+background+property+

    For Datagrid , you can get the content of grid by :

    foreach (var rowItem in dataGrid1.ItemsSource) 
                    { 
                        FrameworkElement el = dataGrid1.Columns[3].GetCellContent(rowItem); 
                        if ((el as CheckBox).IsChecked.Equals(false)) 
                        { 
                            (el.Parent as DataGridCell).Background = new SolidColorBrush(Colors.Red); 
                        } 
                    } 
    

    • Marked as answer by Dino HeModerator Wednesday, July 18, 2012 2:42 AM
    • Unmarked as answer by MerlinsBones Wednesday, July 18, 2012 10:17 PM
    Friday, July 13, 2012 8:19 AM
    Moderator
  • I have resolved the issue I was having.  I can only add two images to a post, so I will break this up a little.  I want to include them to be as clear as possible :) The first part was creating a silverlight treeview with a self-referencing table.  Once that was built, I wanted to update the grid on the same screen based on the node ID.  The grid shows the courses that are available at that level in the hierarchy  I do not take credit for this since a great deal of the ideas come from Michael Washington and Karol Zadora.  I am posting the solution in case it helps someone else.  I am not a writer so I hope this is clear :)

    To start with I created an entity and imported my data into it from a spreadsheet. I then created a screen and set the root nodes for course categories and the child categories that belong to each one like it was done here:

    Silverlight Treeview control

    The main difference in my example is that a course category can exist both as a parent and child depending on where in the hierarchy you might be. For instance, TechOps -> Safety -> Ladder Handling...Safety can be both a parent and child.  Here is a screenshot of that grid.  btw - I set it to not visible after it is set up because I don't need to see that data.  Also, the last column to the left allows me to move a category under a new parent if needed.

    Import Grid

    The main level categories will be listed on the left, in this example I am using Technical Operations.  When I click on it, I set the initial valueof 60000001 which loads classes at the level:

    partial void TechnicalOperations_InitializeDataWorkspace(List<IDataService> saveChangesTo)
     {
      //set initial Technical Operations classes
      this.SelectedCourseID = 60000001;
     }    

    Here are the results:  

    continued....

    Thursday, July 19, 2012 3:43 PM
  • Next I added a data connection to a SQL view that pulls in all classes that are marked 'Child of' so I know which parent they belong to.  Then I added a grid to the screen to display the courses.  Great but now I need to be able to tell the grid which classes I want to show based on the category id when I click on a particular node.

    The first thing I needed to do was add a parameter.  You'll notice I set the RelatedCourseID to the CourseCategoryID so it sets the child as the new parent.

    Now I add a new variable to the screen and connect it to the RelatedCourseID:

    continued...

    Thursday, July 19, 2012 3:44 PM
  • I don't check the Is Parameter checkbox as I need the screen to show when it loads.  Checking will cause the screen to show once a parameter is passed in.

    Alright, now everything is in place.  I just need to be able to change the Class list in the grid based on the Treeview node ID.  First I add code to the Silverlight cs page that captures the selected change event:

    public SilverlightTreeControl()
    {
      InitializeComponent();
    
      treeViewControl.SelectedItemChanged += new RoutedPropertyChangedEventHandler<object>(treeViewControl_SelectedItemChanged);
     }

    It calls treeViewControl_SelectedItemChanged

    private void treeViewControl_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
    {
      var objDataContext = (IContentItem)this.DataContext;
      var Screen = (Microsoft.LightSwitch.Client.IScreenObject)objDataContext.Screen;
    
      //assign new value to SelectedCourseID parameter
      Screen.Details.Properties["SelectedCourseID"].Value = Int32.Parse(e.NewValue.ToString());
    }
    

    The line that I have bolded is assigned a new value each time I click a new node and automatically refreshes the grid.

    Ok that's what I did and it works great.  I hope it's clear enough to be helpful.  Here's the final result, showing Safety level classes, if you're interested:

    Thanks

    Larry

    • Marked as answer by MerlinsBones Thursday, July 19, 2012 3:44 PM
    Thursday, July 19, 2012 3:44 PM