Actions Menu? - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Actions Menu?

  • Actions Menu?
  • 241806_Untitled.png
    Hi,
    I have somehow managed to make my custom module`s backend template look like Sitefinity`s templates.

    I want to have menus (at the top), context menus for each item in grid etc. Please tell me how can I have these menus in my template. Are there controls available for or what?

    Please see the screenshot to have better idea what I want to achieve.

    Thanks
  • 242304_CustomModule_Definitions.zip
    Hi saadi,

    You should use definitions. In fact, in Sitefinity, UI is mostly defined through definitions.

    Following the encircled areas in your screenshot here is how these defintinitions could look like:

    • GridView Toolbar (the topmost toolbar)
      WidgetBarSectionElement masterViewToolbarSection = new WidgetBarSectionElement(productsGridView.ToolbarConfig.Sections)
       
           Name = "toolbar"
       ;
       
       
       var createproductsWidget = new CommandWidgetElement(masterViewToolbarSection.Items)
       
           Name = "CreateproductsWidget",
           ButtonType = CommandButtonType.Create,
           CommandName = DefinitionsHelper.CreateCommandName,
           Text = "CreateItem",
           ResourceClassId = typeof(ProductsResources).Name,
           CssClass = "sfMainAction",
           WidgetType = typeof(CommandWidget),
           PermissionSet = ProductsConstants.Security.PermissionSetName,
           ActionName = ProductsConstants.Security.Create
       ;
       masterViewToolbarSection.Items.Add(createproductsWidget);

      In a similar fashion you can add as many CommandWidgetElements as you need. 

    • Sidebar
      WidgetBarSectionElement sidebarSection = new WidgetBarSectionElement(productsGridView.SidebarConfig.Sections)
       
           Name = "Filter",
           Title = "FilterProducts",
           ResourceClassId = typeof(ProductsResources).Name,
           CssClass = "sfFirst sfWidgetsList sfSeparator sfModules",
           WrapperTagId = "filterSection"
       ;
       
       sidebarSection.Items.Add(new CommandWidgetElement(sidebarSection.Items)
       
           Name = "AllProducts",
           CommandName = DefinitionsHelper.ShowAllItemsCommandName,
           ButtonType = CommandButtonType.SimpleLinkButton,
           Text = "AllProducts",
           ResourceClassId = typeof(ProductsResources).Name,
           CssClass = "",
           WidgetType = typeof(CommandWidget),
           IsSeparator = false,
           ButtonCssClass = "sfSel",
       );


    • Column in the grid
      var gridMode = new GridViewModeElement(productsGridView.ViewModesConfig)
          Name = "Grid"
      ;
      productsGridView.ViewModesConfig.Add(gridMode);
       
      DataColumnElement titleColumn = new DataColumnElement(gridMode.ColumnsConfig)
          Name = "Title",
          HeaderText = Res.Get<Labels>().Title,
          HeaderCssClass = "sfTitleCol",
          ItemCssClass = "sfTitleCol",
          ClientTemplate = @"<a sys:href='javascript:void(0);' sys:class="" 'sf_binderCommand_edit sfItemTitle sf' + UIStatus.toLowerCase()"">
              <strong>Title</strong>
              <span class='sfStatusLocation'>Status</span></a>"
      ;
      gridMode.ColumnsConfig.Add(titleColumn);

    Please mind that the provided snippets above represent sample usage only, the property values need to be changed depending on the specific scenario.

    You can find the idea of definitions explained in the attached file, which is part of a draft help file that is going to be distributed along with the official version.

    Kind regards,
    George
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  • Got idea of how things happens in backend. It seems to be little hectic for defining configurations for each module`s backend control. Can you provide me a starter for it?
  • What is productsGridView in this sample?
  • Hi saadi,

     The is the MasterGridViewElement. This is the configuration element for the MasterView view. The MasterView shows a list of generic content items

    Regards,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.