Office 2007 Ribbon UI

199 posts, 0 answers
  1. ClubbieTim
    ClubbieTim avatar
    1 posts
    Member since:
    Jun 2007

    Posted 01 Jun 2007 Link to this post

    Mr. Mason,

    Nice work on the Ribbon.  I'm new to the telerik design concept and have struggled with the client-side java script for sometime and can't seem to get the ribbon to minimize and maximize on the server side.   Could you please provide some insight on how you perform the seemingly easy, but miserable task?

    Thanks.
  2. Russell Mason
    Russell Mason avatar
    87 posts
    Member since:
    Oct 2006

    Posted 01 Jun 2007 Link to this post

    Hi Tim

    This should be fairly simple, have a look at the Server-side example ServerApplicationBar.aspx.

    In the aspx the ApplicationBar has 3 key properties relating to this:
    OnClientCustomizeClick="_applicationBar.showCustomizeMenu(event);"
    CustomizeMenuID="CustomizeMenu"
    ClientMemberName="_applicationBar"

    The ClientMemberName property just provides a variable name for us to use on the client (without the explicit need to add the JavaScript).

    The CustomizeMenuID is the ID of the Customize menu declared in aspx page. This is a standard Telerik menu.

    The OnClientCustomizeClick event fires on the client when you click the clustomize button.

    When you click the customize button we call the showCustomizeMenu method against the client-side ApplicationBar object. This shows the customize menu. When you click the menu it does a standard post back to the server using the OnItemClick="CustomizeMenu_ItemClick" server-side event handler. Once on the server we simply toggle the minimized state with the line:

    this.MainApplicationBar.MinimizeRibbon = !this.MainApplicationBar.MinimizeRibbon;

    The rest of the event handler deals with changing the menu’s image to toggle the display of the tick.

    While you can do this via a post back I would suggest you look at the Client-side example ClientApplicationBar.aspx. This toggles the minimized state without doing a post back and so gives better user feedback.

    Thanks
    Russell Mason

  3. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 05 Jun 2007 Link to this post

    Hello guys,

    This is an updated version of the Office 2007 Ribbon UI application generously provided by Mr. Russell Mason.

    The following is a brief description of the version 1.2 update:

    Added a RibbonResizingManager control to allow collapsing and expanding of RibbonGroups
    Added NavigateUrl and Target properties to Buttons
    Added CausesValidation and ValidationGroup properties to Buttons 

    Enjoy and happy coding!

    Best wishes,
    Stephen Rahnev,
    Technical Support Director, Telerik

    Instantly find answers to your questions at the new Telerik Support Center
  4. Pierre
    Pierre avatar
    212 posts
    Member since:
    Apr 2007

    Posted 07 Jun 2007 Link to this post

    Thanks for the update! I can now let the GenerateClientMember to true without buggon my javascript fonctions.

    But now the minimized ribbon fonction do not work anymore. I can select the application menu and check Minimise ribbon, the checkbox appear but the ribbon are not minimized.

    Thanks
  5. Pierre
    Pierre avatar
    212 posts
    Member since:
    Apr 2007

    Posted 07 Jun 2007 Link to this post

    After several test, If I use your new provided DLL someting goes wrong:
    First I got this error in javascript:

     Erreur : _applicationBar1.attachTabStripEventHandler is not a function

    _applicationBar1.attachTabStripEventHandler();Sys.Application.add_init(function() {
        $create(Telerik.Web.UI.RadAjaxPanel, {"ClientEvents":{OnRequestStart:"",OnResponseEnd:""},"EnableAJAX":true,"EnableHistory":false,"Links":[],"LoadingPanelID":"","Styles":[],"UniqueID":"PagesGMenu$RadAjaxPanel1"}, null, null, $get("PagesGMenu_RadAjaxPanel1"));
    });

    And all my Prometheus RadAjaxManager functionnality work one time only. If I replace your old DLL all work good...
    Any suggestion?
  6. Russell Mason
    Russell Mason avatar
    87 posts
    Member since:
    Oct 2006

    Posted 07 Jun 2007 Link to this post

    Hi

    First things first, are you sure you deployed the new Office2007Client folder to your project? attachTabStripEventHandler is in the JavaScript so it implies it may be trying to use the old version some how.

    If that's not the problem, is this the attaching of an event to OnClientTabSelected you outlined previously? If so I will try to reproduce it to see what's happening.

    Thanks
    Russell Mason
  7. Pierre
    Pierre avatar
    212 posts
    Member since:
    Apr 2007

    Posted 07 Jun 2007 Link to this post

    shame on me... I forgot to copy the office2007 Client folder.
    Thanks very good job.
  8. Shane Stiles
    Shane Stiles avatar
    8 posts
    Member since:
    Feb 2006

    Posted 14 Jun 2007 Link to this post

    Hello fellow devs,

    First of all, I would like to thank Russell for this great app.  I plan to use it in the very near future. 

    Second, I have taken the liberty to convert this application to VB and would like to share it with the community.  How can I upload the ZIP file to this thread?

    *VB Version
  9. Russell Mason
    Russell Mason avatar
    87 posts
    Member since:
    Oct 2006

    Posted 15 Jun 2007 Link to this post

    Hi Shane

    Thanks for you input, its nice to know someone has spend the time and effort to convert this project.

    You need to send a request to Telerik support. However, I would prefer it if you could use another thread (I suggest you ask Telerik's advice on this). That way there would be no confusion as to what flavour people were downloading. Additionally, I would not be able to aswer questions about your convesion and that would help me to continue answering questions on this thread against code I am familiar with.

    Thanks again
    Russell Mason
  10. Pierre
    Pierre avatar
    212 posts
    Member since:
    Apr 2007

    Posted 18 Jun 2007 Link to this post

    What is the best way to reference your ribbonbar.js file?

    If I don't put this:<script language=javascript src='Office2007Client/Scripts/RibbonBar.js'/> 
    I got a javascrip error telling that applcationbar1 is undefined

    I try this:
    <head runat="server">
    <title>Module de Gestion</title>
    <link rel="Stylesheet" type="text/css" href="Office2007Client/Css/RibbonBar.css" />

    <script language=javascript src='Office2007Client/Scripts/RibbonBar.js'/>

    <script type="text/javascript" >
     
    function customizeMenuHandler(sender, eventArgs)
      {
        if (eventArgs.Item.Value == "MinimizeRibbon")
       {
          checked = _applicationBar1.getMinimizeRibbon();
          checked = !checked;
          imageUrl =
    "Images/Misc/Unchecked.gif";
          if (checked)
          {
            imageUrl =
    "Images/Misc/Checked.gif";
          }
          eventArgs.Item.SetImageUrl(imageUrl);
          _applicationBar1.setMinimizeRibbon(checked);
      }
    }
    </script>
    </head>

    its work, but when I try to minimized the ribbon I got a javascript error : customizeMenuHandler are undefined

    if I put <script language=javascript src='Office2007Client/Scripts/RibbonBar.js'/> juste after the <form> tag All work (i can minimized the ribbon) but I got this javascrip error:Sys.WebForms.PageRequestManager.GetInstance() are null or not an object

    Any suggestion? Thanks

  11. Russell Mason
    Russell Mason avatar
    87 posts
    Member since:
    Oct 2006

    Posted 18 Jun 2007 Link to this post

    Hi Pierre

    1) The ribbon will not work without a reference to the javascript file
    2) You must add the script reference in the head section as client side objects are created as the page is rendered, i.e. the script must have been loaded prior to this
    3) I don't understand the error you are getting. If the script 'customizeMenuHandler' is defined in your page then it must exist so should not cause an 'undefined' error

    Did you retype the error message, i.e. could it be that you have mistyped the method name?
    Are you calling customizeMenuHandler from the OnClientItemClicked of a RadMenu, i.e the parameters match those expected?
    How are you using controls?
    Are you using a single page or Master/Content pages?

    The ClientMockup and ClientApplicationBar examples use this mechanism without problem so we need to find what is different about the page you have created.

    Thanks
    Russell Mason

  12. Pierre
    Pierre avatar
    212 posts
    Member since:
    Apr 2007

    Posted 19 Jun 2007 Link to this post

    I found the problem, the 

    type="text/javascript"


    was not precised!
  13. Benoit Alvarez
    Benoit Alvarez avatar
    10 posts
    Member since:
    Dec 2006

    Posted 29 Jun 2007 Link to this post

    Hi,

    Ribbon bar looks great!

    Is there anyway to reduce/change the HTML markup it produces, to make the page downloading faster?

    Regards

  14. Russell Mason
    Russell Mason avatar
    87 posts
    Member since:
    Oct 2006

    Posted 29 Jun 2007 Link to this post

    Hi Benoit

    The layout for the Ribbon is quite complex so requires a reasonable amount of mark-up. I have looked at others who have tried the Ribbon layout in HTML and they have even more so I'm not sure that anything could be done to reduce the actual mark-up required.

    There are ways you could probably use AJAX to progressively load the Ribbon, this would give the impression of loading faster but would actually take just as long. It would also be a sizable undertaking.

    Thanks
    Russell Mason
  15. Pierre
    Pierre avatar
    212 posts
    Member since:
    Apr 2007

    Posted 29 Jun 2007 Link to this post

    Me again.
    i just reinstall all my developpement computer with windows Vista. I donwload the new Telerik release (SP2) and you new ApplicationFramework.

    When I try to start a page with your framework in it, I got an error in the SharedStateWebControl.cs in the function OnPreRender:
    FileLoadException
    Cannot load the file or assembly "RadTabStrip.Net2" version 3.5.0.0, culture= neutral.

    If I look in the Telerik Bin folder, I can see that the RadTabStrip.Net2 are now a version 3.5.2.0. I try to recompile your dll with your CS Projet, same problem.

    Any suggestion?
  16. Russell Mason
    Russell Mason avatar
    87 posts
    Member since:
    Oct 2006

    Posted 30 Jun 2007 Link to this post

    Hi Pierre

    Please see my post in this thread from 5/18/2007 4:38:59 AM. This holds true for any Telerik update.

    Thanks
    Russell Mason
  17. Benoit Alvarez
    Benoit Alvarez avatar
    10 posts
    Member since:
    Dec 2006

    Posted 02 Jul 2007 Link to this post

    Hi,

    I'm a bit confused on the reasons why you've chosen to use the shared state. When you click a button and create a post back, surely all the information you need is in the view state for each object (e.g. textbox, checkbox etc)? Could you explain this a bit further?

    The reason I ask this is I am looking at the possibility of removing this to simplify the code and output it produces.

    Regards

  18. Russell Mason
    Russell Mason avatar
    87 posts
    Member since:
    Oct 2006

    Posted 02 Jul 2007 Link to this post

    Hi Benoit

    I think I've explained the purpose of, and need for, SharedState quite clearly here and in the documentation. This is not a complex thing to undestand and I don't think I can add anything more.

    You can take it out, but nothing will work, I guess thats your choice (though that doesn't sound like it will simply anything to me).

    Thanks
    Russell Mason
  19. Benoit Alvarez
    Benoit Alvarez avatar
    10 posts
    Member since:
    Dec 2006

    Posted 04 Jul 2007 Link to this post

    Hi,

    Thanks for your reply.

    Are there reasons why you have chosen to use "HtmlImage" instead of System.Web.UI.WebControls.Image?

  20. Pierre
    Pierre avatar
    212 posts
    Member since:
    Apr 2007

    Posted 05 Jul 2007 Link to this post

    I russell, a little question:

    I try to ajaxified a orb largeribbonbutton without success. I use this command:

    <orb:LargeRibbonButton ID="btnNew" runat="server" AutoPostBack="true" Text="Ajouter" EnabledImageUrl="Images/32x32/MenuAdd2.gif" ToolTip="Ajouter un item sous l'élément selectionné" ClientMemberName="_largeRibbonButton17" />

    and in my Prometheus RadAjaxManager I put this:

    <telerik:AjaxSetting AjaxControlID="btnNew">
      <UpdatedControls>
         <telerik:AjaxUpdatedControl ControlID="RadTreeMenu" />
      </UpdatedControls>
    </telerik:AjaxSetting>

    And in code behind:

    Public Sub New_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnNew.Click

    The radTreeMenu are updated correctly, but the page have a visible postback. If I try the same thing with a asp.net Button all work good. 
    For now I need to invoque the client part of the ajax manager to avoid visible postback.
    What I am doing wrong?
    Thanks

  21. Chuanbo
    Chuanbo avatar
    32 posts
    Member since:
    Jul 2007

    Posted 16 Jul 2007 Link to this post

    the NavigateUrl do not support root oriented notation.

    like this
    largeRibbonButton.NavigateUrl="~/Admin/User.aspx";
    simply does not work. i checked the source code of RibbonButton.cs,the following line in the RenderClientPostBack method

    // Embedded JavaScript
    string windowOpenCode = string.Format("window.open('{0}', '{1}');", this.NavigateUrl, target);


    maybe we could change this to
    string windowOpenCode = string.Format("window.open('{0}', '{1}');", ResolveUrl(this.NavigateUrl), target);

    so that all the NavigateUrl support the root oriented notation
  22. vn
    vn avatar
    12 posts
    Member since:
    Jul 2007

    Posted 17 Jul 2007 Link to this post

    Hi,

    I have a RibbonGroup object call RibbonGroup1.  How do I get a list of the children objects in the PlaceHolder at runtime?  In order words, I want to get a hold of the three LargeRibbonButton objects using the RibbonGroup1 object in the following code.  I try PlaceHolderControls property but it always empty.  Thanks you.

    <orb:RibbonGroup ID="RibbonGroup1" runat="server" Text="System" Width="280px" ClientMemberName="_ribbonGroup1">
        <PlaceHolder>
            
    <orb:LargeRibbonButton ID="LargeRibbonButton1" runat="server" Text="Groups" Width="50px" EnabledImageUrl="~/Images/32x32/Groups.gif" ToolTip="Administer user groups and permissions" ClientMemberName="_largeRibbonButton1" />
            <orb:LargeRibbonButton ID="LargeRibbonButton2" runat="server" Text="Users" EnabledImageUrl="~/Images/32x32/Users.gif" ToolTip="Administer users and their group membership" ClientMemberName="_largeRibbonButton2" />
            <orb:LargeRibbonButton ID="LargeRibbonButton3" runat="server" Text="Certificates" Width="70px" EnabledImageUrl="~/Images/32x32/Certificates.gif" ToolTip="Administer certificates" ClientMemberName="_largeRibbonButton3" /> 
        </PlaceHolder>
    </orb:RibbonGroup>
  23. sorenhansen.dk
    sorenhansen.dk avatar
    1 posts
    Member since:
    Jul 2007

    Posted 21 Jul 2007 Link to this post

    Hi Russell,

    First of all, thanks for the great RibbonBar, it's very good :-)

    I have a problem, however: I want to add buttons to a RibbonGroup after a push on a regular ASP.NET button (postback), but it doesn't happen. I have debugged your example page ServerProgrammatic.aspx a bit, and it seems the programmatic buttons for a RibbonGroup is added before the event handler for my regular button is executed.

    Is it in any way possible to add buttons dynamically, other than overriding the ConfigureRibbonControls method?

    I hope you can help me!

    Thanks

    /Soren Hansen
  24. jpuopolo
    jpuopolo avatar
    1 posts
    Member since:
    Jul 2007

    Posted 24 Jul 2007 Link to this post

    I am developing a web application based upon java. Can I easily export any menu to a js file?

    Please feel free to email me directly at joseph.puopolo@jpuopolo.com
  25. Ivo
    Admin
    Ivo avatar
    689 posts

    Posted 25 Jul 2007 Link to this post

    Hello Joseph,

    RadControls are based on the ASP.NET framework and all server-side code is implemented on top of the Microsoft framework. The controls are not only client-side and therefore they can not be ported only to JavaScript.

    All the best,
    Ivo
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  26. Zenon
    Zenon avatar
    1 posts
    Member since:
    May 2006

    Posted 26 Jul 2007 Link to this post

    Hello!

    I'm loading RadComboBoxItems in a RadComboBox dynamlicaly from a database in OnLoad-Event of Page.

    RadComboBox does not work correctly inside a RibbonGroup. If SelectedIndexChanged fires, has RadComboBox no items.

    Outside RibbonGroup or if RadComboBoxItems are not dynamicaly loaded, but exist statically in aspx, works all fine.

    Any tipps?

    Thanks a lot,
    Vadim
  27. Russell Mason
    Russell Mason avatar
    87 posts
    Member since:
    Oct 2006

    Posted 27 Jul 2007 Link to this post

    Hi

    Sorry for not replying recently but I am up to my eyes with other projects.

    Unfortunately I do not have any spare time at the moment and won't for at least the next 6 months. I had plans to do a few fixes and add a couple of new features but this has now be postponed.

    This means I am not able to answer any questions or contribute further to this project during this time.

    Thanks for your support
    Russell Mason
  28. ewart
    ewart avatar
    221 posts
    Member since:
    Jan 2007

    Posted 27 Jul 2007 Link to this post

    Hi everyone, I have found a minor bug that causes the 'title' attribute to be rendered twice, e.g.

    <div id="MainApplicationBar_QuickAccessRibbonButton1"   
    title="Scan your computer for viruses"   
    title="Scan your computer for viruses"   
    class="quickAccessButton"

    For now I have fixed by editing LargeRibbonButton.cs line ~132 and also QuickAccessRibbonButton.cs line ~77 and commented out the Attributes.Add("title"..  line.  (I don't use any of the other buttons in my project and can't seem to find the 'base' where I suspect these are being added).

        /// <summary> 
            /// Creates the control's layout.  
            /// </summary> 
            protected override void CreateChildControls()  
            {  
                ClearControls();  
     
                this.Attributes.Add("class", "largeRibbonButton");  
                //this.Attributes.Add("title", this.ToolTip);      EMC commented out to prevent duplicate title attribute being created   
     
                HtmlGenericControl startDiv = new HtmlGenericControl("div");  
                startDiv.EnableViewState = false;  
             

    Doing so will reduce your page size a little with no loss in functionality as far as I can tell..  no doubt someone will find the base class for removing this duplicate.

    cheers
    ewart
  29. p_e_t_e_r
    p_e_t_e_r avatar
    7 posts
    Member since:
    Aug 2007

    Posted 26 Aug 2007 Link to this post

    i have ported ribbon to .net 1.1.
    not everything was ported, i skipped the vs designer/editor part, didn't need it.

    greets
  30. Ivo
    Admin
    Ivo avatar
    689 posts

    Posted 27 Aug 2007 Link to this post

    Hi Peter,

    It is great news that you have taken the time to port the Ribbon project to .Net 1.1
    Please send us the files and we will attach them to this thread or start a new thread in the Code Library and attach the files yourself.

    Your efforts will be rewarded with the respective amount of Telerik points which you can use for discounts in future purchases or renewals.

    Regards,
    Ivo
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
Back to Top