This is a migrated thread and some comments may be shown as answers.

Expanding on button click in content template

4 Answers 161 Views
ExpanderControl
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Stuart
Top achievements
Rank 1
Stuart asked on 30 Oct 2013, 10:21 AM
Hi guys,

Having an issue where i have a some text and a button in my content template of my radexpander which is the inside the item template of a radjumplist.

Now when i click on the button i don't want the expander to open.

I have tried subscribing to the ExpandedStateChanging and then try pick up if the control clicked on in the content template was of type button, but unable to pick it up. Unfortunately there is no e.originalSource like there is on the jumplist group header item tap, unless i'm not checking correctly?

Also tried binding the isexpanded property in my model and setting that to false on the button click event , however the selected of the jumplist doesnt get set when clicking the button of the expander content.

any ideas for me to try to get it to not open when i click the button?

hope i explained it well enough.

4 Answers, 1 is accepted

Sort by
0
Deyan
Telerik team
answered on 01 Nov 2013, 04:33 PM
Hi Stuart,

Thanks for writing.

Can you please share the XAML setup here so that we try to reproduce the issue on our side and see how we can help?

Regards,
Deyan
Telerik
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
0
Stuart
Top achievements
Rank 1
answered on 05 Nov 2013, 02:17 PM
Hi Deyan,

Sure, here we go.

To state the blatantly obvious, you will need to change the bindings to a mock source and remove the caliburn micro references.

I've added the RadJumpList_SelectionChanged behind code below the xaml

<telerikData:RadJumpList
            Grid.Row="1"
            x:Name="RadJumpList"        
            ItemsSource="{Binding ToDos}"  
            GroupHeaderItemTap="RadJumpList_GroupHeaderItemTap"
            SelectionChanged="RadJumpList_SelectionChanged"
            >            
            
            <telerikData:RadJumpList.ItemAddedAnimation>                
                <telerikCore:RadMoveAnimation StartPoint="500, 0" EndPoint="0, 0" Duration="0:0:1">
                    <telerikCore:RadMoveAnimation.Easing>
                        <CubicEase EasingMode="EaseOut"/>
                    </telerikCore:RadMoveAnimation.Easing>
                </telerikCore:RadMoveAnimation>
            </telerikData:RadJumpList.ItemAddedAnimation>
            <telerikData:RadJumpList.ItemRemovedAnimation>
                <telerikCore:RadMoveAnimation StartPoint="0, 0" EndPoint="500, 0" Duration="0:0:1">
                    <telerikCore:RadMoveAnimation.Easing>
                        <CubicEase EasingMode="EaseIn"/>
                    </telerikCore:RadMoveAnimation.Easing>
                </telerikCore:RadMoveAnimation>
            </telerikData:RadJumpList.ItemRemovedAnimation>
            
            <telerikData:RadJumpList.GroupHeaderTemplate>
                <DataTemplate>
                    <Grid> 
                        <TextBlock 
                            Text="{Binding}" 
                            Style="{StaticResource TextBlockHeaderAccentStyle}" />
                        <telerikPrimitives:RadImageButton 
                            Margin="0,0,10,0" 
                            ButtonShape="Ellipse" 
                            RestStateImageSource="/Assets/Images/add.png" 
                            Background="{StaticResource PhoneAccentBrush}" 
                            HorizontalAlignment="Right"/>                        
                    </Grid>
                </DataTemplate>
            </telerikData:RadJumpList.GroupHeaderTemplate>
            <telerikData:RadJumpList.ItemTemplate>
                <DataTemplate>
                    <telerikPrimitives:RadExpanderControl
                        IsExpanded="{Binding IsExpanded, Mode=TwoWay}"
                        Content="{Binding}"
                        ExpandableContent="{Binding}"
                         ExpandedStateChanging="RadExpanderControl_ExpandedStateChanging">
                    <telerikPrimitives:RadExpanderControl.AnimatedIndicatorContentTemplate>
                        <DataTemplate/>
                    </telerikPrimitives:RadExpanderControl.AnimatedIndicatorContentTemplate>
                    <telerikPrimitives:RadExpanderControl.ContentTemplate>
                        <DataTemplate>
                                <Grid 
                                    Margin="5,0,0,0">
                                    <TextBlock 
                                        Text="{Binding Title}" 
                                        Style="{StaticResource TextBlockItemHeaderStyle}"/>
                                    <Button 
                                        Click="Button_Click" 
                                        Style="{StaticResource ButtonImageItemStyle}">
                                        <Grid>
                                            <Image 
                                                Source="{Binding Image}" 
                                                Style="{StaticResource ItemCategoryImageStyle}"/>
                                        </Grid>
                                    </Button>
                                    <Border 
                                        VerticalAlignment="Bottom" 
                                        BorderThickness="0,0,0,2" 
                                        BorderBrush="#FFB9B9B9" />
                                </Grid>
                            </DataTemplate>
                    </telerikPrimitives:RadExpanderControl.ContentTemplate>
                        <telerikPrimitives:RadExpanderControl.ExpandableContentTemplate>
                            <DataTemplate>
                                <StackPanel
                                    caliburn:Action.TargetWithoutContext="{Binding ElementName=LayoutRoot, Path=DataContext}"
                                    Orientation="Horizontal">
                                    <Button                                         
                                        caliburn:Message.Attach="[Event Click] = [Action DeleteTask($datacontext)]" 
                                        Style="{StaticResource ButtonImageItemStyle}">
                                        <Grid>
                                            <Image 
                                                Source="/Assets/Images/delete.png"
                                                Style="{StaticResource ItemCategoryImageStyle}"/>
                                        </Grid>
                                    </Button>
                                    <Button 
                                        Click="EditItem_Click" 
                                        Style="{StaticResource ButtonImageItemStyle}">
                                        <Grid>
                                            <Image 
                                                Source="/Assets/Images/edit.png" 
                                                Style="{StaticResource ItemCategoryImageStyle}"/>
                                        </Grid>
                                    </Button>
                                    <Button 
                                        Click="ReminderItem_Click" 
                                        Style="{StaticResource ButtonImageItemStyle}">
                                        <Grid>
                                            <Image 
                                                Source="/Assets/Images/reminder.png" 
                                                Style="{StaticResource ItemCategoryImageStyle}"/>
                                        </Grid>
                                    </Button>
                                </StackPanel>
                            </DataTemplate>
                        </telerikPrimitives:RadExpanderControl.ExpandableContentTemplate>
                </telerikPrimitives:RadExpanderControl>
                </DataTemplate>
                
            </telerikData:RadJumpList.ItemTemplate>            
        </telerikData:RadJumpList> 


private ToDoModel lastSelectedItem;

        private void RadJumpList_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            var item = RadJumpList.SelectedItem as ToDoModel;

            if (lastSelectedItem != null)
            {
                lastSelectedItem.IsExpanded = false;
            }
            this.lastSelectedItem = item;
            
        }
0
Accepted
Deyan
Telerik team
answered on 06 Nov 2013, 02:03 PM
Hello Stuart,

Thanks for writing back and for your code snippet.

My first suggestion would be to make sure you handle the Tap event of the button inside the content template and mark it as Handled by setting the Handled property in the event arguments to true.

If this doesn't work, I would like to ask you to directly send me your project so that I can attach it to our source and debug.

Regards,
Deyan
Telerik
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
0
Stuart
Top achievements
Rank 1
answered on 12 Nov 2013, 07:26 AM
Sorry about late reply, been working on other projects.

Awesome, Thanks Deyan.

Worked liked a dream.
Tags
ExpanderControl
Asked by
Stuart
Top achievements
Rank 1
Answers by
Deyan
Telerik team
Stuart
Top achievements
Rank 1
Share this question
or