Add a new item to splitbutton in Ribbon

[Divya Davis]

I want to add a new item to the splitbutton dropdown and its not working and here is my code. 

  var ribbon = new ej.ribbon.Ribbon(); 
    var tabs = [{ 
        header: "Split Button",
        groups: [{
            groupIconCss: "e-icons e-paste",
            collections: [{
                items: [{
                    id: "splitbutton_id",
                    type: "SplitButton",
                    allowedSizes: ej.ribbon.RibbonItemSize.Large,
                    splitButtonSettings: {
                        iconCss: "e-icons ansichtimg",
                        iconPosition : "Top" , 
                        id : "view_id" , 
                       items : [{ text : "New View 1" , iconCss : "ansichtimgdropdown" }, { text : "New View 2" , iconCss : "ansichtimgdropdown" }, { text : "New View 3" , iconCss : "ansichtimgdropdown" }, { 
                            separator : true , 
                       },{ text : "add view" ,iconCss : "addviewimg" } 
                        ], 
                        select : (args) => { 
                            if (args. item . text === 'Add view' ) { 
                                
                                let newItem = new ej. ribbon .RibbonSplitButton( args.item .parentObj.id ) ; 
                                newItem . addItems (args.item .parentObj.id , [{ text : " New view text New" , iconCss : "viewimgdropdown" }]); }
                           
                            
                        }, 
                        content : "Views"
                     } 
                }] 
            }] 
        }] 
   }]; 
tape . tabs = tabs ; 
    tape . appendTo ( "#ribbon" );

[Silambarasan I]

Hi Divya,

Based on the provided code example, the ‘tape’ property reference is not available and seems added incorrect. However, we have modified it to achieve your reported requirement in the following Stackblitz sample.

https://stackblitz.com/edit/7x3tza-m1anqv?file=index.html,index.js

Regards,

Silambarasan Ilango

[Divya Davis]

Thank you for your reply.  It was a typing error. I tried with ribbon.tabs property  and it didnt add any new item to the dropdown of the split button.

 var ribbon = new ej.ribbon.Ribbon();

    var tabs = [{

        header: "Split Button",

        groups: [{

            groupIconCss: "e-icons e-paste",

            collections: [{

                items: [{

                    id: "splitbutton_id",

                    type: "SplitButton",

                    allowedSizes: ej.ribbon.RibbonItemSize.Large,

                    splitButtonSettings: {

                        iconCss: "e-icons ansichtimg",

                        iconPosition : "Top" ,

                        id : "view_id" ,

                       items : [{ text : "New View 1" , iconCss : "ansichtimgdropdown" }, { text : "New View 2" , iconCss : "ansichtimgdropdown" }, { text : "New View 3" , iconCss : "ansichtimgdropdown" }, {

                            separator : true ,

                       },{ text : "add view" ,iconCss : "addviewimg" }

                        ],

                        select : (args) => {

                            if (args. item . text === 'Add view' ) {

                                let newItem = new ej. ribbon .RibbonSplitButton( args.item .parentObj.id ) ;

                                newItem . addItems (args.item .parentObj.id , [{ text : " New view text New" , iconCss : "viewimgdropdown" }]); }

                        },

                        content : "Views"

                     }

                }]

            }]

        }]

   }];

ribbon.tabs = tabs ;

    

ribbon.appendTo ( "#ribbon" );

[BharatRam Harikrishnan]

Hi Divya,

 

Based on the details you provided, we have prepared a sample to help you add a new item to the dropdown of the split button. Please find the modified code snippet and Stackblitz sample below. And then you encounter issues because you have used a property called RibbonSplitButton, which does not exist in Syncfusion Javascript Ribbon.

 

Code-snippet:

You can use the following code snippet inside the select event handler to add a new item to the dropdown of the split button:

if (args.item.text === 'add view') {

    var newItem = { text: ' New view text New', iconCss: 'viewimgdropdown' };

    var splitButtonItems = [...this.items];

    var startIndex = splitButtonItems.length - 2;

    splitButtonItems.splice(startIndex, 0, newItem);

    this.items = splitButtonItems;

}

 

Stackblitz sample: https://stackblitz.com/edit/7x3tza-yud4nb?file=index.html,index.js

 

Regards,

Bharat Ram H