Binding not working on IsHidden in RadPane

10 posts, 0 answers
  1. Mike Gold
    Mike Gold avatar
    16 posts
    Member since:
    Oct 2009

    Posted 31 Dec 2009 Link to this post

    Hi all,

    I'm binding to a RadPane's IsHidden property as follows:

    IsHidden

     

    ="{Binding Hidden, Mode=TwoWay}"

     


    My ViewModel looks like this:

     

    public bool Hidden

     

    {

     

    get { return hidden; }

     

     

    set

     

    {

    hidden =

    value;

     

    PropertyChanged.Raise(

    this, "IsHidden");  // Raise is an extension method to do a property changed event

     

    }

    }


    The first time Hidden is set in the ViewModel's constructor, the IsHidden seems to work properly.  Subsequent changes to try to reshow the RadPane through the Hidden property don't work.

    best,
    -Mike Gold


  2. Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    1718 posts

    Posted 04 Jan 2010 Link to this post

    Hello Mike,

     I tried to reproduce your problem, but I couldn't. I used the following XAML:

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
     
        <CheckBox Content="IsHidden" IsChecked="{Binding DataContext.Hidden, ElementName=Docking, Mode=TwoWay}" />
     
        <telerikDocking:RadDocking Grid.Row="2" x:Name="Docking">
            <telerikDocking:RadDocking.DataContext>
                <local:ViewModel />
            </telerikDocking:RadDocking.DataContext>
            <telerikDocking:RadSplitContainer>
                <telerikDocking:RadPaneGroup>
                    <telerikDocking:RadPane Header="Pane1" IsHidden="{Binding Hidden, Mode=TwoWay}">
                        <telerikNavigation:RadOutlookBar>
                            <telerikNavigation:RadOutlookBarItem Header="someHeader">
                                <Button Content="some content" />
                            </telerikNavigation:RadOutlookBarItem>
                        </telerikNavigation:RadOutlookBar>
                    </telerikDocking:RadPane>
                </telerikDocking:RadPaneGroup>
            </telerikDocking:RadSplitContainer>
        </telerikDocking:RadDocking>
    </Grid>
    And the code for the ViewModel is as follows:

    namespace DevTests
    {
        public class ViewModel : INotifyPropertyChanged
        {
            private bool hidden;
     
            public ViewModel()
            {
                this.hidden = true;
            }
     
            public bool Hidden
            {
                get { return this.hidden; }
                set
                {
                    if (value != this.hidden)
                    {
                        this.hidden = value;
                        this.OnPropertyChanged("Hidden");
                    }
                }
            }
     
            public event PropertyChangedEventHandler PropertyChanged;
     
            protected void OnPropertyChanged(string propertyName)
            {
                this.OnPropertyChanged(new PropertyChangedEventArgs(propertyName));
            }
     
            protected virtual void OnPropertyChanged(PropertyChangedEventArgs args)
            {
                if (this.PropertyChanged != null)
                {
                    this.PropertyChanged(this, args);
                }
            }
        }
    }

    I placed the CheckBox in order to keep track when is the property updated correctly. If this doesn't help, please send us a sample project that reproduces the problem - this will let us investigate what the problem is.

    Regards,
    Miroslav Nedyalkov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Torben
    Torben avatar
    1 posts
    Member since:
    Jun 2009

    Posted 02 Mar 2012 Link to this post

    Hi

    I'm using version 2011.3.1116.40 and your  exampel is not working :-(

  4. Christian M
    Christian M avatar
    3 posts
    Member since:
    Oct 2011

    Posted 05 Mar 2012 Link to this post

    This example is not working as far as I can tell.
    I have this same problem.
    It works in hiding the pane, but when you want to show it again, it doesn't.

    Hope you can help me. Thanks.
  5. Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    1718 posts

    Posted 05 Mar 2012 Link to this post

    Hello Everybody,

    When a pane is hidden it is moved out of the visual tree and because of this its DataContext is cleared. Because of this behavior you need to bind the IsHidden property with ElementName directly to the DockingControl. Here is an example:

    <telerikDocking:RadPane Header="Pane1" IsHidden="{Binding DataContext.Hidden, ElementName=Docking, Mode=TwoWay}"">

    Hope this helps.

    Regards,
    Miroslav Nedyalkov
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  6. Christian M
    Christian M avatar
    3 posts
    Member since:
    Oct 2011

    Posted 05 Mar 2012 Link to this post

    Thanks for the help. Got it working now.
  7. Christoph
    Christoph avatar
    2 posts
    Member since:
    Jan 2019

    Posted 24 Feb in reply to Miroslav Nedyalkov Link to this post

    Hi together,

    This post is quite old - neverthless I have the same issue as described above. What is different for me: We create the panes dynamically via PaneSource.

    So my question is: How can I set that kind of binding of the Hidden property in code behind?

    Thanks in advance.

  8. Vladimir Stoyanov
    Admin
    Vladimir Stoyanov avatar
    620 posts

    Posted 26 Feb Link to this post

    Hello Christoph,

    Can you check out the following article: How to: Create a Binding in Code, where the scenario of setting a binding in code is demonstrated and let me know, if it helps?

    Regards,
    Vladimir Stoyanov
    Progress Telerik

    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  9. Christoph
    Christoph avatar
    2 posts
    Member since:
    Jan 2019

    Posted 26 Feb in reply to Vladimir Stoyanov Link to this post

    Hi Vladimir,

    thanks for your reply. What I am looking for ist how to exactly reproduce the binding like your collegue Miroslav wrote above:

    IsHidden="{Binding DataContext.Hidden, ElementName=Docking, Mode=TwoWay}

    There the DataContext is selected, but without providing an explicit object. The "How to: Create a Binding in Code" just shows how to set an object as a binding source: 

    myBinding.Source = myDataObject;

    That's because with a code as follows I don't have an explicit object:

    <telerikDocking:RadDocking PanesSource="{Binding Windows}" >
            <telerikDocking:RadDocking.DockingPanesFactory>
                <view:WorkspaceDockingPanesFactory/>
            </telerikDocking:RadDocking.DockingPanesFactory>
            ...
     </telerikDocking:RadDocking>

    Can you give me a hint how to achieve that?

    Thanks and best regards

  10. Vladimir Stoyanov
    Admin
    Vladimir Stoyanov avatar
    620 posts

    Posted 28 Feb Link to this post

    Hello Christoph,

    Thank you for the provided code snippets. 

    In the shared xaml Binding, the ElementName is set instead of the Source. It points to an element with Name="Docking", which is the RadDocking instance. Here is how you can achieve the same binding in code:

    var isHiddenBinding = new Binding("DataContext.IsHidden") { ElementName = "Docking", Mode = BindingMode.TwoWay };
    pane.SetBinding(RadPane.IsHiddenProperty, isHiddenBinding);

    In the above snippet "pane" can refer to the RadPane instance that you are creating. Do give this a try and let me know how it goes. 

    Regards,
    Vladimir Stoyanov
    Progress Telerik

    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top