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

Hiding empty Command Bars

7 Answers 104 Views
CommandBar
This is a migrated thread and some comments may be shown as answers.
Scott
Top achievements
Rank 1
Scott asked on 31 May 2019, 10:08 AM

Hi

 

How to I hide / minimise the size of a CommandBar that is empty? (See attached image)

Also, there is a small border around the edge of the area (like a Margin or Padding) that I cant reduce. Is there a way to make the CommandBar be positioned tight to the edge?

I hope this makes sense.

Regards

Duane Suter

7 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 03 Jun 2019, 06:13 AM
Hi Duane,

You can use the Visible property to hide the commandbar, in other the other control to fill the space it must be docked. I have attached a small example that shows this. I cannot say where the padding is coming from without examining the form. Would it be possible to send me the designer file of your form so I can examine it locally? 

I am converting this forum thread into a support ticket in order to allow attachments. You can find it in your Telerik account.

I am looking forward to your reply.

Regards,
Dimitar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Scott
Top achievements
Rank 1
answered on 05 Jun 2019, 03:32 PM

Hi Dimitar

Thanks for your reply.

Unfortunately, I still cannot get the CommandBars to work in the way I need.

Basically what I need them to do, is when a CommandBar is or becomes empty (by the user floating and redocking a StripElement elsewhere), it needs to Auto-Hides or Auto-Collapse. 
Then when or if a User wants to re-dock a Strip Element and therefore drags it into that CommanBar's dock area, it un-collapses.

As I indicated in the image I attached previously, when the Bars are empty they are still visible.

How can this be achieved?

Many thanks

Duane Suter.

0
Dimitar
Telerik team
answered on 06 Jun 2019, 01:18 PM
Hi Duane,

This is not supported out of the box but can be achieved. You can use the FloatingStripCreated and EndDrag events of the CommandBarStripElement to update the visibility of the CommandBar. Here is an example (the attached image shows the result): 
public RadForm1()
{
    InitializeComponent();
 
    commandBarStripElement2.EnableFloating = true;
    commandBarStripElement1.EnableFloating = true;
 
    radCommandBar1.FloatingStripCreated += RadCommandBar1_FloatingStripCreated;
    radCommandBar1.FloatingStripCreated += RadCommandBar1_FloatingStripCreated;
 
    commandBarStripElement1.EndDrag += CommandBarStripElement1_EndDrag;
    commandBarStripElement2.EndDrag += CommandBarStripElement1_EndDrag;
}
 
private void CommandBarStripElement1_EndDrag(object sender, EventArgs e)
{
    if (radCommandBar1.Rows.Count == 0 || radCommandBar1.Rows[0].Strips.Count == 0)
    {
        radCommandBar1.Visible = false;
    }
    else
    {
        radCommandBar1.Visible = true;
    }
 
    if (radCommandBar2.Rows.Count == 0 || radCommandBar2.Rows[0].Strips.Count == 0)
    {
        radCommandBar2.Visible = false;
    }
    else
    {
        radCommandBar2.Visible = true;
    }
}
 
private void RadCommandBar1_FloatingStripCreated(object sender, EventArgs e)
{
    if (radCommandBar1.Rows.Count == 0 || radCommandBar1.Rows[0].Strips.Count == 0)
    {
        radCommandBar1.Visible = false;
    }
    else
    {
        radCommandBar1.Visible = true;
    }
 
    if (radCommandBar2.Rows.Count == 0 || radCommandBar2.Rows[0].Strips.Count == 0)
    {
        radCommandBar2.Visible = false;
    }
    else
    {
        radCommandBar2.Visible = true;
    }
}

I hope this helps. Should you have any other questions, do not hesitate to ask.
 
Regards,
Dimitar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Scott
Top achievements
Rank 1
answered on 06 Jun 2019, 02:14 PM

Hi Dimitar

Perfect! That is exactly what I needed. Many thanks.

However, how did you get the CommandBar to reappear when you hovered over it in your gif example?

Regards

Duane Suter

0
Dimitar
Telerik team
answered on 07 Jun 2019, 01:21 PM
Hi Nigel,

The EndDrag event is fired and I am using it to make the commandbar visible. Attached the entire project.

Please let me know if there is something else I can help you with. 
 
Regards,
Dimitar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Scott
Top achievements
Rank 1
answered on 07 Jun 2019, 02:06 PM

Hi Dimitar

Many thanks for that. Yes it has worked okay now.

It hadnt worked with my code because I had a docked panel in the area between the two CommandBars. So I will have to find a way around that problem.

Thanks again for your help.

Duane Suter

0
Dimitar
Telerik team
answered on 10 Jun 2019, 01:47 PM
Hello Nigel,

I was able to reproduce this. What you can do is subscribe to the MouseMove event of the CommandBarFloatingForm and show the command bar when the mouse is at the top of the docked control. Here is an example:
private void RadCommandBar1_FloatingStripCreated(object sender, EventArgs e)
{
    var strip = sender as CommandBarStripElement;
    var form = strip.FloatingForm;
    form.MouseMove += Form_MouseMove;
 
    if (radCommandBar1.Rows.Count == 0 || radCommandBar1.Rows[0].Strips.Count == 0)
    {
        radCommandBar1.Visible = false;
    }
    else
    {
        radCommandBar1.Visible = true;
    }
 
    if (radCommandBar2.Rows.Count == 0 || radCommandBar2.Rows[0].Strips.Count == 0)
    {
        radCommandBar2.Visible = false;
    }
    else
    {
        radCommandBar2.Visible = true;
    }
}
 
private void Form_MouseMove(object sender, MouseEventArgs e)
{
    if (!this.radCommandBar1.Visible && e.Button == MouseButtons.Left)
    {
        var form = sender as CommandBarFloatingForm;
        var location = form.PointToScreen(e.Location);
        var rect = new Rectangle(radListView1.PointToScreen(radListView1.Location), new Size(radListView1.Width, 30));
        
 
        if (rect.Contains(location))
        {
            radCommandBar1.Visible = true;
        }
    }
}

I hope this helps. Should you have any other questions, do not hesitate to ask.
 
Regards,
Dimitar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
CommandBar
Asked by
Scott
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Scott
Top achievements
Rank 1
Share this question
or