Expanding on button click in content template

5 posts, 1 answers
  1. Stuart
    Stuart avatar
    3 posts
    Member since:
    Jun 2013

    Posted 30 Oct 2013 Link to this post

    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.

  2. Deyan
    Admin
    Deyan avatar
    2037 posts

    Posted 01 Nov 2013 Link to this post

    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.
  3. DevCraft banner
  4. Stuart
    Stuart avatar
    3 posts
    Member since:
    Jun 2013

    Posted 05 Nov 2013 Link to this post

    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;
                
            }
  5. Answer
    Deyan
    Admin
    Deyan avatar
    2037 posts

    Posted 06 Nov 2013 Link to this post

    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.
  6. Stuart
    Stuart avatar
    3 posts
    Member since:
    Jun 2013

    Posted 12 Nov 2013 Link to this post

    Sorry about late reply, been working on other projects.

    Awesome, Thanks Deyan.

    Worked liked a dream.
Back to Top
DevCraft banner