1. Home
  2. Forum
  3. Angular
  4. How to create JSON structure for dropdown within the ribbon with out giving in html as <ul><li>

How to create JSON structure for dropdown within the ribbon with out giving in html as <ul><li>

Hi, 

I have four questions with this ribbon.

1. Instead of assigning the splitButtonSettings values for the ribbon  in html as is it possible to give it in JSON itself.

2. Assigning dropdown values at run time.

3. Enabling and disabling ribbon menus at run time

4. how to dynamically add tabs at run time.

5. how to add other controls in ribbon without adding jquery can we do this.

Ex:

Instead of giving Targetid and binding in html is it possible to construct it with in json itself

Will this ribbon JSON support Level 4 menus



3 Replies
AB Ashokkumar Balasubramanian Syncfusion Team November 24, 2017 12:59 PM UTC

Hi Jesu, 
 
Thanks for contacting Syncfusion support. 
 
Query 2: Assigning dropdown values at run time. 
 
We are able to assign the dropdown values using “dataSource” property of DropDownList component, please check the below code block. 
 
[TS] 
 
onCreate(e){ 
            var fontFamily = ["Segoe UI", "Arial", "Times New Roman", "Tahoma", "Helvetica"]; 
            var DropDrownObj = $("#Default_fontfamily").ejDropDownList("instance"); 
            DropDrownObj.option("dataSource",fontFamily); 
        } 
 
 
 
 
In our provided sample, we have assign the dropdown values on Create event, please check it in Sample. 
 
To know more details about dataSource property of DropDownList component, please check the below help document. 
 
Query 3: Enabling and disabling ribbon menus at run time 
 
We were able to dynamically change the ribbon menu states using enable and disable method of Menu component, please check the below code block. 
 
[TS] 
 
        onEnable(){ 
            var menuObj = $("#ribbonmenu").ejMenu("instance"); 
            menuObj.enable(); 
        } 
        onDisable(){ 
            var menuObj = $("#ribbonmenu").ejMenu("instance"); 
            menuObj.disable(); 
        } 
 
 
To know more details about enable and disable method of Menu component, please check the below api document. 
 
 
 
Query 4: how to dynamically add tabs at run time.  
 
We have provided the addTab method for Ribbon component. You can use this method to dynamically add the tabs at run time. Please check the below code block.  
 
[TS] 
 
onAddTab(){ 
            var tabGroup = [{ 
                text: "New", 
                alignType: ej.Ribbon.AlignType.Rows, 
                content: [{ 
                    groups: [ 
                        { 
                            id: "new", 
                            text: "New", 
                            toolTip: "New", 
                            buttonSettings: { 
                                contentType: ej.ContentType.ImageOnly, 
                                imagePosition: ej.ImagePosition.ImageTop, 
                                prefixIcon: "e-ribbon e-icon e-new" 
                            } 
                        } 
                    ], 
                    defaults: { 
                        type: ej.Ribbon.Type.Button, 
                        width: 60, 
                        height: 70 
                    } 
                }] 
            }]; 
            this.ribbon.widget.addTab("Tab2", tabGroup,3); 
        } 
 
 
To know more details about addTab method, please check the below api document. 
 
Query 1 & 5 : Instead of assigning the splitButtonSettings values for the ribbon  in html as is it possible to give it in JSON itself. Ex: Instead of giving Targetid and binding in html is it possible to construct it with in json itself. 
Currently we don’t have the inbuilt support to render the SplitButtonSettings items without using target API. But we are able to convert the corresponding JSON into ul li element after bind to Split button Targetid. Please find the below conversation code block. 
 
[TS] 
            let ul:any; 
            splitObj = [{ id: 1, text: "Item 1" }, { id: 2, text: "Item 2" }, { id: 3, text: "Item 3" }]; 
            ul = document.createElement("ul"); 
            ul.id = "pasteSplit"; //Split button Target Id 
            document.body.appendChild(ul); 
            debugger; 
            for (let i = 0; i < splitObj.length; i++) { 
                let li = document.createElement("li"); 
                let a = document.createElement("a"); 
                a.innerHTML = splitObj[i].text; 
                li.appendChild(a); 
                ul.appendChild(li); 
            } 
 
 
 
Please let us know, if you have any concern on this. 
 
Regards, 
Ashokkumar B. 


JE Jesu November 27, 2017 12:40 PM UTC

Hi Ashok kumar,

Thanks for immediate response,

i have some other clarifications also,

=> How to set focus for the tabs on run time?

=> I am quite happy with the above answers, but i am little confused with menu enable disable. i want to disable the menu with in the tab->Group->content->group->Id:one. how to get the node element with this order to disable the Id one.

please can you responde.



AB Ashokkumar Balasubramanian Syncfusion Team November 28, 2017 12:57 PM UTC

Hi Jesu, 
 
Thanks for your update. 
 
Query 1: How to set focus for the tabs on run time? 
 
In our Ribbon component we have provided the “selecteditemindex” property to selected(focus) the tab. You can use this property to focus the tab on run time. 
 
Please check the below API document: 
 
 
Online demo for this requirement in Java Script Platform: https://js.syncfusion.com/demos/web/#!/bootstrap/ribbon/API's 
 
Query 2: I am quite happy with the above answers, but i am little confused with menu enable disable. i want to disable the menu with in the tab->Group->content->group->Id:one. how to get the node element with this order to disable the Id one. 
 
We have checked your query. We suspect that you have rendered the ejMenu component in Ribbon Groups with the help of custom component integration logic.so, the corresponding ul element id as the same for Menu component id. Please check the below code block. 
 
[HTML] 
 
<ul id="ribbonmenu"> 
    <li> 
        <a>FILE</a> 
        <ul> 
            <li><a>New</a></li> 
            <li><a>Open</a></li> 
            <li><a>Save</a></li> 
            <li><a>Save As</a></li> 
            <li><a>Print</a></li> 
        </ul> 
    </li> 
</ul> 
 
[TS] 
 
// 
 
groups: [{ 
          text: "Font", 
          content: [{ 
              groups: [{ 
                                id: "ribbonmenu", 
                                type: ej.Ribbon.type.custom, 
                                contentID: "ribbonmenu" 
                            }] 
             }] 
}] 
 
//To use this method for after ejMenu component creation. 
//Enable 
 
onEnable(){ 
            var menuObj = $("#ribbonmenu").ejMenu("instance"); 
            menuObj.enable(); 
} 
 
//Disable 
 
onDisable(){ 
            var menuObj = $("#ribbonmenu").ejMenu("instance"); 
            menuObj.disable(); 
} 
 
 
Please let us know, if the provided information’s are helpful to resolve your problem or not. 
 
Regards, 
Ashokkumar B. 


Loader.
Up arrow icon