1. Home
  2. Forum
  3. ASP.NET MVC
  4. Ribbon object hierarchy

Ribbon object hierarchy

Hi, I feel the potential in Ribbon but am unable to understand its object hierarchy with all those tabs and groups. A diagram would help.

Also, I would appreciate any and all C# examples of how to add controls to a ribbon. This where I am but it seems daunting for me:

MainRibbon = new Ribbon
            {
                ID = "mainRibbon",
                RibbonModel = new RibbonProperties
                {
                    Width = "100%",
                    IsResponsive = true,
                    ButtonDefaults = new ButtonDefaults {Height = "25px"}
                }
            };
            RibbonTab rbTab = new RibbonTab{ Id = "Diagram", Text = "Háló" };
            List<TabContent> buttons = new List<TabContent>();

            ButtonProperties bp = new ButtonProperties {ContentType = ContentType.ImageOnly, PrefixIcon = "e-icon e-ribbon e-zoomin", Click = "ribbon_Click"};
            TabContent tbc = new TabContent();
            ContentGroup cgr = new ContentGroup();
            cgr.ButtonSettings = bp;
            tbc.ContentGroups.Add( cgr );
            buttons.Add( tbc);

            rbTab.TabGroups.Add( new TabGroup{ AlignType = RibbonAlignType.Columns, Content = buttons });
            MainRibbon.RibbonModel.RibbonTabs.Add( rbTab );

Thanks.

10 Replies
AB Ashokkumar Balasubramanian Syncfusion Team June 4, 2018 12:41 PM UTC

Hi Gyorgy, 
 
Query 1: I feel the potential in Ribbon but am unable to understand its object hierarchy with all those tabs and groups. A diagram would help. 
 
We will consider this object hierarchy problem at our end. We will prepare and publish the object hierarchy diagram on asap. 
Query 2: I would appreciate any and all C# examples of how to add controls to a ribbon. This where I am but it seems daunting for me: 
 
In our Ribbon component, we have provided the Ribbon properties configuration for server side. So, you can use this option to bind the properties for Ribbon through server side. Please check the below code block.  
 
[Server Side] 
 
            // create the Ribbon Tab Element 
            RibbonTab rbTab = new RibbonTab { Id = "Diagram", Text = "Háló" }; 
            List<TabContent> buttons = new List<TabContent>(); 
            // Creath the button element 
            ButtonProperties bp = new ButtonProperties { ContentType = Syncfusion.JavaScript.ContentType.ImageOnly, PrefixIcon = "e-icon e-ribbon e-zoomin", Click = "ribbon_Click" }; 
            TabContent tbc = new TabContent(); 
            ContentGroup cgr = new ContentGroup(); 
            //Bind the button settings 
            cgr.ButtonSettings = bp; 
            // Configure the button Element into Tab Content 
            tbc.ContentGroups.Add(cgr); 
            buttons.Add(tbc); 
            // Add the tab to Tab Groups 
            rbTab.TabGroups.Add(new TabGroup { AlignType = Syncfusion.JavaScript.RibbonAlignType.Columns, Content = buttons }); 
 
            RibbonProperties rbn = new RibbonProperties(); 
            // Bind the properits for Ribbon Element 
            rbn.Width = "100%"; 
            rbn.IsResponsive = true; 
            rbn.RibbonTabs.Add(rbTab); 
 
            return View(rbn); 
 
[Client Side] 
 
@model Syncfusion.JavaScript.Models.RibbonProperties 
@(Html.EJ().Ribbon("defaultRibbon",Model)) 
 
<script> 
//Click Event 
function ribbon_Click(args) { 
        console.log("Zoom In Image Button Clicked"); 
    } 
</script> 
 
For your reference, we have prepared the sample for your requirement, please find the sample in below location. 
 
Sample: 
 
 
Please let us know, if you have any concern on this. 
 
Regards, 
Ashokkumar B. 


GG Gyorgy Gorog June 12, 2018 08:16 AM UTC

Ashokkumar, thanks for reply. 

function ribbon_Click(args) { 
        console.log("Zoom In Image Button Clicked"); 
    } 

how do you know which button is clicked? Assuming there are more than one :)

GG Gyorgy Gorog June 12, 2018 08:37 AM UTC

As to the ribbon model, this I find very useful and it seems to be applicable to your ribbon too:

https://msdn.microsoft.com/en-us/library/windows/desktop/dn742393(v=vs.85).aspx

that actually doesn't encourage me to use a ribbon :)

AB Ashokkumar Balasubramanian Syncfusion Team June 12, 2018 12:12 PM UTC

Hi Gyorgy, 
 
Query 1: how do you know which button is clicked? Assuming there are more than one  
 
We have provided the target data for click event handler in Button component, so you can use this data to find the corresponding button element. Please check the below code block. 
 
[Controller] 
 
ButtonProperties bp = new ButtonProperties { ContentType = Syncfusion.JavaScript.ContentType.ImageTextImage, PrefixIcon = "e-icon e-ribbon e-zoomin", Click = "ribbon_Click", Text="Zoom In" }; 
 
            ButtonProperties bzoomout = new ButtonProperties { ContentType = Syncfusion.JavaScript.ContentType.TextAndImage, PrefixIcon = "e-icon e-ribbon e-zoomout", Click = "ribbon_Click", Text="Zoom Out" }; 
 
[Script] 
 
function ribbon_Click(args) { 
        console.log(args.target.innerText + " Button Clicked"); 
    } 
 
Modified Sample:  
 
 
To know more details about Button component related details, please check the below API document. 
 
 
Query 2: As to the ribbon model, this I find very useful and it seems to be applicable to your ribbon too: https://msdn.microsoft.com/en-us/library/windows/desktop/dn742393(v=vs.85).aspx that actually doesn't encourage me to use a ribbon :) 
 
Thanks for providing more details to improving our documentation. As we mentioned earlier, we will consider and improve our documentation as soon as possible.  
 
Please let us know, if you have any concern on this. 
 
Regards, 
Ashokkumar B. 


GG Gyorgy Gorog June 13, 2018 06:29 AM UTC

Ashokkumar, thanks for reply.

function ribbon_Click(args) { 
        console.log(args.target.innerText + " Button Clicked"); 
    } 

how can these clues be discovered in general? 
In Diagram, it's element.name, 
in Ribbon it's target.innerText, 
in Toolbar it's currentTarget.id

Not easy to guess.

AB Ashokkumar Balasubramanian Syncfusion Team June 13, 2018 12:25 PM UTC

Hi Gyorgy, 
 
Sorry for the inconvenience. 
 
We have considered your concerns as an improvement at our end. We will implement this improvement in any of our upcoming releases. We will update you once this improvement has been implemented.  
  
Regards, 
Ashokkumar B. 


GG Gyorgy Gorog June 14, 2018 05:12 AM UTC

Ashokkumar, thanks for reply. Just a summary table of responsiveness for all controls would do. Not that it's an easy work, but still may not require development.

AB Ashokkumar Balasubramanian Syncfusion Team June 15, 2018 06:45 AM UTC

Hi Gyorgy, 
  
We will consider this changes in all the EJ1 components. We will plan this requirement in our wish list. According wish-list we update the further details. 
  
Regards, 
Ashokkumar B. 


GG Gyorgy Gorog August 14, 2018 12:36 PM UTC

Thanks for updating the icons table, it seems to be much more usable now.

SK Shanmugaraja K Syncfusion Team August 16, 2018 05:26 AM UTC

Hi Gyorgy, 
 
Most welcome, please let us know if you need any further assistance. 
 
Regards, 
Shanmugaraja K 


Loader.
Up arrow icon