TabControl Command Button Command Binding not working correctly

[Titus]

I am trying to use Command Binding to dynamically add tabs to the control. I followed the demo sample (http://demos.telerik.com/silverlight/#TabControl/Databinding). However, the command binding for the Add and Remove buttons don't work always. The problem is with the InvalidateCanExecute call. The button state is not changing properly. Initially it works, then once the button is disabled, then the re-enable logic doesn't seem to work always. When I stepped through the code, I found that the CanExecuteChangeHandler is lost (initially the handler count is 1 and when the issue shows up, the handler count drops to 0).

I checked your online sample. Unfortunately, the sample also exhibits the same problem. It doesn't always exhibit the issue. After quite a few clicks (like Keep Adding tabs till Add is disabled in all the tabs except the first one (the first tab's Add button never gets disabled), click remove a few times, then add, etc...) the issue shows itself.

I tried to find a definite sequence of clicks that would always reproduce the issue, but couldn't. However, the issue eventually happens. Sometimes sooner, sometimes later.

Here is the sequence I used to reproduce (not consistent/definite number of steps though):
1. Click on the Add button of the first tab till the max allowed (disabling the add button from all tabs except the first)
2. Click on the disabled Add buttons of the tabs one by one starting from the last to the first
3. Click on the delete button of the second tab repeatedly, deleting all the tabs except the first
4. Repeat steps 1 to 3 a few times
5. Perform step 1
6. Perform step 2
7. Click on the Add button of the second tab a few times
8. Click on the Add button of the first tab a few times
9. Click on the Add button of the second tab a few times
10. Click the delete button of the second tab once
11. You will see that the add buttons are not re-enabled for all the tabs

I don't believe the sequence has anything to do with the issue. I belive, the CanExecuteChangeHandler gets lost eventually, causing the controls not to change state.

I am evaluating the RadControls for an upcoming project. The UI needs nested tab controls and the dynamic addition of tabs. Your demo kind of reflected what I needed.

Any help would be appreciated..

Thanks

[Tina Stancheva]

Hello Titus,

Thank you for your detailed report. The issue is caused by the Button controls used in the RadTabControl.ItemTemplate. If you change the Buttons with RadButtons the example will work as expected.

We will updated it accordingly. In the meantime I attached the updated example to this thread. Also, I added 1000 points to your Telerik account as a small sign of our appreciation for bringing this issue to our attention.

All the best,
Tina Stancheva
the Telerik team

[prabhu.m]

nice post,
am new to silverlight, can u please explain how to bind the data (Using XAML or the code behind ) in the above tab example.

[Tina Stancheva]

Hi Prabhu,

In the attached sample the RadTabControl is databound to a collection of only one object. Then the ItemTemplate and ContentTemplate properties of the RadTabControl are used to define the TabItems Header and Content. In the ItemTemplate a RadButton is defined to allow the users to dynamically add new items in the RadTabControl.ItemsSource collection.

You can find more info about binding the RadTabControl to a collection of objects here.

Basically when you databind the control, you need to set its ItemsSource collection. Then since this collection should be set to a collection of business items, you will need to define some visual elements to display the business data. The RadTabControl expose a few properties for that purpose:

• DisplayMemberPath - allows you to set the name of the business property that will be used as a Header for each RadTabItem
• ItemTemplate - allows you to define a DataTemplate to further customize the look of the RadTabItem.Header
• ContentTemplate - allows you to define a DataTemplate to customize the look/display of the RadTabItem.Content

You can find more RadTabControl Template properties here.

I hope that information will help you. Please let us know if we can further assist you.

All the best,
Tina Stancheva
the Telerik team