Editable tab header?

16 posts, 1 answers
  1. Nic
    Nic avatar
    32 posts
    Member since:
    Oct 2008

    Posted 22 Dec 2008 Link to this post

    Hi,

    I'd like to create a tab control in which the individual tab headers have a 'read-mode' and 'edit-mode'.  In read mode, the header text appears as a label. In edit mode, the header text visually appears as a editable text box.

    So when the text in the header is clicked, the text itself becomes editable, allowing the user to enter a new label for the header. Is this possible, and if so could someone outline the steps on how to go about implementing this.

    Thanks
    Nic
  2. Answer
    Miroslav
    Admin
    Miroslav avatar
    922 posts

    Posted 29 Dec 2008 Link to this post

    Hello Nic,

    What you are looking for is an editable ContentControl. If you have this - you can put it wherever you need to edit anything, including the TabItem Header.

    Your question got me thinking whether this will actually work and I decided to test it. I created a sample project with an editable ContentControl. It is just like a regular control but on double-click the content presenter is replaced with a TextBox. It still needs a few things but it can be a starting point for you:



    I the example I use DataBinding, though you can create the TabItems yourself and set the HeaderTemplate to the sample DataTemplate in the project.

    Improvements may include: Committing change on enter key, using the TextSearch.Text attached property for visual objects, etc.

    I hope that this will get you going, also if you come up with something interesting, please share it with us.

    All the best,
    Miroslav
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. DevCraft banner
  4. Nic
    Nic avatar
    32 posts
    Member since:
    Oct 2008

    Posted 06 Jan 2009 Link to this post

    Hi Miroslav,

    This is exactly what I needed and points me in the right direction of how this sort of thing gets put together. Some changes I made were 1)to accept the input on enter key as you suggested, and 2)on the double-click to edit, to highlight the text being edited and set focus to it.

    Thank you,
    Nic

  5. runes
    runes avatar
    15 posts
    Member since:
    Mar 2009

    Posted 27 Apr 2009 Link to this post

    I attached at TabControlEditableHeaders.zip but its change the content and the header  of the tab.
    I want to change only the header (on duble click)
    can you give me the relevant code?
    or explain me how to do it?
    thanks
  6. Miroslav
    Admin
    Miroslav avatar
    922 posts

    Posted 28 Apr 2009 Link to this post

    Hello runes,

    In this example the Content of the TabItem and its Header are bound to one and the same property. If you want to use databinding, you need to add a property that your content will bind to, the xaml will change like so:

    <nav:RadTabControl x:Name="tabControl">  
        <nav:RadTabControl.ItemTemplate> 
            <!--The Content Template:--> 
            <DataTemplate> 
                <Grid Background="Red">  
                    <Button Content="{Binding MyContent}" /> 
                </Grid> 
            </DataTemplate> 
        </nav:RadTabControl.ItemTemplate> 
        <nav:RadTabControl.ItemContainerStyle> 
            <Style TargetType="nav:RadTabItem">  
                <Setter Property="HeaderTemplate">  
                    <Setter.Value> 
                        <!--The Header Template:--> 
                        <DataTemplate> 
                            <local:EditableContentControl  
                                    Content="{Binding Name, Mode=TwoWay}" /> 
                        </DataTemplate> 
                    </Setter.Value> 
                </Setter> 
            </Style> 
        </nav:RadTabControl.ItemContainerStyle> 
    </nav:RadTabControl> 

    Here you can see a similar case, where DataTemplateSelectors are used (i.e. different DataTemplates for specific cases):

    http://www.telerik.com/community/forums/silverlight/tabcontrol/setting-radtabitem-headertemplate-in-code-with-resource.aspx

    Best wishes,
    Miroslav
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  7. ruty
    ruty avatar
    42 posts
    Member since:
    Mar 2009

    Posted 08 Jun 2009 Link to this post

    Hi,
    I want to do it and.
    but I want to do it dinamicly.(in run time.)
    How I write this code in the cs files????
    the code is:
      <nav:RadTabControl x:Name="tabControl">  
                <nav:RadTabControl.ItemTemplate> 
                    <!--The Content Template:--> 
                    <DataTemplate> 
                        <Grid Background="Red">  
                            <Button Content="{Binding MyContent}" /> 
                        </Grid> 
                    </DataTemplate> 
                </nav:RadTabControl.ItemTemplate> 
                <nav:RadTabControl.ItemContainerStyle> 
                    <Style TargetType="nav:RadTabItem">  
                        <Setter Property="HeaderTemplate">  
                            <Setter.Value> 
                                <!--The Header Template:--> 
                                <DataTemplate> 
                                    <local:EditableContentControl     
                                    Content="{Binding Name, Mode=TwoWay}" /> 
                                </DataTemplate> 
                            </Setter.Value> 
                        </Setter> 
                    </Style> 
                </nav:RadTabControl.ItemContainerStyle> 
            </nav:RadTabControl> 
    Can you give me a simple example to definition template in code????(not in xaml file)
    Thanks.
  8. ruty
    ruty avatar
    42 posts
    Member since:
    Mar 2009

    Posted 08 Jun 2009 Link to this post

    Hi,
    I want to transfer the style 

    Style

     

    TargetType="local:EditableContentControl"

     

    (that you attach me in the demo example in last post.)
     from the generic file to the app.xaml.
    and I unsuccessful to do it.
    How can I do it??????
    Thanks.
  9. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 10 Jun 2009 Link to this post

    Hi ruty,

    In the attachment you can find a demo that demonstrates the scenario you are describing.
    Every TabItem has unique header and content.
    Editing the header does not affect the content.
    I have also moved the Style of the EditableContentControl to App.xaml.
    If you have any additional questions, let us know.

    Regards,
    Kiril Stanoev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  10. ruty
    ruty avatar
    42 posts
    Member since:
    Mar 2009

    Posted 14 Jun 2009 Link to this post

    Thanks,
    I did  it in my application - (I  used tabcontroleditableheaders-example.zip kode) but: I tried to enter the MyData class to my class but now - when pressing on the header of the tab - OnMouseLeftButtonDown (in EditableContentControl class) event does not raised.
    can you help me - what is the problem? or how should I use your kode in my application?
    Thanks, 
  11. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 17 Jun 2009 Link to this post

    Hello Ruty,

    Could you please send us a sample project, so we can assist you better?

    Greetings,
    Kiril Stanoev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  12. Roman
    Roman avatar
    6 posts
    Member since:
    Aug 2010

    Posted 04 Aug 2010 Link to this post

    Hi,

    I am new to silverlight and was wondering how you would go about adding functionality to accept the input on press of the enter key as well as how to highlight and set focus to the textbox? I'm not sure where to begin on either one. Any help would be greatly appreciated.

    Thanks,
    Roman
  13. Miro Miroslavov
    Admin
    Miro Miroslavov avatar
    588 posts

    Posted 09 Aug 2010 Link to this post

    Hi Roman,

    Can you please start new more specific topic or open new support ticket with deeper issue explanation.
    About setting focus you can use the Control.Focus() method and also you can handle the KeyDown event of the TextBox and then process the input.


    Best wishes,
    Miro Miroslavov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  14. Pranama Moorthy
    Pranama Moorthy avatar
    26 posts
    Member since:
    Jun 2010

    Posted 04 Jan 2011 Link to this post

    Hi Mirov,
                    The two way binding, does not work, it just works one way. When I set the Content={Binding Name, Mode=TwoWay}, and I try to edit the tab header textBox, the new value does not get propagated.

    I am using the EditableControl that you have used below, I have not been able to figure out how to fix this one. Please help.

    Regards,
    Pranama
  15. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 04 Jan 2011 Link to this post

    Hello Nic,

    Please have a look at the sample attached to your other thread here and let us know if it works for you or if you need more info.

    Regards,
    Tina Stancheva
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
  16. Pranama Moorthy
    Pranama Moorthy avatar
    26 posts
    Member since:
    Jun 2010

    Posted 12 Jan 2011 Link to this post

    Hi Tina,
                 The attached link in the previous post does not help. The problem, now I am facing is that, when I bind, the Content of the EditableContentControl to the "Name" property of my Class, it Binds properly and shows, the name.

    But when the user edits the name, and clicks somewhere else the name does not get stored in the property. (Please note I have specified the mode as TwoWay, yet it does not store the value back in the property. I have also raised Property Changed event, for that property.)

    Could you please, Show how we can achieve this? Even in the EditableTabHeader example, which has been attached below by the telerik team, the binding happens only one way. 

    Please advice.

    Regards,
    Pranama
  17. Pranama Moorthy
    Pranama Moorthy avatar
    26 posts
    Member since:
    Jun 2010

    Posted 16 Jan 2011 Link to this post

    Hi Tina,

    Please ignore my post, it actually binds correctly, I had actually edited the code somewhere, where in explicitly set the testbox as blank. My sincere apologies.

    Regards,
    Pranama

Back to Top
DevCraft banner