How to enable/disable Ribbon controls

[Julius Müller]

Hi,

we use the Ribbon control for ASP.NET Web Forms. It's required to disable / enable some controls in the Ribbon.

Under the Ribbon control is a Grid control. Some buttons should be only activated if a item in the Grid is selected. Every control in the Ribbon has a "Id" property assigned (for example "ButtonOpen"). But they doesn't have a public ASP.NET generated ClientID which I can use.

How can I get the access of the controls in JavaScript/jQuery? And how can I disable / enable them?

<ej:Ribbon runat="server" ID="ui_Ribbon" Width="100%">
        <RibbonTabs>
            <ej:RibbonTab Id="Start" Text="START">
                <TabGroupCollection>
                    <ej:TabGroup Text="Edit" AlignType="Rows">
                        <ContentCollection>
                            <ej:TabContent>
                                <ContentGroupCollection>
                                    <ej:ContentGroup Id="ButtonOpen" Text="Open" Type="Button">
                                        <ButtonSettings Type="Button" ContentType="TextAndImage" ImagePosition="ImageTop" PrefixIcon="e-icon e-ribbon icon-open" Click="onOpenButtonClick" />
                                    </ej:ContentGroup>

                                    <ej:ContentGroup Id="ButtonDelete" Text="Delete" Type="Button">
                                        <ButtonSettings Type="Button" ContentType="TextAndImage" ImagePosition="ImageTop" PrefixIcon="e-icon e-ribbon icon-delete" Click="onDeleteButtonClick" />
                                    </ej:ContentGroup>
                                </ContentGroupCollection>
                            </ej:TabContent>
                        </ContentCollection>
                    </ej:TabGroup>
                </TabGroupCollection>
            </ej:RibbonTab>
        </RibbonTabs>
    </ej:Ribbon>

Can you please help us?

Thank you for your attention.

Greetings

[Ashokkumar Balasubramanian]

Hi Julius Müller, 

 

Greetings from Syncfusion support. 

 

We have checked your query about the ribbon control. we have option to enable and disable the items in the ribbon control using enabledItemIndex and disabledItemIndex property. We have prepared sample for you with enable and disable the items. Please refer the below link. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionASPNETApplication1-960102816 

 

Could you please check the above sample and get back to us, if you require any further assistance on this? 

 

Regards, 

Ashokkumar B. 

[Julius Müller]

Hi Ashokkuma,

thank you for your answer.

The option "enabledItemIndex" and "disabledItemIndex" enable/disable only the whole ribbon tab page. But I like to disable only some single buttons on the tabs.

For example:

- The open button should be only enabled, if I have selected a item in the list.

- The print button should be only enabled if I have selected one or more items in the list.

- The other buttons should be enabled everytimes.

And so on...

I saw in the Chrome Debugger, that I can disable the buttons with the enable() and disable()-button functions.

For example:

$("#HeaderContent_ui_ctrlRibbon_ui_Ribbon_ButtonOpen").data("ejButton").disable();

Now my idea is:

$("#<%= ButtonOpen.ClientID %>").data("ejButton").disable();

But I doesn't have a ClientID-Property in the ASP-Page Designer.

Do you have any idea how to get the Id of the button at runtime?

Regards,

Julius

[Ashokkumar Balasubramanian]

Hi Julius Müller, 

 

In our Ribbon component, we were able to specify a greater number of groups and tabs with custom contents. So, you are not able to use the custom component specified id and use that id to access the corresponding component. But we construct the id for each custom component using Ribbon component specified id. For this case, you can use the client side create event to get the Ribbon component id and construct it below logic. Please find the below code block. 

 

<ej:ContentGroup Id="ButtonOpen" Text="Pictures" ToolTip="Pictures"> 

    <ButtonSettings Type="Button" ContentType="TextAndImage" ImagePosition="ImageTop" PrefixIcon="e-icon e-ribbon e-picture" Click="executeAction" /> 

</ej:ContentGroup> 

  

       //Global variables for Ribbbon component id and ButtonId 

        var ribbonComponentId, buttonId; 

        //Client side create event for Ribbon component 

        function createControl(args) { 

            ribbonComponentId = this.element[0].id; 

            buttonId = "ButtonOpen" 

            //Custom Button is a combination of Ribbon component id_Button component id 

            console.log(ribbonComponentId + "_" + buttonId); 

        } 

 

Please let us know, if you have any concern on below logic. 

 

Regards, 

Ashokkumar B. 

[Julius Müller]

Hi,

that's was a good hint for me.

Now I use the Ribbon-ClientID  + "_" + ID of the buttons to call.

Thank you for your help.

Regards,

Julius

[Ashokkumar Balasubramanian]

Hi Julius Müller, 

 

Most Welcome. 

 

Please let us know, if you need any further assistance. 

 

Regards, 

Ashokkumar B. 

[holdbackeverything]

I am thinking of creating a custom ribbon and instead of inserting a button to run my macro, i want a button inside my custom ribbon. For example, "Generate Tables" Macro. I want to put that function in my custom ribbon tab as a button that the user can press (like pivot tables, chart, etc.) https://myip.kim/'

https://birthdaywishes.onl/

[Keerthana Rajendran]

Dear Customer,  

 

Good day to you. 

  

Based on your provided information, we were unable to identify your exact requirement at our end. Could you please share the below details to proceed further on this requirement? 

  

a.     Do you want to use our Ribbon component in your application else you need to customize some other component like Ribbon? 

b.     We are not clear about the term “Custom Ribbon” used in your update. Could you please clarify on this?  

c.      If you are using Ribbon component, share the clear details on the functionalities to be customized in your end. Share the code block (if any). 

         

  

Regards, 

Keerthana.