Ultimate Treeview Control User Guide

This guide will show you how to use and take advantage of the features of the VB LightSwitch Treeview control.  General use and each feature will be presented as a tutorial.

First we’ll go over the basics.

Installing the Treeview Control

To install the control into your environment, unzip the file you downloaded and double-click the file named VBLSTreeviewControl.vsix.

This will install the control and allow LightSwitch to find it.  You should have LightSwitch and Visual Studio closed when performing the above step.  You must open a fresh instance of LightSwitch after you have installed the extension.

Enabling the Treeview Control in Your LightSwitch Project

After installing the control following the above procedure, open a new or existing LightSwitch project.  For the purposes of this tutorial, we will create a new project named TestVBLSTreeviewControl.

Double-click on the Properties of the project.  This will open the Properties designer of the project where you should select the Extensions tab on the left side of the window.

Depending on what other LightSwitch Controls you have installed, your list of extensions will vary.  You should see the VBLSTreeviewControl in the list.  Check the checkbox to the left of the control name.  That’s all there is to it.  You are ready to use the control.

Adding a Data Source

Now we need to add a hierarchical data source.  Right-click on the Data Sources folder in the Solution Explorer window and select Add Table.  Name the table Product Category and add two string fields named Name and Description to the table. 

Next, in the strip above the table, select Add Relationship.  In the dropdown under To, select Product Category for Name and Zero or One for Mulitplicity as in the screenshot below.

Next, we will name the two ends or Navigation Properties of the relationship.  Rename the singular navigation property (ProductCategory1) to Parent.  Rename the plural navigation property (ProductCategories) to Children.  The Add New Relationship dialog should look like the following:

And the table definition will look like the following:

Adding a Screen

Now that we have a hierarchical data source, we can add a screen to our project.  Right-click on the Screens folder in Solution Explorer and select Add Screen.  In the Add New Screen Dialog, select a List and Details Screen for the Screen Template and ProductCategories for the Screen Data.

Press OK to generate the screen. 

Adding the Treeview Control to the Screen

When the screen designer first opens after creating the screen, it should look like this:

Notice that the default List control is being used to display the collection of Product Categories.  Click on the dropdown arrow to the right of the List and select the Treeview.

If the Properties window is not visible, press F4 or Select View….Properties Window from the main menu.  The properties of the Treeview should be displayed in the window.  Notice the default values for some of the properties are set.  Parent Property Path to Parent, Children Property Path to Children and Display Member Name to Name.  When dealing with existing data that you did not define, you may need to change these properties to the names of the correct fields in the data you are using.  Since we defined our own data table and named the fields correctly, the default field names will work for us.

You may want to scroll down and review the rest of the Properties.

Running the Test Application

 Now you can run the project and see the Treeview in action.  The application will look like the following.

Notice the command buttons underneath the control.  These are generated by LightSwitch and can be removed since we have the built-in command buttons in the control.  Select the Design Screen button in the upper right corner of the Application Ribbon and you will go into Design Mode as follows:

Open the Command Bar element under the Treeview Control to expose the Command Buttons.

Press the Delete Key for each of the three buttons and then press Save in the upper right corner of the Design Panel.  Now your application should look like:

Notice the buttons above the control.  The first button (a green plus sign) is used to add an item to the Treeview at the same level as the selected item, or if no item is selected, to the root of the tree. 

The second button (a hierarchy with a plus sign) is used to add a child element to the selected element.  Note that it is grayed out because no item is currently selected.

The third button (a pencil) is used to place the selected item into edit mode.  It too is grayed out.

The fourth and final button is an “X” that is used to delete the currently selected item.  It is grayed out as well.

Try pressing the Add Item button on the left.  A new item is added to the root of the tree.

Also, notice that the three buttons that were disabled before are now enabled since the new item is automatically selected.

Try editing the name of the New Item.  This can be done by changing the name in the details panel to the right of the control, or by double clicking the item in the Treeview and editing it in-place.  When done editing, press the Return or Enter key and the name will be updated.

To save changes, press the Save button in the upper left of the Application Ribbon. 

Now try adding a child element.  Press the second button from the left in the control’s command bar that looks like a hierarchy.  A new element will be added below the selected one.  The new element will be selected and the screen should look something like the following:

You should be able to add, edit and delete elements in the tree as you wish.  Go ahead and experiment a little on your own.  For the sample, I’ve begun a Bicycle Product Hierarchy as below:

Update: Turn Data Paging Off

If you expect to have more items in the tree than the paging size, you need to turn data paging off.  To do this, select the collection that is the item source for the tree (ProductCategories in our case) and in the properties window, uncheck the box named Supports Paging.   Otherwise, the tree will only load the first page of data.

Deleting Child Elements

UPDATE: A new property has been added to allow automatic deletion of children.  Delete Child Items

Checking “Delete Child Items” will automatically delete children of a deleted Parent item.  If you do not want this behavior, just leave that option unchecked.

Using the Basic Treeview Properties

Up until this point, we have been able to do quite a bit using all default settings.  Now we will see the effect of changing some of the basic settings in the Properties Window. 

Tool Tip, New Item and Auto Edit Properties

Open the Screen Designer and select the Treeview control.  In the Properties window, scroll down to ToolTip Member Path and select Description from the drop-down.  Notice you can select any property from the element type in the collection (Product Category in our case). 

Just below the ToolTip Member Path, change the New Item Name to New Category.  This will give the user of your application a better idea of what they should be entering as values.

Finally, scroll down further and check the Auto Edit New Item checkbox.  This will place a newly added item into edit mode and allow the user to type a new name immediately after adding a new item.  Your designer screen should look something like the following:

Now run the application and notice how the control behavior has changed.  Add a new item at the root level by pressing the Plus sign button.  Notice that this adds a new item named New Category and places it in edit mode automatically.

You can type a new value without touching the mouse.  This makes for more rapid and easy entry of new items.  Try naming this category Bicycle Parts.

Now enter a brief description for Bicycle Parts in the details pane to the right of the control.  Press enter after you do this or select the name field.  This will update the description field in the database. 

Next, hover over the new item and you will notice that the Description is displayed as a ToolTip.

Drag and Drop

Now let’s try out the Drag and Drop features of the control.  Start by selecting any child element.  In our case we selected Girl’s Mountain Bikes.  Notice that the Parent field in the details pane of the application shows that Girl’s Mountain Bikes parent is Girl’s Bikes.  Hold down the left mouse button and drag the item to any item other than its parent.  In our case, we’ll drag it to Bicycle Parts. 

Then release the left mouse button, dropping the item on the newly selected parent.  The application will now look something like this:

Notice that Girl’s Mountain Bikes now shows up in the Treeview as a child of Bicycle Parts and Parent property in the Details Pane also shows Bicycle Parts.  The Drag and Drop worked.

If you want an item to become a root element in the tree (no Parent) then simply drag it to a blank area in the Treeview.  It will then show up at the root level and its Parent property will be set to Nothing.

Try saving the data and then select Refresh.  This will save the changes to the database and then Refresh the Screen data.  Notice that our changes were saved and the relationships display correctly.

Close the application and we’ll try out some other settings for our Treeview.

Changing the Button Images

Scroll to the bottom of the Appearance Property Settings in the Properties window.  You will see four “Choose Image…” links, one for each of the command buttons.

Try choosing a new image for the Delete button.  An image import wizard will open and you can import any image you like.  You should select a 16X16 pixel image of type png or bmp. 

Press OK and you will notice that your new image name is listed next to the Delete Button Image: as Resources\delete.png or whatever your image name is.

Now run your application and you should notice that the X delete image has been replaced by your new image:

 

Read Only List

At times, you may want a read-only hierarchical list that allows users to make selections, but not to alter the contents of the tree.  To accomplish this, scroll to the bottom of the General settings in the Properties window and check the Read-Only List checkbox.

Run the application and you will notice that the command buttons have been removed.

You can still expand and collapse the hierarchy and select any of the items.  However, you are unable to Add, Edit or Delete items inside the Treeview.  The user can, however, edit the names in the Details pane to the right of the control because we did not make that text field read-only.  If you want your users to not be able to alter an item, set the fields in the detail pane to Read-Only.

 

Changing the Border Color and Width

Two properties in the Appearance section allow you to select a color for the border and set the width.  If you do not want the border to show, set the BorderWidth to 0.  For a color, select any of the colors in the drop-down for Border Color.  If you want the default color, leave that property set to <Enter Value>.

 

Using the Checkboxes

The check box feature of the Treeview is an advanced, and somewhat complicated, feature of the Treeview that allows you to display a checkbox next to one or more items in the Treeview.  You can respond to the checked or unchecked events to perform custom actions, or set the Treeview up to add or delete a relationship. 

 

Using Checkboxes to Add or Remove Relationships

First let’s take a look at the Many-to-Many relationships feature that allows your users to select an item from the Treeview and have it associated to another item.  Enabling this capability requires the creation of a Many-to-Many Join table in your database and the setting of some additional properties on the Treeview Control.

Setting up the Data

For our example, let’s assume we want to have Products that can be part of one or more categories.  Let’s add a Product table to our Data Sources:

Notice that we are not setting up a direct relationship to the ProductCategory table.  LightSwitch cannot handle a direct Many-to-Many relationship.  We will have to create a Join table named Product_ProductCategories instead:

Now we will set up a relationship from our Product_ProductCategory table to both the Product and ProductCategory tables.  For the Product table, the Wizard will look like:

We set the To side of the relationship to Product and changed the On Delete Behavior to Cascade so that if a Product is deleted, all its associated Product_ProductCategory entries will also be deleted.

Repeat this for the ProductCategory relationship:

Adding a Product Screen

For our example, we will add a Product List and Details Screen that will allow the user to add Products.  In the Details Pane of the screen, we’ll have a Treeview with our Product Categories and allow the user to assign each product to one or more Product Categories.

The initial Screen Designer will look like:

Notice the “Add Product_ProductCategories” entry in the SelectedItem of Products.  Click on that line and a collection of Product_ProductCategories will be added to the Screen’s Data Model.  This will contain only those records associated with the Selected Product.

Next we’ll need to add a list of all the Categories.  Select “Add Data Item…” at the top of the Designer and then select the “Query” radio button.

Select Product Categories and press OK.  This will add the full ProductCategory collection to our screen. 

We will want to display these in the Details Pane of our new Product Screen.  Select the Product Details Rows Layout element in the Visual Tree of the Screen Designer.  Drag the Product Categories collection from the Data pane over to the visual tree, just under the Description element.  The location is indicated by a light blue line.  See the screenshot below:

By Default, the collection is displayed as a DataGrid.  Change this to a Treeview.

Now let’s run the application to be sure our new screen works properly before we customize the Treeview.  Select the Products List Detail screen in the Tasks menu in the left pane of the application and your screen should look like the screenshot below.  Not exactly what we want, but it looks like it will work after a few edits.

Close the app and get back to the Screen Designer.

 

To avoid having to switch screens every time we run the application, let’s set our new screen to the default.  Double click on the Properties tab of our TestVBLSTreeviewControl application in the Solution Explorer window to expose the Application Properties Designer Window.

Select the Screen Navigation tab on the left and notice that the Product Categories List Detail Screen is bold.  That is because it is currently Set as the default Screen.

Select the Products List Detail screen under the Tasks folder and press the Set button at the bottom of the screen.  This will make our new screen the default screen for the application.

Setting Treeview Properties for Many-To-Many Relationships

Now open our Products List Detail Screen Designer again and select the Product Categories Treeview in the visual tree.  Scroll down to the bottom of the General Properties and check “Show CheckBoxes” and “Read-Only List”.

Now scroll up and select Product_ProductCategories from the drop-down for Target ManyToMany Collection Path.  If the name of the ManyToMany Collection on the source entity is the same as the target, you may leave it blank.  Otherwise, type in the name of the Source ManyToMany Collection Path.  Also, enter ProductCategory for Checked Target Item Property Name and Product for Checked Source Item Property Name.  Finally, select Products in the Many to Many Source Collection Name drop-down.  This will give the Treeview the information it needs to create and delete entries in the Join table.

Before we run the application again, let’s delete the Command Bar buttons that appear below our Treeview, as we did on the first screen.  Now run the application and our Products List Detail screen looks like:

Now add a product or two and set the category for one of them.

Now select the other product. 

Notice the problem we have.  The checkmarks are not refreshed.  Our Treeview control has no way of knowing when the selected Product is changed.  We will need to refresh our Product Category collection each time the selected Product changes, forcing the checkmarks to be updated.

Close the application and return to the Screen Designer.  Select the Products collection in the Screen’s Data Model and click on the “Write Code” dropdown in the upper right corner of the designer.  In the drop-down, select Products_SelectionChanged. 

This will open a code window for the method that is called any time the Products collection Selected Item is changed.  Add the one line of code shown in the screenshot below and it will refresh our Treeview each time the Product SelectedItem is changed.

The screen should now operate as expected!

Responding to Checkbox Checked and Unchecked Events

Instead of or in addition to setting up relationships when items are checked, you can define a method that will execute when an item is checked or unchecked.  Return to the Screen Designer and select our Treeview.  About halfway down the General properties you will notice three properties: Checked Method Name, Unchecked Method Name and Checked Item Property Name.  In order to respond to the checked and unchecked events, you will need to add a Method for each and a Property of the correct type (Product Category in our case).

First, lets add the two methods.  We’ll call them CategoryChecked and CategoryUnchecked.  Press Add Data Item and in the wizard, select the radio button for method and change the name to CategoryChecked.  Press OK and you’ll notice a new item in the Screen Data Model.

Repeat this for another method and call it CategoryUnchecked.  Your Screen Designer will look like:

Now we can add a new Property.  Click on Add Data Item again, but this time select the Local Property Radio Button.  In the Type drop-down, select Product Category.  (Notice that all our entity types along with the native data types are available.)  Name the Property CheckedProductCategory.

Now your screen should contain a new property:

Now right-click on the CategoryChecked method and select Edit Execute CodeA code window will open and we can write code that will execute whenever an item is checked.  As a demo, let’s open a message box with the name of the item that was checked.

Enter similar code for the unchecked method. 

Now we need to enter our methods and property into the Treeview.  Go to the Screen Designer, select the Treeview and set the three properties like:

Now let’s run the code and see what happens when we check or uncheck an item.  While this sample is very simplistic, you can see how this could be a very powerful capability.

Single Checkbox Option

If you want to limit your users to only being able to check a single item at a time, simply check the property Single Check in the General Properties. 

When an item is checked and the user checks another item, the original check is removed.  Run the application and try to check a second item in the list.

That should cover it.  Please use the control in your own project and let me know how it goes!

47 thoughts on “Ultimate Treeview Control User Guide

  1. Great control!

    Only a few questions:

    How I can modify BorderBrush (currently black)? I’m using the control with Cosmopolitan Shell and prefer to have LightGray Border (if any).

    And I have found one little problem: When I try to close an open node (with some subnodes) clicking the main node triangle, if I have a subnode selected, the application freezes.

    • jspassov,
      Thanks for your feedback. The control currently does not allow changing the border, but I will look into adding that feature. I will also see if I can reproduce your problem with the nodes and get a fix out. I’ll post the results as soon as I have something.
      Thanks,
      Dave

      • I was able to find and fix the bug and you should be able to close a parent node when its child is selected.
        I also add two properties, Border Color and Border Width, that allow flexibility in setting the Border Color and Width. If you want no border, just set Width to 0.

        Keep the feedback coming.

        Thanks,
        Dave

  2. Hello! I managed to implement your example and it worked. However, when i repeated the same steps for a table from a sql server 2008 r2 database imported as datasource, i received the following error when i tried to add a node:
    “An error occurred while running the screen. You can close the screen or ignore the error and continue using the screen.
    Error details: Object reference not set to an instance of an object.”

    Am I missing something?

    • The treeview control adds a node by adding a record to the screen visualcollection and refreshing it. This should not be impacted by the source of the visual collection, unless it is read only.
      Have you tried adding records to the SQL Server DB from a List control or Data Grid control? If these work, then the Treeview should also work.

      Another possibility is the DisplayMemberPath is used set the display name for the node. By default, this is set to “Name”. If the SQL Server table does not have a value named “Name” then you must set DisplayMemberPath on the treeview in order for the Add to work properly.
      Finally, the ParentPropertyPath is used to set the Parent node of a child node. By default, this is set to “Parent”. Again, if the SQL Server table has a different name for the Parent relationship, this must also be set properly.

      Please let me know if this resolves your issue.

      Thanks,
      Dave

      • I created the same table(ProductCategories with Id INT, Name VARCHAR(50), Description VARCHAR(50)) from your example in Sql Server 2008 DB and then added the DB as a data source. The problem is that when I try to create the relationship in LS, I am required to select the fields that are shared, which is not illustrated in your example. I have yet to figure out how to build a “many to zero or one” relationship in the same table in sql server…

        • Ciudin,
          In LightSwitch, when the self-referencing relationship is set up, a field named “ProductCategory_ProductCategory” is created of the same type as the Id (Int in this case). Try adding such a field to your SQL DB and see if you can set that as the shared field. This field will be null when an item has no parent and will contain the parentId when it does have a parent.

          If you want to see the LightSwitch database, you should be able to open it in the Server Explorer. It is named ApplicationData by default and is in the /bin/Data directory.

          Please let me know if this helps.

  3. Great control and easy to setup and use.
    Coding in C#, the Single Check Option when checked does not remove the original check. Is there a work around for C#?

    Thanks
    Howard

    • Re problem experienced with Single Check Option not working was caused by my omitting selecting an entity from the Treeview Properties ‘Many-To-Many Source Collection Name’ dropdown. All working 100% in C#.

      Many thanks.
      Howard

  4. Good day!

    Sorry for the time that is going to be consumed on this, but I would be very appreciative if you could help us on a matter.

    We are trying to build a project, which cannot be attached to this post.

    WE NEED to be able to edit the code behind the “+” button !!! from the screen PDFViewerScreen when adding a element to the screen.

    What basically needs to be done is automatically inserting a field to the database once the button is being pushed…SO we need a bit more than what the graphical output creates (the visual actual tree).

    IS THERE ANY WAY we could edit the code behind the “+” button code and modify it? We know we can edit the code behind buttons like Add, Edit, Delete, but not that specific “+” button we need.

    I would have also attached a preview, but I seem not to be able to.

    Thank you so much!

    Warm Regards,
    Alex Anton

    • Are you trying to insert a value in a field? Generally in LightSwitch you would respond to the DataCollection.Changed event and if the Action is “Add”, perform whatever operation you are trying to perform. That is why even the native LightSwitch controls do raise events.

      If this will not work, then if you explain your scenario in a little more detail I might could come up with a solution. The only thing I can think of off-hand is to provide the ability to specify a screen method that will be called when the add button is pressed, similar to the Checked Method already implemented. However, this would result in identically the same result as responding to the DataCollection.Changed event described above.

      Thanks,
      Dave

  5. It’s possible to use the proprieties of read-only and checkbox simultaneously? In events of check and uncheck Is possible check others items programmatically? If yes! How?
    It’s possible iterate over all checked objects in collections?

    • Victor,
      Yes you can make the control read-only and use the checkboxes. That is a very common scenario as you may not want users to be able to change the selection list.
      Access to the checked items is through the data. You can iterate over the collection that is pointed to by the Check Choices Collection you specify in the control setup. (In the User’s Guide sample this would be the Product_ProductCategory table.) Each record in that collection will have a relationship to a source collection item and a target selection item. If you want to add or delete a checked item, you add or delete one of the many-to-many records in that same collection.

      See the Many-to-Many section of the User’s Guide to get more detail.

      Hope this helps.
      Dave

  6. Hi have an issue with the control when adding a record.
    If the column on the mssql-db is a computed column, it cannot be updated, right?!
    I have defined a computed column with a code and a description in the DB and like to used it as the “DisplayMemeberPath”.
    However the treeview control goes on the DB and wants to write to the db and fill the field, I assume?
    Now the error is thrown “An error occurred while running the screen. You can close the screen or ignore the error and continue using the screen. Error details: Property set method not found.”
    Any ideas how to get around that? Need to use in many cases the code and description as the “DisplayMemeberPath” which is always a computed column.
    Thanks in advance!
    Regards Beat

    • Beat,
      You are correct, computed columns are read-only.
      You can set the Treeview control to Read-Only and this will prevent the user from being able to edit the displayed field.

      Please let me know if I mis-interpreted your question.

      Thanks,
      Dave

  7. Hi Dave, thanks for quick reply!
    I did as you suggested. Have set to Read-Only and added my own event buttons to the screen. This seems to work fine for me.
    By the way you have done a nice job and thanks for your support!
    Beat

    • Freddy,
      Sounds like it may be something in the way the data tables are defined. If you could send me the table you are trying to load, or just a screenshot of the data definition, I may be able to troubleshoot it for you.

      Thanks,
      Dave

  8. Hello. I am trying to implement your TreeViewControl in C# for various reasons. The problem is that when I m trying to filter the root elements (in Convert(object value,….) in RootEntityCollectionValueConverter) I can t manage to find the right type to which I should cast the “value” parameter, which seems to be of Microsoft.Lightswitch.Framework.Client.VisualVollection type.
    While debugging, i have learned that although the “value” parameter holds all the entities in the table, when I try to do a “as” cast, the null value is returned.(I have tried to cast to List, List, VisualCollection, VisualCollection)
    So, my question is, is there a way to iterate through the entities in the “value” parameter to filter the parents, in C#?

    • Ciudi
      Thanks for your question. First, there should be no difference between using the treeview in C# vs VB.

      Are you trying to build a treeview from the code/instructions in the book using C# instead of VB?
      Thanks,
      Dave

  9. Yes, I am trying to build it in C# so I can add new features in the future, if required.

    While doing some research I found something related to IEnumerable(cast object parameter as IEnumerable), I shall try it first thing tomorrow, in hope that it will work.

    • Yes. You’ll see in the book that it should be cast to an IEnumerable(Of IEntityObject). While C# and VB have a few differences in how you accomplish some things in code, they both deal with the same objects in the same way, so you should be able to convert from the VB code to C# with few changes in any of the types being used.

  10. Hello Dave,

    your TreeView is really a nice control!
    But now I have a little problem with the Selected Item Property. In one case I have to do a refresh of the TreeView. I use a temp variable to save the SelectedItem but when I try to set the Selected Item in the Query_Loaded method it doesnt work. Do you have a solution for this?
    Thank you!

    • Are you setting the selected item on the visual collection? In LightSwitch the visual collection in the data pane of the screen designer is the correct place to set selected item. If you have a data collection of ProductCategories and want to set the selected item in the treeview to the 2nd element in the dataset, use the following line of code:

      ProductCategories.SelectedItem = ProductCategories(1)

      Of course, many other variations should work, the point is, set the selected item in the data, not on the control.

      If you are already trying to set the SelectedItem in the data, then it could be that your data refresh is bringing in new items and the saved item is no longer equivalent to the one you saved. If that is the case, you can override the Equals method in the data class and make the items equal if they are of the same type and have the same Id. Or you can change the Selected Item code to do a query based on ID first and set the Selected item to the item in the refreshed dataset where the ID equals the saved ID:

      ProductCategories.SelectedItem = (From p in ProductCategories where p.ID = SavedItem.ID select p).FirstOrDefault

      Hope this helps,
      Dave

      • Hello Dave,
        thank you for your response! Yes, I am setting the selected item on the visual collection like you did in your second example. When I debug the code I can see that the SelectedItem Property has the right content after changing it in code. Only if I set the SelectedItem for the first time it selects the right entry. It seems that the treeView does not update its View. Is that possible?

        Regards Anna

        • Anna,
          The treeview is not notified when the selectedItem property of the bound dataset is changed. However, if you do a refresh on the dataset:

          ProductCategories.SelectedItem = ProductCategories(1)
          ProductCategories.Refresh

          after you set the selectedItem, it should force the Treeview to show the newly selected item.
          Please let us know if this does the trick. I should have included it in my initial response…Sorry for the extra wait.

          Regards,
          Dave

  11. I set up Treeview as per the user guide and am experiencing an issue. When I navigate from an item newly assigned to a category via a check box to another item, the category assignment does not persist.

    Any suggestions you can offer would be appreciated.

    Thanks

    • In order for the checkbox to be checked when navigating from one Product to another, you need to refresh the ProductCategory data each time a new Product is selected as in the following snippet:

      Private Sub Products_SelectionChanged()
      ProductCategories.Refresh()
      End Sub

      The other possibility is that the user’s guide does not state to set the Many-To-Many Source Collection Name to Products. Be sure that you did this also.

      Please let me know if this does not resolve your problem.

      Thanks,
      Dave

      • I just logged in to let you know I solved the problem only to find that you you identified the issue already.

        It was precisely that the Many-To-Many Source Collection Name was not correctly specified.

        It was a good puzzle to figure out, but you might want to amend the manual so others don’t have to spin their wheels.

        Thanks for the prompt reply. Now that I am up and running with the control, I can see many applications for which it will be of great value.

        • Mei
          Hopefully you are the last one to have to discover this. The online user’s guide and the one that downloads with the product have both been updated.
          Thanks,
          Dave

  12. Dave,
    In further experimenting with the control, I have discovered some inconsistent behavior in how the tree-view displays in the List Detail screen using check boxes as the manual instructs. To recreate what I am seeing, do the following:

    Create three items: Item1, Item2 and Item3
    Create three tree-view groups that each have one subgroup:
    Group1/Subgroup1
    Group2/Subgroup2
    Group3/Subgroup3
    Using the check boxes, make the following assignments:
    Item1 to Subgroup1
    Item2 to Subgroup2
    Item3 to Subgroup3

    Now, highlight the first item in the list section of the List-Detail screen and hit the screen refresh button in the upper left hand corner and elect to save the changes. The tree-view display will behave in the following sequence as you cycle through highlighting each item in the list section.

    Item1 – Group1 expanded
    Item2 – Group2 expanded
    Item3 – Group2 and Group3 expanded
    Item1 – Group1 Group2 and Group3 expanded
    Item2 – Group1 Group2 and Group3 expanded
    Item3 – Group1 Group2 and Group3 expanded

    I am sure the inconsistent behavior of the tree-view display is benign, but an end-user may think an application incorporating the control is buggy. Am I doing something wrong that is causing this? Is there a fix? Maybe this is something that only occurs while running in debugging mode and disappears in a deployed application?

    Any thoughts?

  13. Hi, firstly thanks for a great control. I have a self-referencing collection that displays correctly, but when I add checkboxes, I get an “Object reference not set to an instance of an object” error for each root item in the tree. I get the same message when I expand a node for each child item. I’m using c# / VS2012. Any thoughts?

    • Dan,
      I suspect your problem is related to how you have the Many-to-Many relationship set up. This is the most complicated part of using the Treeview control.
      The most likely culprit is the spelling of the “CheckedTargetItemPropertyName” and the “CheckedSourceItePropertyName” (I think there’s a programmers principle that all string properties lead to problems.) Check these two property settings first.
      If that doesn’t resolve your issue, go through the entire section on setting up the Checkboxes in the User’s guide and see if you find something that doesn’t seem right. Use the online user’s guide here on the site as there is a remote possibility it has been updated since you received your user guide bundled with the control.

      Let me know if you find the issue.

      Thanks,
      Dave

  14. Hi Dave,

    Thanks for the quick reply. I’m afraid that I’m struggling with this. Would you mind taking a look at the following:- http://s24.postimg.org/8nogr7bsl/Product_Attribute_Tree.jpg
    http://s24.postimg.org/91psqsvw5/Properties.jpg

    This is the self-referencing entity (I made the relationship in Lightswitch), and the properties screen. I’ve tried adding Parent, Child and ProductAttributeTree in the Checked Source Item Property Name and Checked Target Item Property Name, but with no success. Could you tell me what I’m missing?

    thanks,

    Dan

    • Dan,
      The checkboxes are not meant to work with the self-referencing relationship. That only determines the hierarchy of the tree.

      Rather, the checkboxes work by defining which products are part of a product category, for example. In this case you will need to have 3 separate tables: ProductCategory, Product, and Product_ProductCategories. This last table is a join table that has the Product and ProductCategory of each relationship. (See the section on checkboxes in the user guide starting on about page 20)

      Using the example in the user guide, we set up a screen to view/edit each product. In the product detail section of the screen, we have a treeview displaying all the ProductCategories with checkboxes indicating one or more categories the displayed product belongs to. The following treeview property settings that your screenshot left blank would be filled as follows:

      Target Many To Many Collection Path: Product_ProductCategories (selectable with a drop-down)
      Checked Target Item Property Name: ProductCategory (Typed in as a string in the text field)
      Checked Source Item Property Name: Product (Typed in as a string in the text field)
      Many-To-Many Source Collection Name: Products (selectable with a drop-down)

      Hope this helps.
      Dave

  15. Hi,
    I found the checkbox ticks AlWAYS disappear after you switch your page and switch back again. And I checked the data in the database table, the table’s data is intact.It just can’t be shown.
    If needed ,I can email my application to you .And you can test it yourself.

    • Try refreshing the data collection that the treeview is bound to.
      If that does not resolve the issue, clean and zip your application and send to me and I’ll have a look. Let me know what version of Visual Studio you are using.
      Dave

Leave a Reply