We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to enable/disable Ribbon controls

Thread ID:

Created:

Updated:

Platform:

Replies:

146388 Aug 2,2019 06:55 AM UTC Oct 16,2019 12:42 PM UTC ASP.NET Web Forms 7
loading
Tags: Ribbon
Julius Müller
Asked On August 2, 2019 06:55 AM UTC

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 [Syncfusion]
Replied On August 5, 2019 10:08 AM UTC

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. 
 
 
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
Replied On August 6, 2019 08:36 AM UTC

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 [Syncfusion]
Replied On August 7, 2019 09:26 AM UTC

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
Replied On August 19, 2019 02:00 PM UTC

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 [Syncfusion]
Replied On August 20, 2019 07:13 AM UTC

Hi Julius Müller, 
 
Most Welcome. 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Ashokkumar B. 


holdbackeverything
Replied On October 16, 2019 01:52 AM UTC

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 [Syncfusion]
Replied On October 16, 2019 12:42 PM UTC

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. 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon